tgauth

😊 これは私の最初のモジュールなので、改善できる点があると思います。

Nuxtアプリにテレグラムログインボタンを追加する簡単なソリューション

機能

🚀 ログインボタン用のシンプルなコンポーネントを提供します
💾 ユーザーデータを保持し、アクセスするためのシンプルなコンポーザブルを提供します

クイックセットアップ

モジュールをインストールします。

npx nuxi module add @paranoidphantom/tgauth

TelegramAuth コンポーネントを追加します。

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

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>

サーバー上でユーザーを検証します。

.envにボットトークンを追加します（BotFatherから取得できます。）

TG_BOT_TOKEN="<token>"

（オプション）認証オブジェクトのカスタム有効期限を設定します（デフォルトは2週間、期限なしの場合は0）

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

ユーザーがログインしているかどうかと、テレグラムから送信された正当な認証オブジェクトを送信したかどうかを検証するためにミドルウェアを使用します。

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