通过 100+ 条技巧学习 Nuxt!

tgauth
@paranoidphantom/tgauth

极其简单的“使用 Telegram 登录”按钮

tgauth

npm versionnpm downloadsLicenseNuxt

😊 这是我的第一个模块,所以我确信有些地方可以改进。

一个简单的解决方案,可将 Telegram 登录按钮添加到您的 Nuxt 应用程序

特性

  • 🚀 为登录按钮提供一个简单的组件
  • 💾 持久化用户数据并提供一个简单的组合式函数来访问它

快速设置

  1. 安装模块
npx nuxi module add @paranoidphantom/tgauth
  1. 添加 TelegramAuth 组件
<template>
    <TelegramAuth bot="<bot username>" />
</templaet>
  1. 使用 useTelegramUser 组合式函数获取用户信息
<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>

在服务器上验证用户

  1. 将您的机器人令牌添加到 .env (从@BotFather 获取一个)
TG_BOT_TOKEN="<token>"
  1. (可选)为身份验证对象设置自定义过期时间(默认为 2 周,0 表示永不过期)
export default defineNuxtConfig({
    // ...
    tgauth: {
        auth_expiration: 42777, // Expiration time in seconds
    },
    // ...
});
  1. 使用中间件来验证用户是否已登录,并发送了从 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