249 lines
8.3 KiB
TypeScript
249 lines
8.3 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card';
|
|||
|
|
import { Button } from '@repo/ui/components/button';
|
|||
|
|
import { Badge } from '@repo/ui/components/badge';
|
|||
|
|
import { Alert, AlertDescription } from '@repo/ui/components/alert';
|
|||
|
|
import { CheckCircle, XCircle, Loader2, ArrowRight, Key, User, Shield } from 'lucide-react';
|
|||
|
|
|
|||
|
|
export default function TestOidcPage() {
|
|||
|
|
const [testResults, setTestResults] = useState<{
|
|||
|
|
discovery: 'idle' | 'loading' | 'success' | 'error';
|
|||
|
|
discoveryData?: any;
|
|||
|
|
discoveryError?: string;
|
|||
|
|
}>({
|
|||
|
|
discovery: 'idle',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const testDiscoveryEndpoint = async () => {
|
|||
|
|
setTestResults((prev) => ({ ...prev, discovery: 'loading' }));
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://localhost:3000/oidc/.well-known/openid_configuration');
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = await response.json();
|
|||
|
|
setTestResults((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
discovery: 'success',
|
|||
|
|
discoveryData: data,
|
|||
|
|
}));
|
|||
|
|
} catch (error) {
|
|||
|
|
setTestResults((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
discovery: 'error',
|
|||
|
|
discoveryError: error instanceof Error ? error.message : '未知错误',
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const startOidcFlow = () => {
|
|||
|
|
const params = new URLSearchParams({
|
|||
|
|
response_type: 'code',
|
|||
|
|
client_id: 'demo-client',
|
|||
|
|
redirect_uri: 'http://localhost:3001/auth/callback',
|
|||
|
|
scope: 'openid profile email',
|
|||
|
|
state: `test-${Date.now()}`,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.location.href = `http://localhost:3000/oidc/auth?${params.toString()}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusIcon = (status: string) => {
|
|||
|
|
switch (status) {
|
|||
|
|
case 'loading':
|
|||
|
|
return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
|
|||
|
|
case 'success':
|
|||
|
|
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
|||
|
|
case 'error':
|
|||
|
|
return <XCircle className="h-5 w-5 text-red-500" />;
|
|||
|
|
default:
|
|||
|
|
return <div className="h-5 w-5 rounded-full border-2 border-gray-300" />;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8">
|
|||
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|||
|
|
{/* 页面标题 */}
|
|||
|
|
<div className="text-center">
|
|||
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">OIDC 流程测试</h1>
|
|||
|
|
<p className="text-lg text-gray-600 dark:text-gray-300">测试和验证 OpenID Connect 认证流程的各个环节</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* OIDC 流程步骤 */}
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="flex items-center gap-2">
|
|||
|
|
<Shield className="h-5 w-5" />
|
|||
|
|
标准 OIDC 认证流程
|
|||
|
|
</CardTitle>
|
|||
|
|
<CardDescription>按照正确的 OIDC 架构，所有登录都在 OIDC Provider 中处理</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-6">
|
|||
|
|
{/* 流程步骤图示 */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4 text-center">
|
|||
|
|
<div className="flex flex-col items-center space-y-2">
|
|||
|
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
|
|||
|
|
<User className="h-6 w-6 text-blue-600 dark:text-blue-300" />
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm font-medium">用户点击登录</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-center">
|
|||
|
|
<ArrowRight className="h-5 w-5 text-gray-400" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col items-center space-y-2">
|
|||
|
|
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
|
|||
|
|
<Shield className="h-6 w-6 text-green-600 dark:text-green-300" />
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm font-medium">重定向到 Provider</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-center">
|
|||
|
|
<ArrowRight className="h-5 w-5 text-gray-400" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col items-center space-y-2">
|
|||
|
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
|
|||
|
|
<Key className="h-6 w-6 text-purple-600 dark:text-purple-300" />
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm font-medium">返回授权码</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 测试按钮 */}
|
|||
|
|
<div className="flex justify-center">
|
|||
|
|
<Button onClick={startOidcFlow} size="lg" className="px-8">
|
|||
|
|
开始 OIDC 认证流程
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 提示信息 */}
|
|||
|
|
<Alert>
|
|||
|
|
<Shield className="h-4 w-4" />
|
|||
|
|
<AlertDescription>
|
|||
|
|
点击上方按钮将重定向到 OIDC Provider 的登录页面。
|
|||
|
|
<br />
|
|||
|
|
<strong>演示账号:</strong> demouser / demo123
|
|||
|
|
</AlertDescription>
|
|||
|
|
</Alert>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* Discovery 端点测试 */}
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="flex items-center gap-2">
|
|||
|
|
{getStatusIcon(testResults.discovery)}
|
|||
|
|
Discovery 端点测试
|
|||
|
|
</CardTitle>
|
|||
|
|
<CardDescription>测试 OIDC Provider 的配置发现端点</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<Button onClick={testDiscoveryEndpoint} disabled={testResults.discovery === 'loading'}>
|
|||
|
|
{testResults.discovery === 'loading' ? '测试中...' : '测试 Discovery 端点'}
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
{testResults.discovery === 'error' && (
|
|||
|
|
<Alert variant="destructive">
|
|||
|
|
<XCircle className="h-4 w-4" />
|
|||
|
|
<AlertDescription>
|
|||
|
|
<strong>错误:</strong> {testResults.discoveryError}
|
|||
|
|
</AlertDescription>
|
|||
|
|
</Alert>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{testResults.discovery === 'success' && testResults.discoveryData && (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<Alert>
|
|||
|
|
<CheckCircle className="h-4 w-4" />
|
|||
|
|
<AlertDescription>
|
|||
|
|
<strong>成功!</strong> OIDC Provider 配置已获取
|
|||
|
|
</AlertDescription>
|
|||
|
|
</Alert>
|
|||
|
|
|
|||
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
|
|||
|
|
<h4 className="font-semibold mb-3">Provider 信息</h4>
|
|||
|
|
<div className="space-y-2 text-sm">
|
|||
|
|
<p>
|
|||
|
|
<strong>Issuer:</strong>{' '}
|
|||
|
|
<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
|
|||
|
|
{testResults.discoveryData.issuer}
|
|||
|
|
</code>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<strong>授权端点:</strong>{' '}
|
|||
|
|
<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
|
|||
|
|
{testResults.discoveryData.authorization_endpoint}
|
|||
|
|
</code>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<strong>令牌端点:</strong>{' '}
|
|||
|
|
<code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
|
|||
|
|
{testResults.discoveryData.token_endpoint}
|
|||
|
|
</code>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-semibold mb-3">支持的功能</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{testResults.discoveryData.response_types_supported?.map((type: string) => (
|
|||
|
|
<Badge key={type} variant="outline">
|
|||
|
|
{type}
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|||
|
|
{testResults.discoveryData.scopes_supported?.map((scope: string) => (
|
|||
|
|
<Badge key={scope} variant="secondary">
|
|||
|
|
{scope}
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 架构说明 */}
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>正确的 OIDC 架构</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-semibold text-green-600 mb-2">✅ 已实现</h4>
|
|||
|
|
<ul className="space-y-1 text-sm">
|
|||
|
|
<li>• OIDC Provider 包含登录页面</li>
|
|||
|
|
<li>• 标准授权码流程</li>
|
|||
|
|
<li>• PKCE 支持</li>
|
|||
|
|
<li>• 内置会话管理</li>
|
|||
|
|
<li>• 自动令牌刷新</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-semibold text-red-600 mb-2">❌ 已移除</h4>
|
|||
|
|
<ul className="space-y-1 text-sm">
|
|||
|
|
<li>• 客户端应用的登录页面</li>
|
|||
|
|
<li>• 自定义认证逻辑</li>
|
|||
|
|
<li>• 重复的用户管理</li>
|
|||
|
|
<li>• 混合认证流程</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|