Vue3 Telegram Login

Base on vue-telegram-login, thanks @vchaptsev

Installation

Install with yarn:

$ yarn add vue3-telegram-login
Bash

Install with npm:

$ npm i vue3-telegram-login --save
Bash

Usage

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

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

  <!-- Redirect mode -->
  <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>
HTML

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)

GitHub

https://github.com/cinob/vue3-telegram-login