Vue3 component for Telegram login

Related tags

component telegram vue vue3
Overview

Vue3 Telegram Login

Base on vue-telegram-login, thanks @vchaptsev

Installation

Install with yarn:

$ yarn add vue3-telegram-login

Install with npm:

$ npm i vue3-telegram-login --save

Usage

Import telegram-login-temp, pass it to the components and use in your template

Loading... ">
<template>
  
  <span v-if="!isLoaded">Loading...span>
  <telegram-login-temp
    mode="callback"
    telegram-login="YourTelegramBot"
    @loaded='telegramLoadedCallbackFunc'
    @callback="yourCallbackFunction"
  />

  
  <telegram-login-temp
    mode="redirect"
    telegram-login="YourTelegramBot"
    @loaded='telegramLoadedCallbackFunc'
    redirect-url="https://your-website.io"
  />
template>

<script setup>
import { telegramLoginTemp } from 'vue3-telegram-login'
import { ref } from 'vue'

const isLoaded = ref(false)

function telegramLoadedCallbackFunc () {
  console.log('script is loaded')
  isLoaded.value = true
}

function yourCallbackFunction (user) {
  // gets user as an input
  // id, first_name, last_name, username,
  // photo_url, auth_date and hash
  console.log(user)
}
script>

Props

You can play around with options on the official widget page

Name Description Required Default
mode 'callback' or 'redirect' True null
telegramLogin Your telegram bot name True null
@callback Your callback function, it will be called after success if mode is 'callback' False true
@loaded Telegram script loaded callback function False null
redirectUrl Your redirect URL, user will be redirected if mode is 'redirect' False null
requestAccess 'write' if you want to get access to send messages from your bot False 'read'
size 'large', 'medium' or 'small' False 'large'
userpic Show user photo, true or false False true
radius Button corner radius (default depends on chosen size) False 20\14\10

Notes

  1. You need to set domain to your bot if you want to user Telagram Login (/setdomain command to @BotFather)
  2. You need to verify the authentication and the integrity of the data received by comparing the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the SHA256 hash of the bot's token used as a secret key (source).
    You can find some code samples on this page.
  3. Don't disable third party cookies if you want to use Telegram Login as a User (thanks @robverhoef)
Releases(v1.0.2)
Owner
Cinob
go go go
Cinob
A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

Abiodun Olunu 6 Jul 8, 2021
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

EMPLA GROUP, LLP 6 May 13, 2021
A configurable & lightweight Vue wrapper component that enables

vue-email-autocomplete A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elemen

James Wylie 22 Jun 25, 2021
a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

null 46 Feb 7, 2021
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

EducationLink 463 Jul 22, 2021
A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input A beautiful text field to format phone numbers made with VueJS NEW VERSION ON MY NEW LIBRARY: MAZ-UI The new version of VuePhon

Mazel 441 Jul 18, 2021
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

VueJS Generators 2.8k Jul 24, 2021
Great pincode input component

vue-pincode-input Great pincode input component for Vue.js applications. Demo on GitHub Pages Features configurable length (symbols count) override-fr

Maxim Noverin 80 Jul 19, 2021
Simplest custom checkbox possible.

Simplest custom checkbox possible.

Eliamar Tani 0 Jul 3, 2021
GitHub buttons component for Vue.

Vue GitHub Buttons GitHub buttons component for Vue. Vue GitHub Buttons Installation Demo Usage Using with Nuxt Module options css useCache Using with

Saran Tanpituckpong ✔️ 33 Apr 24, 2021
A reusable focus directive for reusable Vue.js components

vue-focus A reusable focus directive for reusable Vue.js components Overview It can be tricky to manage input focus. You always have to fall back to a

Denis Karabaza 413 Jul 20, 2021
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

Anton Reshetov 119 Jul 20, 2021
⚡️ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Braid 1.7k Jul 21, 2021
Create conversational conditional-logic forms with Vue.js.

Create conversational conditional-logic forms with Vue.js.

DITDOT 392 Jul 22, 2021