91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
|
import { useEffect, useState } from 'react';
|
|||
|
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
|||
|
|
import * as authApi from '../../api/auth';
|
|||
|
|
import { ApiError } from '../../api/http';
|
|||
|
|
import { DEFAULT_TENANT } from '../../config';
|
|||
|
|
import { useAuth } from '../../context/AuthContext';
|
|||
|
|
import * as permApi from '../../api/permission';
|
|||
|
|
|
|||
|
|
type OAuthMode = 'login' | 'register';
|
|||
|
|
|
|||
|
|
export function OAuthCallbackPage({ mode }: { mode: OAuthMode }) {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const [search] = useSearchParams();
|
|||
|
|
const { syncSession, refreshRoles } = useAuth();
|
|||
|
|
const [error, setError] = useState('');
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const code = search.get('code');
|
|||
|
|
const state = search.get('state');
|
|||
|
|
const oauthError = search.get('error');
|
|||
|
|
const tenant =
|
|||
|
|
localStorage.getItem('tenant_slug') ?? DEFAULT_TENANT;
|
|||
|
|
|
|||
|
|
if (oauthError) {
|
|||
|
|
setError(search.get('error_description') ?? oauthError);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!code || !state) {
|
|||
|
|
setError('缺少 OAuth 參數（code / state）');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let cancelled = false;
|
|||
|
|
|
|||
|
|
(async () => {
|
|||
|
|
try {
|
|||
|
|
if (mode === 'login') {
|
|||
|
|
const result = await authApi.loginSocialCallback(code, state);
|
|||
|
|
if (result.mfa_required && result.mfa_challenge_id) {
|
|||
|
|
navigate('/login', {
|
|||
|
|
replace: true,
|
|||
|
|
state: {
|
|||
|
|
message: '請完成雙因素驗證以完成登入',
|
|||
|
|
mfa_challenge_id: result.mfa_challenge_id,
|
|||
|
|
tenant,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
await authApi.registerSocialCallback(code, state);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (cancelled) return;
|
|||
|
|
syncSession();
|
|||
|
|
await refreshRoles();
|
|||
|
|
const me = await permApi.getMyPermissions();
|
|||
|
|
const admin = permApi.isAdminRole(me.roles ?? []);
|
|||
|
|
navigate(admin ? '/admin' : '/app', { replace: true });
|
|||
|
|
} catch (err) {
|
|||
|
|
if (cancelled) return;
|
|||
|
|
if (err instanceof ApiError && err.code === 29301000 && mode === 'login') {
|
|||
|
|
setError('尚無帳號，請先註冊或聯絡管理員開通 LDAP 帳號。');
|
|||
|
|
} else {
|
|||
|
|
setError(err instanceof ApiError ? err.message : '登入失敗');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
cancelled = true;
|
|||
|
|
};
|
|||
|
|
}, [mode, navigate, refreshRoles, search, syncSession]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="auth-card">
|
|||
|
|
<h1>{mode === 'login' ? '登入處理中' : '註冊處理中'}</h1>
|
|||
|
|
{error ? (
|
|||
|
|
<>
|
|||
|
|
<p className="form-error">{error}</p>
|
|||
|
|
<p className="auth-footer">
|
|||
|
|
<Link to={mode === 'login' ? '/login' : '/register'}>返回</Link>
|
|||
|
|
</p>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<p className="auth-hint">正在與身分提供者確認，請稍候…</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|