64 lines
2.3 KiB
TypeScript
Executable File
64 lines
2.3 KiB
TypeScript
Executable File
'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>
|
||
);
|
||
}
|