Blog Detail

2

Aug
A Simple Telegram Login Component Made with Vue Js cover image

A Simple Telegram Login Component Made with Vue Js

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.

Published at : 02-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project