vue3-telegram-login is a Vue component for Telegram Login introduced by cinob. This package is extremely beneficial for the developers who want to integrate Telegram Login into their applications. You can utilize it with Vue 3 in your projects.

Installation

You’ve to run this command to install it with npm:

$ npm i vue3-telegram-login --save

Usage

Next, You’ve to Import telegram-login-temp, pass it to the component, and then you can utilize it 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>

Closing Notes

• You need to set the domain to your bot if you want to use Telegram Login (/setdomain command to @BotFather)
• You’ve to validate the authentication and the integrity of the data received by correlating 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 utilized as a secret key (source).
• You can observe some code samples on this page.
• Don’t disable third party cookies if you want to use Telegram Login as a User (thanks @robverhoef )

If you want to learn more about this package, then you can visit its full documentation on Github.