将站点配置中的注册相关配置移动到新的注册配置大项中
This commit is contained in:
mtvpls
+673
-534
@@ -35,6 +35,7 @@ import {
|
||||
Palette,
|
||||
Settings,
|
||||
Tv,
|
||||
UserPlus,
|
||||
Users,
|
||||
Video,
|
||||
} from 'lucide-react';
|
||||
@@ -4579,7 +4580,6 @@ const SiteConfigComponent = ({
|
||||
const { alertModal, showAlert, hideAlert } = useAlertModal();
|
||||
const { isLoading, withLoading } = useLoadingState();
|
||||
const [showEnableCommentsModal, setShowEnableCommentsModal] = useState(false);
|
||||
const [showEnableRegistrationModal, setShowEnableRegistrationModal] = useState(false);
|
||||
const [siteSettings, setSiteSettings] = useState<SiteConfig>({
|
||||
SiteName: '',
|
||||
Announcement: '',
|
||||
@@ -4678,21 +4678,6 @@ const SiteConfigComponent = ({
|
||||
DanmakuApiToken: config.SiteConfig.DanmakuApiToken || '87654321',
|
||||
TMDBApiKey: config.SiteConfig.TMDBApiKey || '',
|
||||
EnableComments: config.SiteConfig.EnableComments || false,
|
||||
EnableRegistration: config.SiteConfig.EnableRegistration || false,
|
||||
RegistrationRequireTurnstile: config.SiteConfig.RegistrationRequireTurnstile || false,
|
||||
LoginRequireTurnstile: config.SiteConfig.LoginRequireTurnstile || false,
|
||||
TurnstileSiteKey: config.SiteConfig.TurnstileSiteKey || '',
|
||||
TurnstileSecretKey: config.SiteConfig.TurnstileSecretKey || '',
|
||||
DefaultUserTags: config.SiteConfig.DefaultUserTags || [],
|
||||
EnableOIDCLogin: config.SiteConfig.EnableOIDCLogin || false,
|
||||
EnableOIDCRegistration: config.SiteConfig.EnableOIDCRegistration || false,
|
||||
OIDCIssuer: config.SiteConfig.OIDCIssuer || '',
|
||||
OIDCAuthorizationEndpoint: config.SiteConfig.OIDCAuthorizationEndpoint || '',
|
||||
OIDCTokenEndpoint: config.SiteConfig.OIDCTokenEndpoint || '',
|
||||
OIDCUserInfoEndpoint: config.SiteConfig.OIDCUserInfoEndpoint || '',
|
||||
OIDCClientId: config.SiteConfig.OIDCClientId || '',
|
||||
OIDCClientSecret: config.SiteConfig.OIDCClientSecret || '',
|
||||
OIDCButtonText: config.SiteConfig.OIDCButtonText || '',
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
@@ -4771,29 +4756,6 @@ const SiteConfigComponent = ({
|
||||
setShowEnableCommentsModal(false);
|
||||
};
|
||||
|
||||
// 处理注册开关变化
|
||||
const handleRegistrationToggle = (checked: boolean) => {
|
||||
if (checked) {
|
||||
// 如果要开启注册，弹出确认框
|
||||
setShowEnableRegistrationModal(true);
|
||||
} else {
|
||||
// 直接关闭注册
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
EnableRegistration: false,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 确认开启注册
|
||||
const handleConfirmEnableRegistration = () => {
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
EnableRegistration: true,
|
||||
}));
|
||||
setShowEnableRegistrationModal(false);
|
||||
};
|
||||
|
||||
// 保存站点配置
|
||||
const handleSave = async () => {
|
||||
await withLoading('saveSiteConfig', async () => {
|
||||
@@ -5313,500 +5275,6 @@ const SiteConfigComponent = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 注册相关配置 */}
|
||||
<div className='space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
|
||||
<h3 className='text-sm font-semibold text-gray-900 dark:text-gray-100'>
|
||||
注册配置
|
||||
</h3>
|
||||
|
||||
{/* 开启注册 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
开启注册
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => handleRegistrationToggle(!siteSettings.EnableRegistration)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
siteSettings.EnableRegistration
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
siteSettings.EnableRegistration
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录页面将显示注册按钮，允许用户自行注册账号。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 注册启用Cloudflare Turnstile */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
注册启用Cloudflare Turnstile
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
RegistrationRequireTurnstile: !prev.RegistrationRequireTurnstile,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
siteSettings.RegistrationRequireTurnstile
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
siteSettings.RegistrationRequireTurnstile
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后注册时需要通过Cloudflare Turnstile人机验证。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 登录启用Cloudflare Turnstile */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
登录启用Cloudflare Turnstile
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
LoginRequireTurnstile: !prev.LoginRequireTurnstile,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
siteSettings.LoginRequireTurnstile
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
siteSettings.LoginRequireTurnstile
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录时需要通过Cloudflare Turnstile人机验证。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cloudflare Turnstile Site Key */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Cloudflare Turnstile Site Key
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='请输入Cloudflare Turnstile Site Key'
|
||||
value={siteSettings.TurnstileSiteKey || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
TurnstileSiteKey: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在Cloudflare Dashboard中获取的Site Key（公钥）
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cloudflare Turnstile Secret Key */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Cloudflare Turnstile Secret Key
|
||||
</label>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='请输入Cloudflare Turnstile Secret Key'
|
||||
value={siteSettings.TurnstileSecretKey || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
TurnstileSecretKey: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在Cloudflare Dashboard中获取的Secret Key（私钥），用于服务端验证
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 默认用户组 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
默认用户组
|
||||
</label>
|
||||
<select
|
||||
value={siteSettings.DefaultUserTags && siteSettings.DefaultUserTags.length > 0 ? siteSettings.DefaultUserTags[0] : ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DefaultUserTags: value ? [value] : [],
|
||||
}));
|
||||
}}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
>
|
||||
<option value=''>无用户组（无限制）</option>
|
||||
{config?.UserConfig?.Tags && config.UserConfig.Tags.map((tag) => (
|
||||
<option key={tag.name} value={tag.name}>
|
||||
{tag.name}
|
||||
{tag.enabledApis && tag.enabledApis.length > 0
|
||||
? ` (${tag.enabledApis.length} 个源)`
|
||||
: ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
新注册的用户将自动分配到选中的用户组，选择"无用户组"为无限制
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OIDC配置 */}
|
||||
<div className='space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
|
||||
<h3 className='text-sm font-semibold text-gray-900 dark:text-gray-100'>
|
||||
OIDC配置
|
||||
</h3>
|
||||
|
||||
{/* 启用OIDC登录 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
启用OIDC登录
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
EnableOIDCLogin: !prev.EnableOIDCLogin,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
siteSettings.EnableOIDCLogin
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
siteSettings.EnableOIDCLogin
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录页面将显示OIDC登录按钮
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 启用OIDC注册 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
启用OIDC注册
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
EnableOIDCRegistration: !prev.EnableOIDCRegistration,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
siteSettings.EnableOIDCRegistration
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
siteSettings.EnableOIDCRegistration
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后允许通过OIDC方式注册新用户（需要先启用OIDC登录）
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Issuer */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Issuer URL（可选）
|
||||
</label>
|
||||
<div className='flex flex-col sm:flex-row gap-2'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm'
|
||||
value={siteSettings.OIDCIssuer || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCIssuer: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
onClick={async () => {
|
||||
if (!siteSettings.OIDCIssuer) {
|
||||
showError('请先输入Issuer URL', showAlert);
|
||||
return;
|
||||
}
|
||||
|
||||
await withLoading('oidcDiscover', async () => {
|
||||
try {
|
||||
const res = await fetch('/api/admin/oidc-discover', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ issuerUrl: siteSettings.OIDCIssuer }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || '获取配置失败');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCAuthorizationEndpoint: data.authorization_endpoint || '',
|
||||
OIDCTokenEndpoint: data.token_endpoint || '',
|
||||
OIDCUserInfoEndpoint: data.userinfo_endpoint || '',
|
||||
}));
|
||||
showSuccess('自动发现成功', showAlert);
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : '自动发现失败，请手动配置端点';
|
||||
showError(errorMessage, showAlert);
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
}}
|
||||
disabled={isLoading('oidcDiscover')}
|
||||
className={`px-4 py-2 ${isLoading('oidcDiscover') ? buttonStyles.disabled : buttonStyles.primary} rounded-lg whitespace-nowrap sm:w-auto w-full`}
|
||||
>
|
||||
{isLoading('oidcDiscover') ? '发现中...' : '自动发现'}
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
OIDC提供商的Issuer URL，填写后可点击"自动发现"按钮自动获取端点配置
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Authorization Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Authorization Endpoint（授权端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/auth'
|
||||
value={siteSettings.OIDCAuthorizationEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCAuthorizationEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
用户授权的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Token Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Token Endpoint（Token端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/token'
|
||||
value={siteSettings.OIDCTokenEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCTokenEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
交换授权码获取token的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* UserInfo Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
UserInfo Endpoint（用户信息端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/userinfo'
|
||||
value={siteSettings.OIDCUserInfoEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCUserInfoEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
获取用户信息的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Client ID */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Client ID
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='请输入Client ID'
|
||||
value={siteSettings.OIDCClientId || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCClientId: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在OIDC提供商处注册应用后获得的Client ID
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Client Secret */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Client Secret
|
||||
</label>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='请输入Client Secret'
|
||||
value={siteSettings.OIDCClientSecret || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCClientSecret: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在OIDC提供商处注册应用后获得的Client Secret
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Redirect URI - 只读显示 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Redirect URI（回调地址）
|
||||
</label>
|
||||
<div className='relative'>
|
||||
<input
|
||||
type='text'
|
||||
readOnly
|
||||
value={
|
||||
typeof window !== 'undefined'
|
||||
? `${(window as any).RUNTIME_CONFIG?.SITE_BASE || window.location.origin}/api/auth/oidc/callback`
|
||||
: ''
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300 cursor-default'
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => {
|
||||
const uri = `${(window as any).RUNTIME_CONFIG?.SITE_BASE || window.location.origin}/api/auth/oidc/callback`;
|
||||
navigator.clipboard.writeText(uri);
|
||||
showSuccess('已复制到剪贴板', showAlert);
|
||||
}}
|
||||
className='absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors'
|
||||
>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
这是系统自动生成的回调地址，基于环境变量SITE_BASE。请在OIDC提供商（如Keycloak、Auth0等）的应用配置中添加此地址作为允许的重定向URI
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC登录按钮文字 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC登录按钮文字
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='使用OIDC登录'
|
||||
value={siteSettings.OIDCButtonText || ''}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCButtonText: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
自定义OIDC登录按钮显示的文字，如"使用企业账号登录"、"使用SSO登录"等。留空则显示默认文字"使用OIDC登录"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
@@ -5903,6 +5371,661 @@ const SiteConfigComponent = ({
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 注册配置组件
|
||||
const RegistrationConfigComponent = ({
|
||||
config,
|
||||
refreshConfig,
|
||||
}: {
|
||||
config: AdminConfig | null;
|
||||
refreshConfig: () => Promise<void>;
|
||||
}) => {
|
||||
const { alertModal, showAlert, hideAlert } = useAlertModal();
|
||||
const { isLoading, withLoading } = useLoadingState();
|
||||
const [showEnableRegistrationModal, setShowEnableRegistrationModal] = useState(false);
|
||||
const [registrationSettings, setRegistrationSettings] = useState<{
|
||||
EnableRegistration: boolean;
|
||||
RegistrationRequireTurnstile: boolean;
|
||||
LoginRequireTurnstile: boolean;
|
||||
TurnstileSiteKey: string;
|
||||
TurnstileSecretKey: string;
|
||||
DefaultUserTags: string[];
|
||||
EnableOIDCLogin: boolean;
|
||||
EnableOIDCRegistration: boolean;
|
||||
OIDCIssuer: string;
|
||||
OIDCAuthorizationEndpoint: string;
|
||||
OIDCTokenEndpoint: string;
|
||||
OIDCUserInfoEndpoint: string;
|
||||
OIDCClientId: string;
|
||||
OIDCClientSecret: string;
|
||||
OIDCButtonText: string;
|
||||
}>({
|
||||
EnableRegistration: false,
|
||||
RegistrationRequireTurnstile: false,
|
||||
LoginRequireTurnstile: false,
|
||||
TurnstileSiteKey: '',
|
||||
TurnstileSecretKey: '',
|
||||
DefaultUserTags: [],
|
||||
EnableOIDCLogin: false,
|
||||
EnableOIDCRegistration: false,
|
||||
OIDCIssuer: '',
|
||||
OIDCAuthorizationEndpoint: '',
|
||||
OIDCTokenEndpoint: '',
|
||||
OIDCUserInfoEndpoint: '',
|
||||
OIDCClientId: '',
|
||||
OIDCClientSecret: '',
|
||||
OIDCButtonText: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.SiteConfig) {
|
||||
setRegistrationSettings({
|
||||
EnableRegistration: config.SiteConfig.EnableRegistration || false,
|
||||
RegistrationRequireTurnstile: config.SiteConfig.RegistrationRequireTurnstile || false,
|
||||
LoginRequireTurnstile: config.SiteConfig.LoginRequireTurnstile || false,
|
||||
TurnstileSiteKey: config.SiteConfig.TurnstileSiteKey || '',
|
||||
TurnstileSecretKey: config.SiteConfig.TurnstileSecretKey || '',
|
||||
DefaultUserTags: config.SiteConfig.DefaultUserTags || [],
|
||||
EnableOIDCLogin: config.SiteConfig.EnableOIDCLogin || false,
|
||||
EnableOIDCRegistration: config.SiteConfig.EnableOIDCRegistration || false,
|
||||
OIDCIssuer: config.SiteConfig.OIDCIssuer || '',
|
||||
OIDCAuthorizationEndpoint: config.SiteConfig.OIDCAuthorizationEndpoint || '',
|
||||
OIDCTokenEndpoint: config.SiteConfig.OIDCTokenEndpoint || '',
|
||||
OIDCUserInfoEndpoint: config.SiteConfig.OIDCUserInfoEndpoint || '',
|
||||
OIDCClientId: config.SiteConfig.OIDCClientId || '',
|
||||
OIDCClientSecret: config.SiteConfig.OIDCClientSecret || '',
|
||||
OIDCButtonText: config.SiteConfig.OIDCButtonText || '',
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
// 处理注册开关变化
|
||||
const handleRegistrationToggle = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setShowEnableRegistrationModal(true);
|
||||
} else {
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
EnableRegistration: false,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 确认开启注册
|
||||
const handleConfirmEnableRegistration = () => {
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
EnableRegistration: true,
|
||||
}));
|
||||
setShowEnableRegistrationModal(false);
|
||||
};
|
||||
|
||||
// 保存注册配置
|
||||
const handleSave = async () => {
|
||||
await withLoading('saveRegistrationConfig', async () => {
|
||||
try {
|
||||
if (!config) {
|
||||
throw new Error('配置未加载');
|
||||
}
|
||||
|
||||
// 合并站点配置和注册配置
|
||||
const updatedSiteConfig = {
|
||||
...config.SiteConfig,
|
||||
...registrationSettings,
|
||||
};
|
||||
|
||||
const resp = await fetch('/api/admin/site', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updatedSiteConfig),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
throw new Error(data.error || `保存失败: ${resp.status}`);
|
||||
}
|
||||
|
||||
showSuccess('保存成功, 请刷新页面', showAlert);
|
||||
await refreshConfig();
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '保存失败', showAlert);
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className='text-center text-gray-500 dark:text-gray-400'>
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
{/* 注册相关配置 */}
|
||||
<div className='space-y-4'>
|
||||
<h3 className='text-sm font-semibold text-gray-900 dark:text-gray-100'>
|
||||
注册配置
|
||||
</h3>
|
||||
|
||||
{/* 开启注册 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
开启注册
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => handleRegistrationToggle(!registrationSettings.EnableRegistration)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
registrationSettings.EnableRegistration
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
registrationSettings.EnableRegistration
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录页面将显示注册按钮，允许用户自行注册账号。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 注册启用Cloudflare Turnstile */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
注册启用Cloudflare Turnstile
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
RegistrationRequireTurnstile: !prev.RegistrationRequireTurnstile,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
registrationSettings.RegistrationRequireTurnstile
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
registrationSettings.RegistrationRequireTurnstile
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后注册时需要通过Cloudflare Turnstile人机验证。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 登录启用Cloudflare Turnstile */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
登录启用Cloudflare Turnstile
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
LoginRequireTurnstile: !prev.LoginRequireTurnstile,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
registrationSettings.LoginRequireTurnstile
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
registrationSettings.LoginRequireTurnstile
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录时需要通过Cloudflare Turnstile人机验证。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cloudflare Turnstile Site Key */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Cloudflare Turnstile Site Key
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='请输入Cloudflare Turnstile Site Key'
|
||||
value={registrationSettings.TurnstileSiteKey || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
TurnstileSiteKey: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在Cloudflare Dashboard中获取的Site Key（公钥）
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cloudflare Turnstile Secret Key */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Cloudflare Turnstile Secret Key
|
||||
</label>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='请输入Cloudflare Turnstile Secret Key'
|
||||
value={registrationSettings.TurnstileSecretKey || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
TurnstileSecretKey: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在Cloudflare Dashboard中获取的Secret Key（私钥），用于服务端验证
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 默认用户组 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
默认用户组
|
||||
</label>
|
||||
<select
|
||||
value={registrationSettings.DefaultUserTags && registrationSettings.DefaultUserTags.length > 0 ? registrationSettings.DefaultUserTags[0] : ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
DefaultUserTags: value ? [value] : [],
|
||||
}));
|
||||
}}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
>
|
||||
<option value=''>无用户组（无限制）</option>
|
||||
{config?.UserConfig?.Tags && config.UserConfig.Tags.map((tag) => (
|
||||
<option key={tag.name} value={tag.name}>
|
||||
{tag.name}
|
||||
{tag.enabledApis && tag.enabledApis.length > 0
|
||||
? ` (${tag.enabledApis.length} 个源)`
|
||||
: ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
新注册的用户将自动分配到选中的用户组，选择"无用户组"为无限制
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OIDC配置 */}
|
||||
<div className='space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
|
||||
<h3 className='text-sm font-semibold text-gray-900 dark:text-gray-100'>
|
||||
OIDC配置
|
||||
</h3>
|
||||
|
||||
{/* 启用OIDC登录 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
启用OIDC登录
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
EnableOIDCLogin: !prev.EnableOIDCLogin,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
registrationSettings.EnableOIDCLogin
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
registrationSettings.EnableOIDCLogin
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后登录页面将显示OIDC登录按钮
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 启用OIDC注册 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
启用OIDC注册
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
EnableOIDCRegistration: !prev.EnableOIDCRegistration,
|
||||
}))
|
||||
}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
|
||||
registrationSettings.EnableOIDCRegistration
|
||||
? buttonStyles.toggleOn
|
||||
: buttonStyles.toggleOff
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full ${
|
||||
buttonStyles.toggleThumb
|
||||
} transition-transform ${
|
||||
registrationSettings.EnableOIDCRegistration
|
||||
? buttonStyles.toggleThumbOn
|
||||
: buttonStyles.toggleThumbOff
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
开启后允许通过OIDC方式注册新用户（需要先启用OIDC登录）
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Issuer */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Issuer URL（可选）
|
||||
</label>
|
||||
<div className='flex flex-col sm:flex-row gap-2'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm'
|
||||
value={registrationSettings.OIDCIssuer || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCIssuer: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
onClick={async () => {
|
||||
if (!registrationSettings.OIDCIssuer) {
|
||||
showError('请先输入Issuer URL', showAlert);
|
||||
return;
|
||||
}
|
||||
|
||||
await withLoading('oidcDiscover', async () => {
|
||||
try {
|
||||
const res = await fetch('/api/admin/oidc-discover', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ issuerUrl: registrationSettings.OIDCIssuer }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || '获取配置失败');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCAuthorizationEndpoint: data.authorization_endpoint || '',
|
||||
OIDCTokenEndpoint: data.token_endpoint || '',
|
||||
OIDCUserInfoEndpoint: data.userinfo_endpoint || '',
|
||||
}));
|
||||
showSuccess('自动发现成功', showAlert);
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : '自动发现失败，请手动配置端点';
|
||||
showError(errorMessage, showAlert);
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
}}
|
||||
disabled={isLoading('oidcDiscover')}
|
||||
className={`px-4 py-2 ${isLoading('oidcDiscover') ? buttonStyles.disabled : buttonStyles.primary} rounded-lg whitespace-nowrap sm:w-auto w-full`}
|
||||
>
|
||||
{isLoading('oidcDiscover') ? '发现中...' : '自动发现'}
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
OIDC提供商的Issuer URL，填写后可点击"自动发现"按钮自动获取端点配置
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Authorization Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Authorization Endpoint（授权端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/auth'
|
||||
value={registrationSettings.OIDCAuthorizationEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCAuthorizationEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
用户授权的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Token Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
Token Endpoint（Token端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/token'
|
||||
value={registrationSettings.OIDCTokenEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCTokenEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
交换授权码获取token的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* UserInfo Endpoint */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
UserInfo Endpoint（用户信息端点）
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='https://your-oidc-provider.com/realms/your-realm/protocol/openid-connect/userinfo'
|
||||
value={registrationSettings.OIDCUserInfoEndpoint || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCUserInfoEndpoint: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
获取用户信息的端点URL
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Client ID */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Client ID
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='请输入Client ID'
|
||||
value={registrationSettings.OIDCClientId || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCClientId: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在OIDC提供商处注册应用后获得的Client ID
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Client Secret */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Client Secret
|
||||
</label>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='请输入Client Secret'
|
||||
value={registrationSettings.OIDCClientSecret || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCClientSecret: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
在OIDC提供商处注册应用后获得的Client Secret
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC Redirect URI - 只读显示 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC Redirect URI（回调地址）
|
||||
</label>
|
||||
<div className='relative'>
|
||||
<input
|
||||
type='text'
|
||||
readOnly
|
||||
value={
|
||||
typeof window !== 'undefined'
|
||||
? `${(window as any).RUNTIME_CONFIG?.SITE_BASE || window.location.origin}/api/auth/oidc/callback`
|
||||
: ''
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300 cursor-default'
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => {
|
||||
const uri = `${(window as any).RUNTIME_CONFIG?.SITE_BASE || window.location.origin}/api/auth/oidc/callback`;
|
||||
navigator.clipboard.writeText(uri);
|
||||
showSuccess('已复制到剪贴板', showAlert);
|
||||
}}
|
||||
className='absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors'
|
||||
>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
这是系统自动生成的回调地址，基于环境变量SITE_BASE。请在OIDC提供商（如Keycloak、Auth0等）的应用配置中添加此地址作为允许的重定向URI
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OIDC登录按钮文字 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
OIDC登录按钮文字
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='使用OIDC登录'
|
||||
value={registrationSettings.OIDCButtonText || ''}
|
||||
onChange={(e) =>
|
||||
setRegistrationSettings((prev) => ({
|
||||
...prev,
|
||||
OIDCButtonText: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
自定义OIDC登录按钮显示的文字，如"使用企业账号登录"、"使用SSO登录"等。留空则显示默认文字"使用OIDC登录"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isLoading('saveRegistrationConfig')}
|
||||
className={`px-4 py-2 ${
|
||||
isLoading('saveRegistrationConfig')
|
||||
? buttonStyles.disabled
|
||||
: buttonStyles.success
|
||||
} rounded-lg transition-colors`}
|
||||
>
|
||||
{isLoading('saveRegistrationConfig') ? '保存中…' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 通用弹窗组件 */}
|
||||
<AlertModal
|
||||
isOpen={alertModal.isOpen}
|
||||
onClose={hideAlert}
|
||||
type={alertModal.type}
|
||||
title={alertModal.title}
|
||||
message={alertModal.message}
|
||||
timer={alertModal.timer}
|
||||
showConfirm={alertModal.showConfirm}
|
||||
/>
|
||||
|
||||
{/* 开启注册确认弹窗 */}
|
||||
{showEnableRegistrationModal &&
|
||||
@@ -5949,7 +6072,7 @@ const SiteConfigComponent = ({
|
||||
</span>
|
||||
</div>
|
||||
<p className='text-sm text-yellow-700 dark:text-yellow-400'>
|
||||
为了您的安全和避免潜在的法律风险，如果您的网站部署在公网不建议开启。
|
||||
为了您的安全和避免潜在的法律风险,如果您的网站部署在公网不建议开启。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -6856,6 +6979,7 @@ function AdminPageClient() {
|
||||
videoSource: false,
|
||||
liveSource: false,
|
||||
siteConfig: false,
|
||||
registrationConfig: false,
|
||||
categoryConfig: false,
|
||||
configFile: false,
|
||||
dataMigration: false,
|
||||
@@ -7008,6 +7132,21 @@ function AdminPageClient() {
|
||||
<SiteConfigComponent config={config} refreshConfig={fetchConfig} />
|
||||
</CollapsibleTab>
|
||||
|
||||
{/* 注册配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='注册配置'
|
||||
icon={
|
||||
<UserPlus
|
||||
size={20}
|
||||
className='text-gray-600 dark:text-gray-400'
|
||||
/>
|
||||
}
|
||||
isExpanded={expandedTabs.registrationConfig}
|
||||
onToggle={() => toggleTab('registrationConfig')}
|
||||
>
|
||||
<RegistrationConfigComponent config={config} refreshConfig={fetchConfig} />
|
||||
</CollapsibleTab>
|
||||
|
||||
{/* 主题配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='主题配置'
|
||||
|
||||
Reference in New Issue
Block a user