Add TOTP-gated provider API key reveal

Allow super administrators to inspect effective provider credentials only after audited, rate-limited step-up verification.

admin-web/src/api/client.ts

@@ -24,6 +24,8 @@ import type {
   CreateOfficialSkillRequest,
   OfficialSkill,
   OfficialSkillCatalog,
+  RevealProviderApiKeyRequest,
+  RevealProviderApiKeyResponse,
   ReferralsQuery,
   ReferralOverview,
   SessionResponse,
@@ -94,6 +96,7 @@ function safeMessage(status: number, code?: string): string {
     HINT_FEED_SETTINGS_INVALID: "Hint 自动生成配置不符合要求",
     HINT_FEED_GENERATION_FAILED: "Hint 提示包生成失败，旧版本仍保持可用",
     PROVIDER_API_KEY_INVALID: "API Key 不符合要求",
+    PROVIDER_API_KEY_NOT_CONFIGURED: "该 Provider 尚未配置可读取的 API Key",
     PROVIDER_NOT_FOUND: "不支持该 Provider",
     RATE_LIMITED: "操作过于频繁，请稍后再试",
   };
@@ -293,6 +296,18 @@ export const adminApi = {
 
   providers: () => request<ManagedProviderOverview>("/providers"),
 
+  revealProviderApiKey: (
+    providerId: ManagedProviderId,
+    payload: RevealProviderApiKeyRequest,
+  ) =>
+    request<RevealProviderApiKeyResponse>(
+      `/providers/${encodeURIComponent(providerId)}/api-key/reveal`,
+      {
+        method: "POST",
+        body: JSON.stringify(payload),
+      },
+    ),
+
   updateProviderApiKey: (
     providerId: ManagedProviderId,
     payload: UpdateProviderApiKeyRequest,

admin-web/src/api/types.ts

@@ -20,7 +20,8 @@ export type AdminAuditAction =
   | "CONTENT_HINT_PACK_SAVED"
   | "CONTENT_HINT_FEED_SETTINGS_UPDATED"
   | "CONTENT_HINT_FEED_GENERATED"
-  | "PROVIDER_API_KEY_UPDATED";
+  | "PROVIDER_API_KEY_UPDATED"
+  | "PROVIDER_API_KEY_REVEALED";
 
 export interface SkillLocalization {
   name: string;
@@ -141,6 +142,14 @@ export interface UpdateProviderApiKeyRequest {
   apiKey: string;
 }
 
+export interface RevealProviderApiKeyRequest {
+  totpCode: string;
+}
+
+export interface RevealProviderApiKeyResponse {
+  apiKey: string;
+}
+
 export interface CursorPageQuery {
   cursor?: string;
   limit?: number;

admin-web/src/features/providers/providers-page.tsx

@@ -1,4 +1,4 @@
-import { KeyRound, RefreshCw, ServerCog } from "lucide-react";
+import { Eye, EyeOff, KeyRound, RefreshCw, ServerCog } from "lucide-react";
 import { useCallback, useEffect, useState, type FormEvent } from "react";
 import { toast } from "sonner";
 import { adminApi, ApiError } from "../../api/client";
@@ -11,6 +11,7 @@ import {
   Badge,
   Button,
   Card,
+  Dialog,
   ErrorState,
   Input,
   LoadingState,
@@ -74,7 +75,7 @@ export function ProvidersPage() {
       <PageHeader
         eyebrow="Managed Providers"
         title="Provider 配置"
-        description="替换托管网关使用的上游 API Key。新配置只影响之后开始的请求，现有密钥不会返回浏览器。"
+        description="查看或替换托管网关使用的上游 API Key。新配置只影响之后开始的请求。"
         actions={
           <Button variant="secondary" onClick={() => void load()}>
             <RefreshCw className="size-4" aria-hidden />
@@ -89,7 +90,7 @@ export function ProvidersPage() {
             <KeyRound className="size-4" aria-hidden />
           </span>
           <p>
-            保存后无法从页面读取原 Key。请先确认新 Key 已启用且权限正确；操作会写入审计日志，但不会记录密钥内容。
+            查看当前 Key 需要再次验证动态验证码；查看与替换都会写入审计日志，但不会记录密钥内容。
           </p>
         </div>
       </Card>
@@ -124,8 +125,51 @@ function ProviderCard({
   onUpdated: (status: ManagedProviderStatus) => void;
 }) {
   const [apiKey, setApiKey] = useState("");
+  const [currentApiKey, setCurrentApiKey] = useState<string>();
+  const [revealOpen, setRevealOpen] = useState(false);
+  const [totpCode, setTotpCode] = useState("");
+  const [revealError, setRevealError] = useState("");
+  const [revealing, setRevealing] = useState(false);
   const [saving, setSaving] = useState(false);
 
+  function toggleCurrentApiKey() {
+    if (currentApiKey) {
+      setCurrentApiKey(undefined);
+      return;
+    }
+    setTotpCode("");
+    setRevealError("");
+    setRevealOpen(true);
+  }
+
+  function handleRevealOpenChange(open: boolean) {
+    setRevealOpen(open);
+    if (!open) {
+      setTotpCode("");
+      setRevealError("");
+    }
+  }
+
+  async function reveal(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!/^\d{6}$/.test(totpCode)) {
+      setRevealError("请输入 6 位动态验证码");
+      return;
+    }
+
+    setRevealing(true);
+    setRevealError("");
+    try {
+      const response = await adminApi.revealProviderApiKey(providerId, { totpCode });
+      setCurrentApiKey(response.apiKey);
+      handleRevealOpenChange(false);
+    } catch (error) {
+      setRevealError(error instanceof ApiError ? error.message : "当前 API Key 读取失败");
+    } finally {
+      setRevealing(false);
+    }
+  }
+
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const normalized = apiKey.trim();
@@ -143,6 +187,7 @@ function ProviderCard({
         apiKey: normalized,
       });
       setApiKey("");
+      setCurrentApiKey((current) => (current ? normalized : undefined));
       onUpdated(updated);
       toast.success(`${name} API Key 已替换`);
     } catch (error) {
@@ -179,6 +224,48 @@ function ProviderCard({
         </dl>
       </div>
 
+      <div className="border-b border-border p-5 sm:p-6">
+        <label
+          className="block text-sm font-semibold"
+          htmlFor={`${providerId}-current-api-key`}
+        >
+          <span className="mb-2 block">{name} 当前 API Key</span>
+        </label>
+        <div className="relative">
+          <Input
+            id={`${providerId}-current-api-key`}
+            className="pr-12 font-mono"
+            type="text"
+            autoComplete="off"
+            readOnly
+            spellCheck={false}
+            value={
+              status?.configured
+                ? currentApiKey ?? "••••••••••••••••"
+                : "未配置"
+            }
+          />
+          <Button
+            className="absolute right-0.5 top-0.5"
+            type="button"
+            variant="ghost"
+            size="icon"
+            disabled={!status?.configured || revealing}
+            aria-label={currentApiKey ? `隐藏 ${name} 当前 API Key` : `显示 ${name} 当前 API Key`}
+            onClick={toggleCurrentApiKey}
+          >
+            {currentApiKey ? (
+              <EyeOff className="size-4" aria-hidden />
+            ) : (
+              <Eye className="size-4" aria-hidden />
+            )}
+          </Button>
+        </div>
+        <p className="mt-2 text-xs leading-5 text-muted">
+          点击眼睛并通过动态验证码验证后显示；再次点击或离开页面时隐藏。
+        </p>
+      </div>
+
       <form className="space-y-4 p-5 sm:p-6" onSubmit={(event) => void submit(event)}>
         <label className="block text-sm font-semibold" htmlFor={`${providerId}-api-key`}>
           <span className="mb-2 block">{name} 新 API Key</span>
@@ -194,13 +281,54 @@ function ProviderCard({
           />
         </label>
         <p id={`${providerId}-api-key-help`} className="text-xs leading-5 text-muted">
-          留空不会修改配置。出于安全考虑，当前 Key 不会显示。
+          留空不会修改配置。若当前 Key 已显示，替换成功后会同步显示新 Key。
         </p>
         <Button type="submit" loading={saving} disabled={!apiKey.trim()}>
           <KeyRound className="size-4" aria-hidden />
           替换 {name} API Key
         </Button>
       </form>
+
+      <Dialog
+        open={revealOpen}
+        onOpenChange={handleRevealOpenChange}
+        title={`验证后显示 ${name} API Key`}
+        description="请输入当前管理员的 6 位动态验证码。本次查看会写入审计日志。"
+      >
+        <form className="space-y-5" onSubmit={(event) => void reveal(event)} noValidate>
+          <label className="block text-sm font-semibold" htmlFor={`${providerId}-reveal-totp`}>
+            <span className="mb-2 block">动态验证码</span>
+            <Input
+              id={`${providerId}-reveal-totp`}
+              className="text-center text-lg font-semibold tracking-[0.35em]"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              pattern="[0-9]{6}"
+              maxLength={6}
+              value={totpCode}
+              onChange={(event) => setTotpCode(event.target.value.replace(/\D/g, ""))}
+              autoFocus
+            />
+          </label>
+          {revealError ? (
+            <p className="text-sm text-danger" role="alert">
+              {revealError}
+            </p>
+          ) : null}
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => handleRevealOpenChange(false)}
+            >
+              取消
+            </Button>
+            <Button type="submit" loading={revealing} disabled={totpCode.length !== 6}>
+              验证并显示
+            </Button>
+          </div>
+        </form>
+      </Dialog>
     </Card>
   );
 }

admin-web/src/test/client.test.ts

@@ -302,4 +302,28 @@ describe("adminApi", () => {
     expect((request.headers as Headers).get("X-CSRF-Token")).toBe("csrf-provider");
     expect(request.body).toBe(JSON.stringify({ apiKey: "new-provider-key" }));
   });
+
+  it("Provider API Key 查看请求携带 CSRF 且只提交动态验证码", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ apiKey: "current-provider-key" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    setCsrfToken("csrf-reveal");
+
+    const result = await adminApi.revealProviderApiKey("volcengine", {
+      totpCode: "123456",
+    });
+
+    expect(fetchMock.mock.calls[0]?.[0]).toBe(
+      "/v1/admin/providers/volcengine/api-key/reveal",
+    );
+    const request = fetchMock.mock.calls[0]?.[1] as RequestInit;
+    expect(request.method).toBe("POST");
+    expect((request.headers as Headers).get("X-CSRF-Token")).toBe("csrf-reveal");
+    expect(request.body).toBe(JSON.stringify({ totpCode: "123456" }));
+    expect(result.apiKey).toBe("current-provider-key");
+  });
 });

admin-web/src/test/providers.test.tsx

@@ -12,7 +12,7 @@ afterEach(() => {
 });
 
 describe("Provider 配置", () => {
-  it("仅展示配置状态，不会回显现有 API Key", async () => {
+  it("默认仅展示配置状态，不会回显现有 API Key", async () => {
     mockSession();
     mockProviders();
     window.location.hash = "#/providers";
@@ -27,6 +27,34 @@ describe("Provider 配置", () => {
     expect(document.body.textContent).not.toContain("existing-secret");
   });
 
+  it("通过动态验证码显示当前 Key，并可再次点击眼睛隐藏", async () => {
+    mockSession();
+    mockProviders();
+    const reveal = vi.spyOn(adminApi, "revealProviderApiKey").mockResolvedValue({
+      apiKey: "existing-secret",
+    });
+    window.location.hash = "#/providers";
+    render(<App />);
+
+    const currentKey = await screen.findByLabelText("DeepSeek 当前 API Key");
+    expect(currentKey).toHaveProperty("value", "••••••••••••••••");
+    await userEvent.click(
+      screen.getByRole("button", { name: "显示 DeepSeek 当前 API Key" }),
+    );
+    await userEvent.type(screen.getByLabelText("动态验证码"), "123456");
+    await userEvent.click(screen.getByRole("button", { name: "验证并显示" }));
+
+    await waitFor(() =>
+      expect(reveal).toHaveBeenCalledWith("deepseek", { totpCode: "123456" }),
+    );
+    await waitFor(() => expect(currentKey).toHaveProperty("value", "existing-secret"));
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "隐藏 DeepSeek 当前 API Key" }),
+    );
+    expect(currentKey).toHaveProperty("value", "••••••••••••••••");
+  });
+
   it("可独立替换 DeepSeek API Key，并在成功后清空输入", async () => {
     mockSession();
     mockProviders();