feat: add Telegram authentication

frontend_nuxt/app.vue

@@ -58,6 +58,7 @@ const hideMenu = computed(() => {
     '/discord-callback',
     '/forgot-password',
     '/google-callback',
+    '/telegram-callback',
   ].includes(useRoute().path)
 })
 

frontend_nuxt/assets/icons/telegram.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#2AABEE" d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0z"/>
+  <path fill="#fff" d="M17.565 7.06L15.7 17.05c-.14.706-.51.88-1.033.548l-2.861-2.108-1.382 1.332c-.153.153-.282.282-.575.282l.205-2.912 5.303-4.788c.231-.205-.05-.32-.36-.116L8.9 11.27l-3.14-.98c-.682-.213-.696-.682.143-1.007l11.18-4.307c.511-.186.958.116.783.914z"/>
+</svg>

frontend_nuxt/nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
       githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || '',
       discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
       twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
+      telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
     },
   },
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],

frontend_nuxt/pages/login.vue

@@ -51,6 +51,14 @@
         <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="login-page-button-text">Twitter 登录</div>
       </div>
+      <div class="login-page-button" @click="loginWithTelegram">
+        <img
+          class="login-page-button-icon"
+          src="../assets/icons/telegram.svg"
+          alt="Telegram Logo"
+        />
+        <div class="login-page-button-text">Telegram 登录</div>
+      </div>
     </div>
   </div>
 </template>
@@ -62,6 +70,7 @@ import { googleAuthorize } from '~/utils/google'
 import { githubAuthorize } from '~/utils/github'
 import { discordAuthorize } from '~/utils/discord'
 import { twitterAuthorize } from '~/utils/twitter'
+import { telegramAuthorize } from '~/utils/telegram'
 import BaseInput from '~/components/BaseInput.vue'
 import { registerPush } from '~/utils/push'
 const config = useRuntimeConfig()
@@ -118,6 +127,9 @@ const loginWithDiscord = () => {
 const loginWithTwitter = () => {
   twitterAuthorize()
 }
+const loginWithTelegram = () => {
+  telegramAuthorize()
+}
 </script>
 
 <style scoped>

frontend_nuxt/pages/signup.vue

@@ -85,6 +85,14 @@
         <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
+      <div class="signup-page-button" @click="signupWithTelegram">
+        <img
+          class="signup-page-button-icon"
+          src="~/assets/icons/telegram.svg"
+          alt="Telegram Logo"
+        />
+        <div class="signup-page-button-text">Telegram 注册</div>
+      </div>
     </div>
   </div>
 </template>
@@ -96,6 +104,7 @@ import { discordAuthorize } from '~/utils/discord'
 import { githubAuthorize } from '~/utils/github'
 import { googleAuthorize } from '~/utils/google'
 import { twitterAuthorize } from '~/utils/twitter'
+import { telegramAuthorize } from '~/utils/telegram'
 import { loadCurrentUser, setToken } from '~/utils/auth'
 
 const route = useRoute()
@@ -228,6 +237,9 @@ const signupWithDiscord = () => {
 const signupWithTwitter = () => {
   twitterAuthorize(inviteToken.value)
 }
+const signupWithTelegram = () => {
+  telegramAuthorize(inviteToken.value)
+}
 </script>
 
 <style scoped>

frontend_nuxt/pages/telegram-callback.vue

@@ -0,0 +1,41 @@
+<template>
+  <CallbackPage />
+</template>
+
+<script setup>
+import CallbackPage from '~/components/CallbackPage.vue'
+import { telegramExchange } from '~/utils/telegram'
+
+onMounted(async () => {
+  const url = new URL(window.location.href)
+  const inviteToken =
+    url.searchParams.get('invite_token') || url.searchParams.get('invitetoken') || ''
+  const hash = url.hash.startsWith('#tgAuthResult=') ? url.hash.slice('#tgAuthResult='.length) : ''
+  if (!hash) {
+    navigateTo('/login', { replace: true })
+    return
+  }
+  let authData
+  try {
+    const parsed = JSON.parse(decodeURIComponent(hash))
+    authData = {
+      id: String(parsed.id),
+      firstName: parsed.first_name,
+      lastName: parsed.last_name,
+      username: parsed.username,
+      photoUrl: parsed.photo_url,
+      authDate: parsed.auth_date,
+      hash: parsed.hash,
+    }
+  } catch (e) {
+    navigateTo('/login', { replace: true })
+    return
+  }
+  const result = await telegramExchange(authData, inviteToken, '')
+  if (result.needReason) {
+    navigateTo(`/signup-reason?token=${result.token}`, { replace: true })
+  } else {
+    navigateTo('/', { replace: true })
+  }
+})
+</script>

frontend_nuxt/utils/telegram.js

@@ -0,0 +1,56 @@
+import { toast } from '../main'
+import { setToken, loadCurrentUser } from './auth'
+import { registerPush } from './push'
+
+export function telegramAuthorize(inviteToken = '') {
+  const config = useRuntimeConfig()
+  const WEBSITE_BASE_URL = config.public.websiteBaseUrl
+  const TELEGRAM_BOT_ID = config.public.telegramBotId
+  if (!TELEGRAM_BOT_ID) {
+    toast.error('Telegram 登录不可用')
+    return
+  }
+  const redirectUri = `${WEBSITE_BASE_URL}/telegram-callback${inviteToken ? `?invite_token=${encodeURIComponent(inviteToken)}` : ''}`
+  const url =
+    `https://oauth.telegram.org/auth` +
+    `?bot_id=${encodeURIComponent(TELEGRAM_BOT_ID)}` +
+    `&origin=${encodeURIComponent(WEBSITE_BASE_URL)}` +
+    `&request_access=write` +
+    `&redirect_uri=${encodeURIComponent(redirectUri)}`
+  window.location.href = url
+}
+
+export async function telegramExchange(authData, inviteToken = '', reason = '') {
+  try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    const payload = { ...authData, reason }
+    if (inviteToken) payload.inviteToken = inviteToken
+    const res = await fetch(`${API_BASE_URL}/api/auth/telegram`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    const data = await res.json()
+    if (res.ok && data.token) {
+      setToken(data.token)
+      await loadCurrentUser()
+      toast.success('登录成功')
+      registerPush?.()
+      return { success: true, needReason: false }
+    } else if (data.reason_code === 'NOT_APPROVED') {
+      toast.info('当前为注册审核模式，请填写注册理由')
+      return { success: false, needReason: true, token: data.token }
+    } else if (data.reason_code === 'IS_APPROVING') {
+      toast.info('您的注册理由正在审批中')
+      return { success: true, needReason: false }
+    } else {
+      toast.error(data.error || '登录失败')
+      return { success: false, needReason: false, error: data.error || '登录失败' }
+    }
+  } catch (e) {
+    console.error(e)
+    toast.error('登录失败')
+    return { success: false, needReason: false, error: '登录失败' }
+  }
+}