Jesse_Chen
273 lines
10 KiB
TypeScript
273 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Alert,
|
||
Button,
|
||
Card,
|
||
Descriptions,
|
||
Divider,
|
||
Form,
|
||
Input,
|
||
List,
|
||
Radio,
|
||
Space,
|
||
Spin,
|
||
Typography,
|
||
} from "antd";
|
||
import { useEffect, useState } from "react";
|
||
|
||
const { Paragraph, Text, Title } = Typography;
|
||
|
||
type MfaStatus = {
|
||
required: boolean;
|
||
enrolled: boolean;
|
||
verified: boolean;
|
||
expiresIn?: number;
|
||
};
|
||
|
||
type Enrollment = {
|
||
totpUri: string;
|
||
backupCodes: string[];
|
||
verificationRequired: true;
|
||
};
|
||
|
||
type Factor = "totp" | "backup";
|
||
|
||
async function mfaRequest<T>(body?: object): Promise<T> {
|
||
const response = await fetch("/api/admin/mfa", {
|
||
method: body ? "POST" : "GET",
|
||
cache: "no-store",
|
||
credentials: "same-origin",
|
||
headers: body ? { "content-type": "application/json" } : undefined,
|
||
body: body ? JSON.stringify(body) : undefined,
|
||
});
|
||
const payload = await response.json().catch(() => null) as { data?: T; error?: unknown } | null;
|
||
if (!response.ok || !payload?.data) {
|
||
throw new Error(typeof payload?.error === "string" ? payload.error : "MFA 请求失败，请稍后再试");
|
||
}
|
||
return payload.data;
|
||
}
|
||
|
||
export default function MfaSecurity() {
|
||
const [status, setStatus] = useState<MfaStatus>();
|
||
const [enrollment, setEnrollment] = useState<Enrollment>();
|
||
const [backupCodes, setBackupCodes] = useState<string[]>();
|
||
const [factor, setFactor] = useState<Factor>("totp");
|
||
const [loading, setLoading] = useState(true);
|
||
const [action, setAction] = useState<string>();
|
||
const [error, setError] = useState<string>();
|
||
const [notice, setNotice] = useState<string>();
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
void mfaRequest<MfaStatus>()
|
||
.then((value) => {
|
||
if (!cancelled) setStatus(value);
|
||
})
|
||
.catch((cause: unknown) => {
|
||
if (!cancelled) {
|
||
setError(cause instanceof Error ? cause.message : "无法读取 MFA 状态");
|
||
}
|
||
})
|
||
.finally(() => {
|
||
if (!cancelled) setLoading(false);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
async function run<T>(name: string, operation: () => Promise<T>): Promise<T | undefined> {
|
||
setAction(name);
|
||
setError(undefined);
|
||
setNotice(undefined);
|
||
try {
|
||
return await operation();
|
||
} catch (cause) {
|
||
setError(cause instanceof Error ? cause.message : "操作失败，请稍后再试");
|
||
} finally {
|
||
setAction(undefined);
|
||
}
|
||
}
|
||
|
||
async function enroll({ password }: { password: string }) {
|
||
const data = await run("enroll", () => mfaRequest<Enrollment>({ action: "enroll", password }));
|
||
if (!data) return;
|
||
setEnrollment(data);
|
||
setBackupCodes(data.backupCodes);
|
||
setNotice("请先保存恢复码，再使用认证器生成的 6 位验证码完成 MFA 绑定。未验证前 MFA 不会启用。");
|
||
}
|
||
|
||
async function verify({ code }: { code: string }) {
|
||
const data = await run("verify", () => mfaRequest<MfaStatus>({ action: "verify", code }));
|
||
if (!data) return;
|
||
setStatus(data);
|
||
setEnrollment(undefined);
|
||
setNotice("当前管理员会话已完成 MFA 验证。");
|
||
}
|
||
|
||
async function recover({ code }: { code: string }) {
|
||
const data = await run("recover", () => mfaRequest<MfaStatus>({ action: "recover", code }));
|
||
if (!data) return;
|
||
setStatus(data);
|
||
setNotice("恢复码已消费，当前会话已完成 MFA 验证。请在恢复访问后重新生成恢复码。");
|
||
}
|
||
|
||
async function regenerate({ password }: { password: string }) {
|
||
const data = await run("regenerate", () => mfaRequest<{ backupCodes: string[] }>({
|
||
action: "regenerate",
|
||
password,
|
||
}));
|
||
if (!data) return;
|
||
setBackupCodes(data.backupCodes);
|
||
setNotice("新的恢复码已生成，旧恢复码已全部失效。请立即离线保存。");
|
||
}
|
||
|
||
async function disable({ password }: { password: string }) {
|
||
const data = await run("disable", () => mfaRequest<MfaStatus>({ action: "disable", password }));
|
||
if (!data) return;
|
||
setStatus(data);
|
||
setEnrollment(undefined);
|
||
setBackupCodes(undefined);
|
||
setNotice(data.required
|
||
? "MFA 已禁用。当前角色要求启用 MFA，可随时重新绑定。"
|
||
: "MFA 已禁用，当前会话的 MFA 证明已撤销。");
|
||
}
|
||
|
||
if (loading && !status) {
|
||
return <Card><Space><Spin /><Text>正在读取 MFA 状态</Text></Space></Card>;
|
||
}
|
||
|
||
return <Space direction="vertical" size="large" style={{ width: "100%" }}>
|
||
<div>
|
||
<Title level={2}>安全验证</Title>
|
||
<Paragraph type="secondary">
|
||
管理员 MFA 使用 Better Auth 的真实 TOTP 与一次性恢复码。MFA 证明只绑定当前服务端会话，短时有效且可随会话撤销。
|
||
</Paragraph>
|
||
</div>
|
||
|
||
{error ? <Alert type="error" showIcon message={error} /> : null}
|
||
{notice ? <Alert type="success" showIcon message={notice} /> : null}
|
||
{status?.required && !status.enrolled ? <Alert
|
||
type="warning"
|
||
showIcon
|
||
message="当前角色强制要求 MFA"
|
||
description="这是账户级安全要求，不会再触发具体管理操作的邮箱验证码复核。"
|
||
/> : null}
|
||
|
||
<Card title="当前状态">
|
||
<Descriptions column={{ xs: 1, sm: 2 }}>
|
||
<Descriptions.Item label="角色要求">
|
||
<Text type={status?.required ? "danger" : "secondary"}>{status?.required ? "必须 MFA" : "可选 MFA"}</Text>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="MFA 绑定">
|
||
<Text type={status?.enrolled ? undefined : "warning"}>{status?.enrolled ? "已启用" : "未启用"}</Text>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="当前会话">
|
||
<Text type={status?.verified ? undefined : "secondary"}>{status?.verified ? "已验证" : "未验证"}</Text>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
</Card>
|
||
|
||
{!status?.enrolled && !enrollment ? <Card title="启用 TOTP MFA">
|
||
<Paragraph>输入当前账户密码后生成认证器 URI 与一次性恢复码。服务器只保存加密后的 seed 与恢复码。</Paragraph>
|
||
<Form layout="vertical" onFinish={enroll} style={{ maxWidth: 520 }}>
|
||
<Form.Item name="password" label="当前密码" rules={[{ required: true, message: "请输入当前密码" }]}>
|
||
<Input.Password autoComplete="current-password" maxLength={128} />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={action === "enroll"}>开始绑定</Button>
|
||
</Form>
|
||
</Card> : null}
|
||
|
||
{enrollment ? <Card title="完成 MFA 绑定">
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
message="先保存恢复码，再验证 TOTP"
|
||
description="刷新页面不会再次显示这些明文恢复码。不要把 URI、seed 或恢复码粘贴到日志、工单或聊天中。"
|
||
/>
|
||
<Divider orientation="left">认证器 URI</Divider>
|
||
<Paragraph copyable={{ text: enrollment.totpUri }} code style={{ overflowWrap: "anywhere" }}>
|
||
{enrollment.totpUri}
|
||
</Paragraph>
|
||
<Divider orientation="left">一次性恢复码</Divider>
|
||
<BackupCodeList codes={backupCodes ?? enrollment.backupCodes} />
|
||
<Divider />
|
||
<Form layout="vertical" onFinish={verify} style={{ maxWidth: 520 }}>
|
||
<Form.Item name="code" label="认证器验证码" rules={[{ required: true }, { pattern: /^\d{6}$/, message: "请输入 6 位验证码" }]}>
|
||
<Input inputMode="numeric" autoComplete="one-time-code" maxLength={6} />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={action === "verify"}>验证并启用 MFA</Button>
|
||
</Form>
|
||
</Card> : null}
|
||
|
||
{status?.enrolled && !status.verified ? <Card title="验证当前会话">
|
||
<Paragraph>可使用认证器验证码或一次性恢复码验证当前管理员会话。</Paragraph>
|
||
<Radio.Group value={factor} onChange={(event) => setFactor(event.target.value as Factor)}>
|
||
<Radio.Button value="totp">认证器验证码</Radio.Button>
|
||
<Radio.Button value="backup">恢复码</Radio.Button>
|
||
</Radio.Group>
|
||
<Form
|
||
key={factor}
|
||
layout="vertical"
|
||
onFinish={factor === "totp" ? verify : recover}
|
||
style={{ maxWidth: 520, marginTop: 16 }}
|
||
>
|
||
<Form.Item
|
||
name="code"
|
||
label={factor === "totp" ? "6 位验证码" : "一次性恢复码"}
|
||
rules={factor === "totp"
|
||
? [{ required: true }, { pattern: /^\d{6}$/, message: "请输入 6 位验证码" }]
|
||
: [{ required: true, whitespace: true }]}
|
||
>
|
||
<Input
|
||
inputMode={factor === "totp" ? "numeric" : "text"}
|
||
autoComplete="one-time-code"
|
||
maxLength={factor === "totp" ? 6 : 128}
|
||
/>
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" loading={action === "verify" || action === "recover"}>
|
||
验证当前会话
|
||
</Button>
|
||
</Form>
|
||
</Card> : null}
|
||
|
||
{status?.enrolled && status.verified ? <Card title="恢复与禁用">
|
||
<Space direction="vertical" size="large" style={{ width: "100%" }}>
|
||
<div>
|
||
<Title level={4}>重新生成恢复码</Title>
|
||
<Paragraph type="secondary">生成后旧恢复码立即失效，明文只在本次响应显示。</Paragraph>
|
||
<Form layout="inline" onFinish={regenerate}>
|
||
<Form.Item name="password" rules={[{ required: true, message: "请输入当前密码" }]}>
|
||
<Input.Password placeholder="当前密码" autoComplete="current-password" maxLength={128} />
|
||
</Form.Item>
|
||
<Button htmlType="submit" loading={action === "regenerate"}>重新生成</Button>
|
||
</Form>
|
||
</div>
|
||
{backupCodes?.length ? <BackupCodeList codes={backupCodes} /> : null}
|
||
<Divider />
|
||
<div>
|
||
<Title level={4}>禁用 MFA</Title>
|
||
<Paragraph type="secondary">禁用会轮换 Better Auth 会话，并撤销当前会话的 MFA 证明。</Paragraph>
|
||
<Form layout="inline" onFinish={disable}>
|
||
<Form.Item name="password" rules={[{ required: true, message: "请输入当前密码" }]}>
|
||
<Input.Password placeholder="当前密码" autoComplete="current-password" maxLength={128} />
|
||
</Form.Item>
|
||
<Button danger htmlType="submit" loading={action === "disable"}>禁用 MFA</Button>
|
||
</Form>
|
||
</div>
|
||
</Space>
|
||
</Card> : null}
|
||
</Space>;
|
||
}
|
||
|
||
function BackupCodeList({ codes }: { codes: string[] }) {
|
||
return <List
|
||
bordered
|
||
size="small"
|
||
dataSource={codes}
|
||
grid={{ gutter: 8, xs: 1, sm: 2, md: 3 }}
|
||
renderItem={(code) => <List.Item><Text code>{code}</Text></List.Item>}
|
||
/>;
|
||
}
|