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" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>frontend</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -24,52 +24,6 @@ interface QRCodeLoginProps {
|
|||||||
onClose: () => void
|
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) {
|
export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [status, setStatus] = useState<'loading' | 'pending' | 'scanning' | 'success'>('loading')
|
const [status, setStatus] = useState<'loading' | 'pending' | 'scanning' | 'success'>('loading')
|
||||||
@@ -105,9 +59,6 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
|
|||||||
setQrcodeUrl('')
|
setQrcodeUrl('')
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 尝试加载飞书 QR SDK
|
|
||||||
const sdkLoaded = await loadFeishuQRSDK()
|
|
||||||
|
|
||||||
// 生成登录会话
|
// 生成登录会话
|
||||||
const response = await fetch('/api/v1/auth/qrcode-login', {
|
const response = await fetch('/api/v1/auth/qrcode-login', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -123,7 +74,9 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
|
|||||||
const authUrl = result.data.auth_url
|
const authUrl = result.data.auth_url
|
||||||
sessionIdRef.current = result.data.session_id
|
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
|
// 使用飞书官方 QR SDK
|
||||||
if (qrContainerRef.current) {
|
if (qrContainerRef.current) {
|
||||||
qrContainerRef.current.innerHTML = ''
|
qrContainerRef.current.innerHTML = ''
|
||||||
@@ -139,8 +92,8 @@ export default function QRCodeLogin({ visible, onClose }: QRCodeLoginProps) {
|
|||||||
setStatus('pending')
|
setStatus('pending')
|
||||||
startPolling(result.data.session_id)
|
startPolling(result.data.session_id)
|
||||||
} else {
|
} else {
|
||||||
// SDK 加载失败,使用普通二维码
|
// SDK 未加载,使用普通二维码
|
||||||
console.log('📱 Using fallback QR code')
|
console.warn('⚠️ Feishu QR SDK not loaded, using fallback')
|
||||||
setQrcodeUrl(authUrl)
|
setQrcodeUrl(authUrl)
|
||||||
setUseFallback(true)
|
setUseFallback(true)
|
||||||
setStatus('pending')
|
setStatus('pending')
|
||||||
|
|||||||
Reference in New Issue
Block a user