218 lines
7.6 KiB
TypeScript
218 lines
7.6 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useState, Suspense } from 'react'
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import { signIn } from 'next-auth/react'
|
||
|
||
function DingtalkCallbackContent() {
|
||
const router = useRouter()
|
||
const searchParams = useSearchParams()
|
||
const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
|
||
const [message, setMessage] = useState('正在处理钉钉登录...')
|
||
|
||
useEffect(() => {
|
||
const handleDingtalkLogin = async () => {
|
||
try {
|
||
const code = searchParams?.get('code')
|
||
const state = searchParams?.get('state') || 'default'
|
||
|
||
if (!code) {
|
||
throw new Error('授权失败：缺少授权码')
|
||
}
|
||
|
||
// 解析state参数，获取原始访问地址
|
||
let originUrl = ''
|
||
try {
|
||
const stateData = JSON.parse(decodeURIComponent(state))
|
||
originUrl = stateData.origin || ''
|
||
} catch (e) {
|
||
// state解析失败，忽略
|
||
}
|
||
|
||
setMessage('正在验证授权信息...')
|
||
|
||
// 调用钉钉登录接口
|
||
const response = await fetch('/api/dingtalk/login', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ code, state }),
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (!response.ok || !data.success) {
|
||
throw new Error(data.message || '登录失败')
|
||
}
|
||
|
||
// 检查是否需要完善信息
|
||
if (data.needCompleteProfile) {
|
||
setMessage('首次登录，正在跳转到信息完善页面...')
|
||
setStatus('success')
|
||
|
||
// 跳转到信息完善页面
|
||
const userInfoParam = encodeURIComponent(JSON.stringify(data.user))
|
||
setTimeout(() => {
|
||
if (window.opener) {
|
||
// 新窗口模式：通知打开窗口的父页面
|
||
window.opener.postMessage(
|
||
{
|
||
type: 'dingtalk_need_complete_profile',
|
||
userInfo: data.user,
|
||
},
|
||
'*'
|
||
)
|
||
window.close()
|
||
} else if (window.parent !== window) {
|
||
// iframe模式：通知父窗口跳转（兼容旧代码）
|
||
window.parent.postMessage(
|
||
{
|
||
type: 'dingtalk_need_complete_profile',
|
||
userInfo: data.user,
|
||
},
|
||
'*'
|
||
)
|
||
} else {
|
||
router.push(`/complete-profile?userInfo=${userInfoParam}`)
|
||
}
|
||
}, 1000)
|
||
return
|
||
}
|
||
|
||
setMessage('登录成功，正在跳转...')
|
||
setStatus('success')
|
||
|
||
// 检查来源：优先使用state中的origin，其次使用referrer
|
||
const isFromIntranet = originUrl && originUrl.includes('192.168.')
|
||
|
||
// 通知父窗口登录成功（如果在 iframe 或新窗口中）
|
||
if (window.opener) {
|
||
// 新窗口模式：通知打开窗口的父页面
|
||
window.opener.postMessage(
|
||
{
|
||
type: 'dingtalk_login_success',
|
||
userInfo: data.user,
|
||
originUrl: originUrl // 携带原始地址
|
||
},
|
||
'*'
|
||
)
|
||
} else if (window.parent !== window) {
|
||
// iframe模式：通知父窗口（兼容旧代码）
|
||
window.parent.postMessage(
|
||
{
|
||
type: 'dingtalk_login_success',
|
||
userInfo: data.user,
|
||
originUrl: originUrl // 携带原始地址
|
||
},
|
||
'*'
|
||
)
|
||
} else {
|
||
// 不在 iframe 中（直接访问回调页面）
|
||
if (isFromIntranet) {
|
||
// 从内网来的：不在这里创建session，跳转回内网后由内网页面创建
|
||
setMessage('登录成功，正在返回内网...')
|
||
// 将用户信息作为参数传递，让内网页面创建session
|
||
window.location.href = `${originUrl}/login?dingtalk_success=true&email=${encodeURIComponent(data.user.email)}`
|
||
} else {
|
||
// 从外网来的：直接创建session并跳转
|
||
const signInResult = await signIn('credentials', {
|
||
email: data.user.email,
|
||
password: 'dingtalk_auto_login',
|
||
redirect: false,
|
||
})
|
||
|
||
if (signInResult?.error) {
|
||
throw new Error(signInResult.error)
|
||
}
|
||
|
||
setTimeout(() => {
|
||
router.push('/')
|
||
router.refresh()
|
||
}, 1000)
|
||
}
|
||
}
|
||
} catch (error: any) {
|
||
console.error('钉钉登录错误:', error)
|
||
setStatus('error')
|
||
setMessage(error.message || '登录失败，请稍后再试')
|
||
|
||
// 3秒后关闭或跳转
|
||
setTimeout(() => {
|
||
if (window.opener) {
|
||
// 新窗口模式：通知打开窗口的父页面
|
||
window.opener.postMessage({ type: 'dingtalk_login_error', message: error.message }, '*')
|
||
window.close()
|
||
} else if (window.parent !== window) {
|
||
// iframe模式：通知父窗口（兼容旧代码）
|
||
window.parent.postMessage({ type: 'dingtalk_login_error', message: error.message }, '*')
|
||
} else {
|
||
router.push('/login')
|
||
}
|
||
}, 3000)
|
||
}
|
||
}
|
||
|
||
handleDingtalkLogin()
|
||
}, [searchParams, router])
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
|
||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8">
|
||
<div className="text-center">
|
||
{status === 'loading' && (
|
||
<div className="mb-4">
|
||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
|
||
</div>
|
||
)}
|
||
|
||
{status === 'success' && (
|
||
<div className="mb-4">
|
||
<svg className="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
|
||
{status === 'error' && (
|
||
<div className="mb-4">
|
||
<svg className="mx-auto h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
|
||
<h2 className={`text-xl font-semibold mb-2 ${
|
||
status === 'error' ? 'text-red-600' : 'text-gray-800'
|
||
}`}>
|
||
{status === 'loading' && '钉钉登录'}
|
||
{status === 'success' && '登录成功'}
|
||
{status === 'error' && '登录失败'}
|
||
</h2>
|
||
|
||
<p className="text-gray-600">{message}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function DingtalkCallbackPage() {
|
||
return (
|
||
<Suspense fallback={
|
||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
|
||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8">
|
||
<div className="text-center">
|
||
<div className="mb-4">
|
||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
|
||
</div>
|
||
<h2 className="text-xl font-semibold mb-2 text-gray-800">钉钉登录</h2>
|
||
<p className="text-gray-600">正在加载...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}>
|
||
<DingtalkCallbackContent />
|
||
</Suspense>
|
||
)
|
||
}
|
||
|