fix: 使用官方 tt.requestAuthCode API 替代 ttjsBridge

- 添加 tt 对象类型声明(官方 H5 API)
- 优先使用 tt.requestAuthCode() 获取授权码
- 保留 ttjsBridge 作为降级兼容方案
- 修正环境检测逻辑

参考文档: https://open.feishu.cn/document/quickly-create-a-login-free-web-app/introduction

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 10:14:03 +08:00
parent 029a3820bb
commit fa8843d9e0
+35 -7
View File
@@ -5,9 +5,18 @@ import { useUserStore } from '@/stores/user'
import QRCodeLogin from './QRCodeLogin'
import styles from './login.module.css'
// 声明 ttjsBridge 类型
// 声明飞书 JSAPI 类型
declare global {
interface Window {
// 官方 tt API(H5 应用免登)
tt?: {
requestAuthCode: (params: {
appId: string
success?: (res: { code: string }) => void
fail?: (err: any) => void
}) => void
}
// 旧版 ttjsBridge(兼容性)
ttjsBridge?: {
getAuthCode: (params: any) => void
}
@@ -39,9 +48,9 @@ export default function Login() {
useEffect(() => {
// 1. 检测是否在飞书客户端内
const ua = navigator.userAgent.toLowerCase()
const isInFeishu = ua.includes('feishu') || ua.includes('lark') || (window as any).ttjsBridge !== undefined
const isInFeishu = ua.includes('feishu') || ua.includes('lark') || window.tt !== undefined
console.log('🔍 Environment check:', { ua, isInFeishu, hasBridge: !!(window as any).ttjsBridge })
console.log('🔍 Environment check:', { ua, isInFeishu, hasTt: window.tt !== undefined })
if (isInFeishu) {
// 飞书内:静默授权
@@ -68,12 +77,30 @@ export default function Login() {
}
}, [])
// 飞书内静默授权
// 飞书内静默授权(使用官方 tt.requestAuthCode API)
const handleFeishuAutoLogin = () => {
console.log('🚀 Feishu auto login started')
if ((window as any).ttjsBridge) {
(window as any).ttjsBridge.getAuthCode({
const appId = 'cli_a8033d607cba500d'
if (window.tt) {
// 使用官方 tt.requestAuthCode API
window.tt.requestAuthCode({
appId: appId,
success: (res) => {
console.log('✅ Got auth code from tt.requestAuthCode:', res.code)
handleFeishuLogin(res.code)
},
fail: (error: any) => {
console.error('❌ requestAuthCode failed:', error)
setLoading(false)
Toast.show('获取授权失败,请重试')
},
})
} else if ((window as any).ttjsBridge) {
// 兼容旧版 ttjsBridge
console.warn('⚠️ Using legacy ttjsBridge API')
;(window as any).ttjsBridge.getAuthCode({
success: (authCode: string) => {
console.log('✅ Got auth code from ttjsBridge:', authCode)
handleFeishuLogin(authCode)
@@ -85,8 +112,9 @@ export default function Login() {
},
})
} else {
console.warn('⚠️ ttjsBridge not available')
console.warn('⚠️ No Feishu bridge available')
setLoading(false)
Toast.show('请在飞书中打开')
}
}