支持速率限制
然后把oauth单独放一个页面 一些UI调整
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React from 'react'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import {
|
||||
Container,
|
||||
@ -9,89 +9,27 @@ import {
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
CardActions,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListItemIcon,
|
||||
Divider,
|
||||
Chip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Alert
|
||||
Divider
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Person,
|
||||
Email,
|
||||
CalendarToday,
|
||||
Security,
|
||||
Add,
|
||||
Delete,
|
||||
Visibility,
|
||||
VisibilityOff,
|
||||
Logout
|
||||
Logout,
|
||||
Security
|
||||
} from '@mui/icons-material'
|
||||
import axios from 'axios'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const Dashboard = () => {
|
||||
const { user, logout } = useAuth()
|
||||
const [clients, setClients] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [openCreateDialog, setOpenCreateDialog] = useState(false)
|
||||
const [newClient, setNewClient] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
redirect_uris: [''],
|
||||
scopes: ['read', 'write']
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchClients()
|
||||
}, [])
|
||||
|
||||
const fetchClients = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/oauth/clients')
|
||||
setClients(response.data.data.clients)
|
||||
} catch (error) {
|
||||
setError('获取客户端列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateClient = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
await axios.post('/api/oauth/clients', newClient)
|
||||
setOpenCreateDialog(false)
|
||||
setNewClient({ name: '', description: '', redirect_uris: [''], scopes: ['read', 'write'] })
|
||||
fetchClients()
|
||||
} catch (error) {
|
||||
setError(error.response?.data?.message || '创建客户端失败')
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleDeleteClient = async (clientId) => {
|
||||
if (window.confirm('确定要删除这个客户端吗？')) {
|
||||
try {
|
||||
await axios.delete(`/api/oauth/clients/${clientId}`)
|
||||
fetchClients()
|
||||
} catch (error) {
|
||||
setError('删除客户端失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
个人中心
|
||||
@ -101,171 +39,74 @@ const Dashboard = () => {
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError('')}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{/* 用户信息卡片 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Paper elevation={2} sx={{ p: 3 }}>
|
||||
<Box display="flex" alignItems="center" mb={2}>
|
||||
<Person sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">用户信息</Typography>
|
||||
</Box>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Person />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="用户名" secondary={user?.username} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Email />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="邮箱" secondary={user?.email} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<CalendarToday />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="注册时间"
|
||||
secondary={new Date(user?.created_at).toLocaleDateString()}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
startIcon={<Logout />}
|
||||
onClick={handleLogout}
|
||||
fullWidth
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
{/* OAuth客户端管理 */}
|
||||
<Grid item xs={12} md={8}>
|
||||
<Paper elevation={2} sx={{ p: 3 }}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Security sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">OAuth客户端</Typography>
|
||||
<Grid item xs={12}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
用户信息
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Person sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
用户名
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.username}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => setOpenCreateDialog(true)}
|
||||
>
|
||||
创建客户端
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{clients.length === 0 ? (
|
||||
<Box textAlign="center" py={4}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
还没有OAuth客户端，点击上方按钮创建一个
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Email sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
邮箱
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.email}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
{clients.map((client) => (
|
||||
<Grid item xs={12} key={client.client_id}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="flex-start">
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{client.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
{client.description}
|
||||
</Typography>
|
||||
<Box mt={1}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
客户端ID: {client.client_id}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box mt={1}>
|
||||
{client.scopes.map((scope) => (
|
||||
<Chip
|
||||
key={scope}
|
||||
label={scope}
|
||||
size="small"
|
||||
sx={{ mr: 0.5, mb: 0.5 }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
color="error"
|
||||
size="small"
|
||||
onClick={() => handleDeleteClient(client.client_id)}
|
||||
>
|
||||
<Delete />
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<CalendarToday sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
注册时间
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.created_at ? new Date(user.created_at).toLocaleDateString('zh-CN') : '未知'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* 创建客户端对话框 */}
|
||||
<Dialog open={openCreateDialog} onClose={() => setOpenCreateDialog(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>创建OAuth客户端</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="客户端名称"
|
||||
value={newClient.name}
|
||||
onChange={(e) => setNewClient({ ...newClient, name: e.target.value })}
|
||||
margin="normal"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="描述"
|
||||
value={newClient.description}
|
||||
onChange={(e) => setNewClient({ ...newClient, description: e.target.value })}
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={2}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="重定向URI"
|
||||
value={newClient.redirect_uris[0]}
|
||||
onChange={(e) => setNewClient({
|
||||
...newClient,
|
||||
redirect_uris: [e.target.value]
|
||||
})}
|
||||
margin="normal"
|
||||
required
|
||||
placeholder="http://localhost:3001/callback"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenCreateDialog(false)}>取消</Button>
|
||||
<Button
|
||||
onClick={handleCreateClient}
|
||||
variant="contained"
|
||||
disabled={loading || !newClient.name}
|
||||
>
|
||||
{loading ? '创建中...' : '创建'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
{/* 功能按钮 */}
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Security />}
|
||||
onClick={() => navigate('/oauth/authorize')}
|
||||
>
|
||||
OAuth 管理
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={handleLogout}
|
||||
startIcon={<Logout />}
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@ -10,13 +10,22 @@ import {
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
CardActions,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Chip,
|
||||
Alert,
|
||||
CircularProgress
|
||||
CircularProgress,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Divider,
|
||||
Tabs,
|
||||
Tab
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Security,
|
||||
@ -25,18 +34,30 @@ import {
|
||||
Person,
|
||||
Email,
|
||||
CalendarToday,
|
||||
Visibility,
|
||||
VisibilityOff
|
||||
Add,
|
||||
Delete,
|
||||
Settings,
|
||||
Apps,
|
||||
Logout
|
||||
} from '@mui/icons-material'
|
||||
import axios from 'axios'
|
||||
|
||||
const OAuthAuthorize = () => {
|
||||
const { user } = useAuth()
|
||||
const { user, logout } = useAuth()
|
||||
const [searchParams] = useSearchParams()
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [clientInfo, setClientInfo] = useState(null)
|
||||
const [clients, setClients] = useState([])
|
||||
const [openCreateDialog, setOpenCreateDialog] = useState(false)
|
||||
const [newClient, setNewClient] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
redirect_uris: [''],
|
||||
scopes: ['read', 'write']
|
||||
})
|
||||
const [activeTab, setActiveTab] = useState(0)
|
||||
|
||||
const clientId = searchParams.get('client_id')
|
||||
const redirectUri = searchParams.get('redirect_uri')
|
||||
@ -45,53 +66,85 @@ const OAuthAuthorize = () => {
|
||||
const responseType = searchParams.get('response_type')
|
||||
|
||||
useEffect(() => {
|
||||
// 验证OAuth参数
|
||||
if (!clientId || !redirectUri || responseType !== 'code') {
|
||||
setError('无效的授权请求')
|
||||
|
||||
return
|
||||
// 如果有OAuth参数，显示授权页面
|
||||
if (clientId && redirectUri && responseType === 'code') {
|
||||
setActiveTab(1)
|
||||
fetchAuthInfo()
|
||||
} else {
|
||||
// 否则显示客户端管理页面
|
||||
setActiveTab(0)
|
||||
fetchClients()
|
||||
}
|
||||
}, [clientId, redirectUri, responseType])
|
||||
|
||||
// 获取授权信息
|
||||
const fetchAuthInfo = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const params = new URLSearchParams({
|
||||
response_type: 'code',
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
scope: scope || 'read write',
|
||||
state: state || ''
|
||||
})
|
||||
const fetchClients = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/oauth/clients')
|
||||
setClients(response.data.data.clients)
|
||||
} catch (error) {
|
||||
setError('获取客户端列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const response = await axios.get(`/api/oauth/authorize?${params}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
})
|
||||
const fetchAuthInfo = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const params = new URLSearchParams({
|
||||
response_type: 'code',
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
scope: scope || 'read write',
|
||||
state: state || ''
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
console.log(response.data.data.redirect_uri)
|
||||
setClientInfo({
|
||||
name: response.data.data.client.name,
|
||||
description: response.data.data.client.description,
|
||||
scopes: response.data.data.scopes,
|
||||
clientId: response.data.data.client.id,
|
||||
redirectUri: response.data.data.redirect_uri,
|
||||
state: response.data.data.state
|
||||
})
|
||||
} else {
|
||||
setError(response.data.message || '获取授权信息失败')
|
||||
const response = await axios.get(`/api/oauth/authorize?${params}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
setClientInfo({
|
||||
name: response.data.data.client.name,
|
||||
description: response.data.data.client.description,
|
||||
scopes: response.data.data.scopes,
|
||||
clientId: response.data.data.client.id,
|
||||
redirectUri: response.data.data.redirect_uri,
|
||||
state: response.data.data.state
|
||||
})
|
||||
} else {
|
||||
setError(response.data.message || '获取授权信息失败')
|
||||
}
|
||||
} catch (error) {
|
||||
setError(error.response?.data?.message || '获取授权信息失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateClient = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
await axios.post('/api/oauth/clients', newClient)
|
||||
setOpenCreateDialog(false)
|
||||
setNewClient({ name: '', description: '', redirect_uris: [''], scopes: ['read', 'write'] })
|
||||
fetchClients()
|
||||
} catch (error) {
|
||||
setError(error.response?.data?.message || '创建客户端失败')
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleDeleteClient = async (clientId) => {
|
||||
if (window.confirm('确定要删除这个客户端吗？')) {
|
||||
try {
|
||||
await axios.delete(`/api/oauth/clients/${clientId}`)
|
||||
fetchClients()
|
||||
} catch (error) {
|
||||
setError(error.response?.data?.message || '获取授权信息失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setError('删除客户端失败')
|
||||
}
|
||||
}
|
||||
|
||||
fetchAuthInfo()
|
||||
}, [clientId, redirectUri, scope, responseType, state])
|
||||
}
|
||||
|
||||
const handleAuthorize = async () => {
|
||||
setLoading(true)
|
||||
@ -143,8 +196,13 @@ const OAuthAuthorize = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
if (loading) {
|
||||
if (loading && activeTab === 1) {
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Box
|
||||
@ -162,129 +220,327 @@ const OAuthAuthorize = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
p: 4,
|
||||
width: '100%',
|
||||
maxWidth: 500
|
||||
}}
|
||||
>
|
||||
<Box textAlign="center" mb={3}>
|
||||
<Security sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
授权请求
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
第三方应用请求访问您的账户
|
||||
</Typography>
|
||||
</Box>
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
OAuth 管理
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
管理OAuth客户端和第三方应用授权
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }} onClose={() => setError('')}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{clientInfo && (
|
||||
<>
|
||||
{/* 应用信息 */}
|
||||
<Card variant="outlined" sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{clientInfo.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
{clientInfo.description}
|
||||
</Typography>
|
||||
<Box mt={2}>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
请求的权限：
|
||||
{/* 标签页 */}
|
||||
<Paper sx={{ mb: 3 }}>
|
||||
<Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)}>
|
||||
<Tab
|
||||
icon={<Apps />}
|
||||
label="客户端管理"
|
||||
iconPosition="start"
|
||||
/>
|
||||
<Tab
|
||||
icon={<Security />}
|
||||
label="授权管理"
|
||||
iconPosition="start"
|
||||
/>
|
||||
</Tabs>
|
||||
</Paper>
|
||||
|
||||
{/* 客户端管理标签页 */}
|
||||
{activeTab === 0 && (
|
||||
<Grid container spacing={3}>
|
||||
{/* 用户信息卡片 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
用户信息
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Person sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
用户名
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.username}
|
||||
</Typography>
|
||||
{clientInfo.scopes.map((scope) => (
|
||||
<Chip
|
||||
key={scope}
|
||||
label={scope === 'read' ? '读取信息' : scope === 'write' ? '写入信息' : scope}
|
||||
size="small"
|
||||
sx={{ mr: 0.5, mb: 0.5 }}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Email sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
邮箱
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.email}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<CalendarToday sx={{ mr: 2, color: 'primary.main' }} />
|
||||
<Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
注册时间
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{user?.created_at ? new Date(user.created_at).toLocaleDateString('zh-CN') : '未知'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* 用户信息 */}
|
||||
<Card variant="outlined" sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
您的账户信息
|
||||
{/* OAuth客户端管理 */}
|
||||
<Grid item xs={12} md={8}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
|
||||
<Typography variant="h6">
|
||||
OAuth客户端
|
||||
</Typography>
|
||||
<List dense>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Person />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="用户名" secondary={user.username} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Email />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="邮箱" secondary={user.email} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<CalendarToday />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="注册时间"
|
||||
secondary={new Date(user.created_at).toLocaleDateString()}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color="error"
|
||||
startIcon={<Cancel />}
|
||||
onClick={handleDeny}
|
||||
disabled={loading}
|
||||
>
|
||||
拒绝
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
startIcon={<CheckCircle />}
|
||||
onClick={handleAuthorize}
|
||||
disabled={loading}
|
||||
startIcon={<Add />}
|
||||
onClick={() => setOpenCreateDialog(true)}
|
||||
>
|
||||
{loading ? '授权中...' : '授权'}
|
||||
创建客户端
|
||||
</Button>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{clients.length === 0 ? (
|
||||
<Box textAlign="center" py={4}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
还没有OAuth客户端，点击上方按钮创建一个
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
{clients.map((client) => (
|
||||
<Grid item xs={12} key={client.client_id}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="flex-start">
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{client.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
{client.description}
|
||||
</Typography>
|
||||
<Box mt={1}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
客户端ID: {client.client_id}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box mt={1}>
|
||||
{client.scopes.map((scope) => (
|
||||
<Chip
|
||||
key={scope}
|
||||
label={scope}
|
||||
size="small"
|
||||
sx={{ mr: 0.5, mb: 0.5 }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
color="error"
|
||||
size="small"
|
||||
onClick={() => handleDeleteClient(client.client_id)}
|
||||
>
|
||||
<Delete />
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* 授权管理标签页 */}
|
||||
{activeTab === 1 && clientInfo && (
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4 }}>
|
||||
<Box textAlign="center" mb={3}>
|
||||
<Security sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
授权请求
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
第三方应用请求访问您的账户
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* 应用信息 */}
|
||||
<Card variant="outlined" sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{clientInfo.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
{clientInfo.description}
|
||||
</Typography>
|
||||
<Box mt={2}>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
请求的权限：
|
||||
</Typography>
|
||||
{clientInfo.scopes.map((scope) => (
|
||||
<Chip
|
||||
key={scope}
|
||||
label={scope === 'read' ? '读取信息' : scope === 'write' ? '写入信息' : scope}
|
||||
size="small"
|
||||
sx={{ mr: 0.5, mb: 0.5 }}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 用户信息 */}
|
||||
<Card variant="outlined" sx={{ mb: 3 }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
您的账户信息
|
||||
</Typography>
|
||||
<List dense>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Person />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="用户名" secondary={user.username} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Email />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="邮箱" secondary={user.email} />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<CalendarToday />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="注册时间"
|
||||
secondary={new Date(user.created_at).toLocaleDateString()}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color="error"
|
||||
startIcon={<Cancel />}
|
||||
onClick={handleDeny}
|
||||
disabled={loading}
|
||||
>
|
||||
拒绝
|
||||
</Button>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
<Grid item xs={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
startIcon={<CheckCircle />}
|
||||
onClick={handleAuthorize}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '授权中...' : '授权'}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Container>
|
||||
)}
|
||||
|
||||
{/* 创建客户端对话框 */}
|
||||
<Dialog open={openCreateDialog} onClose={() => setOpenCreateDialog(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>创建OAuth客户端</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="客户端名称"
|
||||
value={newClient.name}
|
||||
onChange={(e) => setNewClient({ ...newClient, name: e.target.value })}
|
||||
margin="normal"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="描述"
|
||||
value={newClient.description}
|
||||
onChange={(e) => setNewClient({ ...newClient, description: e.target.value })}
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={2}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="重定向URI"
|
||||
value={newClient.redirect_uris[0]}
|
||||
onChange={(e) => setNewClient({
|
||||
...newClient,
|
||||
redirect_uris: [e.target.value]
|
||||
})}
|
||||
margin="normal"
|
||||
required
|
||||
placeholder="http://localhost:3001/callback"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenCreateDialog(false)}>取消</Button>
|
||||
<Button
|
||||
onClick={handleCreateClient}
|
||||
variant="contained"
|
||||
disabled={loading || !newClient.name}
|
||||
>
|
||||
{loading ? '创建中...' : '创建'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* 底部操作按钮 */}
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/dashboard')}
|
||||
>
|
||||
返回个人中心
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={handleLogout}
|
||||
startIcon={<Logout />}
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user