fix: 在 HTML 中直接引入飞书 QR SDK

根据官方文档,SDK 应该在 HTML 中通过 script 标签引入,
而不是动态加载。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 11:19:46 +08:00
parent 429a8605fc
commit 6eb621cd95
2 changed files with 7 additions and 52 deletions
+2
View File
@@ -5,6 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
<!-- 飞书扫码登录 SDK -->
<script src="https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js"></script>
</head>
<body>
<div id="root"></div>
+5 -52
View File
@@ -24,52 +24,6 @@ interface QRCodeLoginProps {
onClose: () => void
}
// 动态加载飞书 QR SDK
const loadFeishuQRSDK = (): Promise<boolean> => {
return new Promise((resolve) => {
// 检查是否已经加载
if (window.QR) {
console.log('✅ Feishu QR SDK already loaded')
resolve(true)
return
}
console.log('📦 Loading Feishu QR SDK...')
const script = document.createElement('script')
script.id = 'feishu-qr-sdk'
script.src = 'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
script.async = true
script.timeout = 5000 // 5秒超时
const timeoutId = setTimeout(() => {
console.warn('⚠️ Feishu QR SDK load timeout, using fallback')
resolve(false)
}, 5000)
script.onload = () => {
clearTimeout(timeoutId)
setTimeout(() => {
if (window.QR) {
console.log('✅ Feishu QR SDK loaded successfully')
resolve(true)
} else {
console.warn('⚠️ QR SDK loaded but window.QR not found, using fallback')
resolve(false)
}
}, 100)
}
script.onerror = () => {
clearTimeout(timeoutId)
console.warn('⚠️ Failed to load Feishu QR SDK, using fallback')
resolve(false) // 不 reject,而是返回 false 使用降级方案
}
document.head.appendChild(script)
})
}
export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
const navigate = useNavigate()
const [status, setStatus] = useState<'loading' | 'pending' | 'scanning' | 'success'>('loading')
@@ -105,9 +59,6 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
setQrcodeUrl('')
try {
// 尝试加载飞书 QR SDK
const sdkLoaded = await loadFeishuQRSDK()
// 生成登录会话
const response = await fetch('/api/v1/auth/qrcode-login', {
method: 'POST',
@@ -123,7 +74,9 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
const authUrl = result.data.auth_url
sessionIdRef.current = result.data.session_id
if (sdkLoaded && window.QR) {
// 检查飞书 QR SDK 是否已加载(在 index.html 中引入)
if (window.QR) {
console.log('✅ Using Feishu QR SDK')
// 使用飞书官方 QR SDK
if (qrContainerRef.current) {
qrContainerRef.current.innerHTML = ''
@@ -139,8 +92,8 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
setStatus('pending')
startPolling(result.data.session_id)
} else {
// SDK 加载失败,使用普通二维码
console.log('📱 Using fallback QR code')
// SDK 未加载,使用普通二维码
console.warn('⚠️ Feishu QR SDK not loaded, using fallback')
setQrcodeUrl(authUrl)
setUseFallback(true)
setStatus('pending')