tgauth

😊 這是我的第一個模組，所以我確信還有一些可以改進的地方。

為您的 Nuxt 應用程式新增 Telegram 登入按鈕的簡單解決方案

功能

🚀 提供用於登入按鈕的簡單組件
💾 持續保存使用者資料，並提供簡單的 composable 以存取資料

快速設定

安裝模組

npx nuxi module add @paranoidphantom/tgauth

新增 TelegramAuth 組件

<template>
    <TelegramAuth bot="<bot username>" />
</templaet>

使用 useTelegramUser composable 取得使用者資訊

<script lang="ts" setup>
const { user } = useTelegramUser();

console.log(user.value); // => { first_name: "John", last_name: "Doe", username: "johndoe", ...}
</script>

登出

<script lang="ts" setup>
const { logout } = useTelegramUser();

logout(); // => clears stored telegram user data
</script>

在伺服器上驗證使用者

將您的機器人權杖新增至 .env (從 @BotFather 取得)

TG_BOT_TOKEN="<token>"

(選填) 設定驗證物件的自訂到期時間 (預設為 2 週，0 代表永不過期)

export default defineNuxtConfig({
    // ...
    tgauth: {
        auth_expiration: 42777, // Expiration time in seconds
    },
    // ...
});

使用中介層驗證使用者是否已登入，並發送從 Telegram 收到的合法驗證物件

import { serverTelegramUser } from "#tgauth/server";

export default defineEventHandler(async (event) => {
    const { valid, user } = await serverTelegramUser(event);
    // valid === true if data came from the telegram
    // user is defined if valid === true and contains user data
});

監聽事件

<template>
    <TelegramAuth @login="(data) => console.log(data)" @logout="() => console.log('Logged out!')" bot="<bot username>" />
</templaet>

使用重新導向模式

如果使用者被重新導向到您的 Nuxt 應用程式，useTelegramUser 將會自動填入回傳的資料。

<template>
    <TelegramAuth bot="<bot username>" auth-url="https://your-app.com/callback" />
</templaet>

貢獻

本地開發

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run Vitest
bun run test
bun run test:watch

# Release new version
bun run release