64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { Button } from '@nice/ui/components/button'
|
|||
|
|
import { oidcClient } from '@/lib/auth/oidc-client';
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
|
|||
|
|
export default function AuthTestPage() {
|
|||
|
|
const [redirectUri, setRedirectUri] = useState('');
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// 设置回调 URI
|
|||
|
|
setRedirectUri(`${window.location.origin}/auth/callback`);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleLogin = () => {
|
|||
|
|
if (!redirectUri) return;
|
|||
|
|
|
|||
|
|
// 构建授权 URL
|
|||
|
|
const authUrl = oidcClient.buildAuthorizationUrl({
|
|||
|
|
redirectUri,
|
|||
|
|
state: 'test-state',
|
|||
|
|
scope: 'openid profile email',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 保存状态到 sessionStorage（用于回调验证）
|
|||
|
|
sessionStorage.setItem('oauth_state', 'test-state');
|
|||
|
|
sessionStorage.setItem('oauth_redirect_uri', redirectUri);
|
|||
|
|
|
|||
|
|
// 跳转到授权页面
|
|||
|
|
window.location.href = authUrl;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center">
|
|||
|
|
<div className="max-w-md w-full space-y-8">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|||
|
|
统一身份认证测试
|
|||
|
|
</h2>
|
|||
|
|
<p className="mt-2 text-center text-sm text-gray-600">
|
|||
|
|
点击按钮跳转到授权登录页面
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-8 space-y-6">
|
|||
|
|
<Button
|
|||
|
|
onClick={handleLogin}
|
|||
|
|
className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|||
|
|
disabled={!redirectUri}
|
|||
|
|
>
|
|||
|
|
{!redirectUri ? '正在初始化...' : '统一身份认证登录'}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{redirectUri && (
|
|||
|
|
<div className="mt-4 text-xs text-gray-500 text-center">
|
|||
|
|
<p>回调地址: {redirectUri}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|