website·Indexed 31 days ago
https://televue.skhr.vg/A library for integrating Telegram widgets into Vue applications, including sharing buttons, post embeds, discussion widgets, and Telegram login and passport authorization methods.
ButtonLogin component from televue allows you to authorize users on your website via Telegram. After successful authorization, the widget can either redirect the user to a specified URL or emit a callback event containing the user data.<script setup>
import { ButtonLogin } from 'televue'
const loginWithTelegram = async (user) => {
// Handle user data and verify authorization on the backend
// Reference: https://core.telegram.org/widgets/login#checking-authorization
}
</script>
<template>
<ButtonLogin
mode="callback"
size="large"
bot-username="televuebot"
@callback="loginWithTelegram"
/>
</template># Using npm
npm install televue
# Using yarn
yarn add televue<!-- Using unpkg -->
<script src="https://unpkg.com/televue"></script>To create a custom sharing button without using a library, point the user to the following URL on click. Both the {url} and {text} parameters must be URL-encoded.
{url}: The URL the user will be sharing (required).{text}: An optional description to be included with the link.https://t.me/share/url?url={url}&text={text}WidgetDiscussion component allows you to embed discussions from any public Telegram channel on your website. You can either link to a specific post to embed that specific discussion or link to a channel to automatically show discussions for articles posted in that channel. For automatic channel-based discussions to work, you must add a canonical link tag to your page header: <link rel="canonical" href="%page_url%">, where %page_url% is the current page's canonical URL.<script setup>
import { WidgetDiscussion } from 'televue'
</script>
<template>
<WidgetDiscussion
post="televuenews/3"
:limit="20"
colorful
/>
</template>ButtonLogin widget, you must create a Telegram bot. To ensure user trust, the bot's name and profile picture should match your website's branding. Crucially, you must link your website's domain to the bot by sending the /setdomain command to @BotFather.WidgetPost) within the <script setup> block of your Single File Component (SFC) and place it in the <template>.<script setup>
import { WidgetPost } from 'televue'
</script>
<template>
<WidgetPost post="televuenews/3" />
</template>To receive encrypted data from Telegram Passport, your bot must have a public key registered with @BotFather.
openssl genrsa 2048 > private.keyopenssl rsa -in private.key -pubout/setpublickey command with @BotFather./setprivacypolicy command with @BotFather to provide the link users will see during authorization.# Generate private key
openssl genrsa 2048 > private.key
# Generate public key
openssl rsa -in private.key -puboutThe ButtonPassport component provides a unified authorization method for services requiring personal identification. It allows users to share their real-world ID documents (finance, ICOs, etc.) via Telegram.
Warning: This component is experimental and should not be used in production.
scope parameter.<script setup>
import { ButtonPassport } from 'televue'
const authParameters = {
bot_id: XXXXXX, // ID of your bot
scope: {
data: [{ type: 'id_document', selfie: true }, 'address_document', 'phone_number', 'email'],
v: 1
},
public_key: '-----BEGIN PUBLIC KEY----- ...', // Public key of your bot
nonce: 'ab2df83746a87d2f3bd6...', // Bot-specified nonce
callback_url: 'https://example.com/callback/', // Redirect URL
}
</script>
<template>
<ButtonPassport
:auth-parameters="authParameters"
:auth-button-options="{ tooltip_position: 'right' }"
/>
</template>useShareURL composable from TeleVue allows you to generate a shareable Telegram link based on a reactive URL and a custom comment.<script setup>
import { useShareURL } from 'televue'
import { ref } from 'vue'
const href = ref(location.href)
const shareURL = useShareURL(href, 'Your comment')
</script>
<template>
<a
:href="shareURL"
target="_blank"
rel="noreferrer"
>
Share on Telegram
</a>
</template>TelegramIcon and TelegramRoundIcon.<script setup>
import { TelegramIcon, TelegramRoundIcon } from 'televue'
</script>
<template>
<div class="text-sky-500 flex items-center space-x-5">
<TelegramIcon class="w-8" />
<TelegramRoundIcon class="w-8" />
</div>
</template>The ButtonPassport component accepts two primary props:
authParameters (Required): Configuration for the Telegram Passport request, including bot ID, requested data scope, public key, and callback URL.authButtonOptions (Optional): Visual and behavioral settings for the button and its tooltip.