Vue3 Telegram Login

Install with npm:

$ npm i @maxim0210/vue3_telegram_login --save

Usage

<template>
  <vueTelegramLogin :options="options" :onTelegramAuth="onAuth" />
</template>

<script setup>
  import { ref } from "vue";
  import vueTelegramLogin from "@/components/vue_telegram_login.vue";

  const options = ref({
    "telegram-login": "botforauthonwebbot",
    size: "medium",
    userpic: false,
    "request-access": "write",
  });

  const onAuth = (user) => {
    console.log(user);
  };
</script>

Props

| Name | descriptoin | required | | -------------- | --------------------------------------------------------------- | -------- | | options | Options for auth with telegram | true | | onTelegramAuth | The function that will be called after successful authorization |

Options

Example for callback

{
  "telegram-login": "example_name_bot", // name of your bot
  size: "medium", // size of button, e.g. small | medium | large
  userpic: false, // show user photo
  "request-access": "write" // Access to send messages from your bot
}

Example for redirect

{
  "telegram-login": "example_name_bot", // name of your bot
  size: "medium", // size of button, e.g. small | medium | large
  userpic: false, // show user photo
  "request-access": "write", // Access to send messages from your bot
  "auth-url":"http://example.com"
}

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.