fix: 在 HTML 中直接引入飞书 QR SDK
根据官方文档,SDK 应该在 HTML 中通过 script 标签引入, 而不是动态加载。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user