apifm-admin-mcp 26.5.2 → 26.5.3

package/README.md

@@ -8,7 +8,9 @@ It is designed for Kiro, Cursor, Claude Code, Codex, Windsurf, Trae, Qoder, and
 
 Secrets must not be pasted into model chat.
 
-This MCP exposes `apifm_admin_start_auth`, which returns a one-time localhost URL. The user enters Basic Authentication credentials, an existing `X-Token`, or username/email password login details in that local browser page. Those secrets stay in the local MCP process memory and are never part of MCP tool arguments.
+This MCP exposes `apifm_admin_start_auth`, which returns a one-time localhost URL. The user enters Basic Authentication credentials, an existing `X-Token`, username/password login details, email/password login details, or email signup details in that local browser page. Those secrets stay in the local MCP process memory and are never part of MCP tool arguments.
+
+If an API call is attempted before authorization, `apifm_admin_call` and `apifm_admin_find_and_call` return the authorization URL directly in both visible text and structured content as `authUrl`. The agent should show that URL immediately instead of asking the user to call another tool.
 
 The API callers reject payloads and headers containing sensitive field names such as `pwd`, `password`, `token`, `x-token`, `authorization`, `secret`, or `key`.
 
@@ -51,7 +53,7 @@ If installed globally:
 
 ## Tools
 
-- `apifm_admin_start_auth`: Starts a local secure authorization page for Basic Auth, X-Token, username/password login, or email registration.
+- `apifm_admin_start_auth`: Starts a local secure authorization page for username login, email login, Basic Auth, X-Token, or email registration. The page supports Simplified Chinese, Traditional Chinese, and English.
 - `apifm_admin_accounts`: Lists local account aliases without revealing secrets.
 - `apifm_admin_switch_account`: Switches the active account alias.
 - `apifm_admin_remove_account`: Clears an account alias and its in-memory secrets.
@@ -65,10 +67,10 @@ For real backend data, agents should call `apifm_admin_find_and_call` or `apifm_
 ## Example Agent Flow
 
 1. User: "Log in to my admin account and read the user list."
-2. Agent calls `apifm_admin_start_auth` with `authType: "password"`.
-3. User opens the returned local URL and enters username/email and password there.
-4. Agent calls `apifm_admin_find_and_call` with `query: "user list"` and a non-sensitive payload such as `{ "page": 1, "pageSize": 20 }`.
-5. Agent answers from the returned `apiResult`, not from method documentation.
+2. Agent calls `apifm_admin_find_and_call` with `query: "user list"` and a non-sensitive payload such as `{ "page": 1, "pageSize": 20 }`.
+3. If not authorized yet, the tool returns `authUrl` immediately. The user opens that URL and chooses username login, email login, Basic Auth, X-Token, or email signup.
+4. User completes authorization in the local browser page.
+5. Agent retries the same API call and answers from the returned `apiResult`, not from method documentation.
 
 ## Local Check
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apifm-admin-mcp",
-  "version": "26.5.2",
+  "version": "26.5.3",
   "description": "MCP server for safely operating APIFM admin APIs through the apifm-admin SDK.",
   "type": "module",
   "bin": {

package/src/browser-auth.js

@@ -6,7 +6,164 @@ import { getSdk, resetSdkConfig } from './sdk.js'
 
 const pendingSessions = new Map()
 
-export async function createAuthSession({ authType, alias = '', domains = {}, port = 0 }) {
+const I18N = {
+  'zh-CN': {
+    brand: 'APIFM Admin MCP',
+    title: '安全连接你的 APIFM 后台',
+    lead: '在本机页面完成授权，密钥只保存在当前 MCP 进程内存，不会进入聊天上下文。',
+    trustLocal: '本地 127.0.0.1 页面提交',
+    trustMemory: '凭证仅在内存中保存',
+    trustSwitch: '支持多个后台账号切换',
+    footer: '授权完成后回到 Agent，重新执行刚才的后台操作。',
+    formTitle: '选择授权方式',
+    expires: '页面过期时间',
+    alias: '账号别名',
+    aliasPh: 'default-admin',
+    methodUsername: '用户名登录',
+    methodUsernameSub: '用户名 + 密码',
+    methodEmail: '邮箱登录',
+    methodEmailSub: '邮箱 + 密码',
+    methodBasic: 'Basic Auth',
+    methodBasicSub: '用户名 + 密码',
+    methodToken: 'X-Token',
+    methodTokenSub: '直接使用令牌',
+    methodRegister: '邮箱注册',
+    methodRegisterSub: '开通新后台',
+    usernameHint: '使用后台用户名和密码登录，MCP 会通过 SDK 换取 X-Token。',
+    emailHint: '使用后台邮箱和密码登录，MCP 会通过 SDK 换取 X-Token。',
+    basicHint: '填写 Basic Authentication 信息，将作为 Authorization 请求头调用后台接口。',
+    tokenHint: '直接填写管理员登录后的 X-Token，用于后续所有后台接口调用。',
+    registerHint: '使用邮箱注册开通新后台账号。需要验证码时，请先通过 SDK 获取邮箱验证码。',
+    username: '用户名',
+    usernamePh: '请输入后台用户名',
+    password: '密码',
+    passwordPh: '请输入登录密码',
+    pdomain: '专属域名，可选',
+    pdomainPh: '例如 yourdomain',
+    email: '邮箱地址',
+    emailPh: 'name@example.com',
+    basicUser: 'Basic 用户名',
+    basicUserPh: '请输入 Basic 用户名',
+    basicPass: 'Basic 密码',
+    basicPassPh: '请输入 Basic 密码',
+    xToken: 'X-Token',
+    xTokenPh: '粘贴管理员 X-Token',
+    newPassword: '登录密码',
+    newPasswordPh: '设置登录密码',
+    name: '姓名或昵称',
+    namePh: '可选',
+    mailCode: '邮箱验证码',
+    mailCodePh: '请输入验证码',
+    submit: '完成授权',
+    security: '请不要把密码、Token 或 Basic Authentication 内容粘贴到聊天窗口。',
+    closeNote: '提交成功后可以关闭本页面。'
+  },
+  'zh-TW': {
+    brand: 'APIFM Admin MCP',
+    title: '安全連接你的 APIFM 後台',
+    lead: '在本機頁面完成授權，密鑰只保存在目前 MCP 程序記憶體，不會進入聊天上下文。',
+    trustLocal: '本地 127.0.0.1 頁面提交',
+    trustMemory: '憑證僅在記憶體中保存',
+    trustSwitch: '支援多個後台帳號切換',
+    footer: '授權完成後回到 Agent，重新執行剛才的後台操作。',
+    formTitle: '選擇授權方式',
+    expires: '頁面過期時間',
+    alias: '帳號別名',
+    aliasPh: 'default-admin',
+    methodUsername: '使用者名稱登入',
+    methodUsernameSub: '使用者名稱 + 密碼',
+    methodEmail: '郵箱登入',
+    methodEmailSub: '郵箱 + 密碼',
+    methodBasic: 'Basic Auth',
+    methodBasicSub: '使用者名稱 + 密碼',
+    methodToken: 'X-Token',
+    methodTokenSub: '直接使用令牌',
+    methodRegister: '郵箱註冊',
+    methodRegisterSub: '開通新後台',
+    usernameHint: '使用後台使用者名稱和密碼登入，MCP 會透過 SDK 換取 X-Token。',
+    emailHint: '使用後台郵箱和密碼登入，MCP 會透過 SDK 換取 X-Token。',
+    basicHint: '填寫 Basic Authentication 資訊，將作為 Authorization 請求頭呼叫後台介面。',
+    tokenHint: '直接填寫管理員登入後的 X-Token，用於後續所有後台介面呼叫。',
+    registerHint: '使用郵箱註冊開通新後台帳號。需要驗證碼時，請先透過 SDK 取得郵箱驗證碼。',
+    username: '使用者名稱',
+    usernamePh: '請輸入後台使用者名稱',
+    password: '密碼',
+    passwordPh: '請輸入登入密碼',
+    pdomain: '專屬網域，可選',
+    pdomainPh: '例如 yourdomain',
+    email: '郵箱地址',
+    emailPh: 'name@example.com',
+    basicUser: 'Basic 使用者名稱',
+    basicUserPh: '請輸入 Basic 使用者名稱',
+    basicPass: 'Basic 密碼',
+    basicPassPh: '請輸入 Basic 密碼',
+    xToken: 'X-Token',
+    xTokenPh: '貼上管理員 X-Token',
+    newPassword: '登入密碼',
+    newPasswordPh: '設定登入密碼',
+    name: '姓名或暱稱',
+    namePh: '可選',
+    mailCode: '郵箱驗證碼',
+    mailCodePh: '請輸入驗證碼',
+    submit: '完成授權',
+    security: '請不要把密碼、Token 或 Basic Authentication 內容貼到聊天視窗。',
+    closeNote: '提交成功後可以關閉本頁面。'
+  },
+  en: {
+    brand: 'APIFM Admin MCP',
+    title: 'Connect your APIFM admin safely',
+    lead: 'Authorize on this local page. Secrets stay in this MCP process memory and never enter the chat transcript.',
+    trustLocal: 'Submitted to local 127.0.0.1 only',
+    trustMemory: 'Credentials are memory-only',
+    trustSwitch: 'Multiple admin accounts supported',
+    footer: 'After authorization, return to the agent and run the backend action again.',
+    formTitle: 'Choose an authorization method',
+    expires: 'Page expires at',
+    alias: 'Account alias',
+    aliasPh: 'default-admin',
+    methodUsername: 'Username login',
+    methodUsernameSub: 'Username + password',
+    methodEmail: 'Email login',
+    methodEmailSub: 'Email + password',
+    methodBasic: 'Basic Auth',
+    methodBasicSub: 'Username + password',
+    methodToken: 'X-Token',
+    methodTokenSub: 'Use an existing token',
+    methodRegister: 'Email signup',
+    methodRegisterSub: 'Create new admin',
+    usernameHint: 'Log in with an admin username and password. The MCP will exchange them for an X-Token through the SDK.',
+    emailHint: 'Log in with an admin email and password. The MCP will exchange them for an X-Token through the SDK.',
+    basicHint: 'Enter Basic Authentication credentials. They will be sent as the Authorization header for API calls.',
+    tokenHint: 'Enter an existing admin X-Token for later backend API calls.',
+    registerHint: 'Create a new admin account by email. If a verification code is required, request it through the SDK first.',
+    username: 'Username',
+    usernamePh: 'Enter admin username',
+    password: 'Password',
+    passwordPh: 'Enter login password',
+    pdomain: 'Private domain, optional',
+    pdomainPh: 'Example: yourdomain',
+    email: 'Email address',
+    emailPh: 'name@example.com',
+    basicUser: 'Basic username',
+    basicUserPh: 'Enter Basic username',
+    basicPass: 'Basic password',
+    basicPassPh: 'Enter Basic password',
+    xToken: 'X-Token',
+    xTokenPh: 'Paste admin X-Token',
+    newPassword: 'Login password',
+    newPasswordPh: 'Set login password',
+    name: 'Name or nickname',
+    namePh: 'Optional',
+    mailCode: 'Email verification code',
+    mailCodePh: 'Enter verification code',
+    submit: 'Authorize account',
+    security: 'Do not paste passwords, tokens, or Basic Authentication values into the chat window.',
+    closeNote: 'You can close this page after authorization succeeds.'
+  }
+}
+
+export async function createAuthSession({ authType = 'all', alias = '', domains = {}, port = 0 }) {
+  const initialAuthType = normalizeAuthType(authType)
   const sessionId = crypto.randomUUID()
   const createdAt = Date.now()
   const expiresAt = createdAt + 10 * 60 * 1000
@@ -21,7 +178,7 @@ export async function createAuthSession({ authType, alias = '', domains = {}, po
       }
 
       if (req.method === 'GET') {
-        sendHtml(res, renderForm({ authType, alias, sessionId, expiresAt }))
+        sendHtml(res, renderForm({ authType: initialAuthType, alias, expiresAt }))
         return
       }
 
@@ -31,7 +188,7 @@ export async function createAuthSession({ authType, alias = '', domains = {}, po
       }
 
       const fields = await readForm(req)
-      const account = await finishAuth({ authType, alias, domains, fields })
+      const account = await finishAuth({ authType: fields.authType || initialAuthType, alias, domains, fields })
       pendingSessions.delete(sessionId)
       sendHtml(res, renderSuccess(account))
       setTimeout(() => server.close(), 250)
@@ -46,7 +203,7 @@ export async function createAuthSession({ authType, alias = '', domains = {}, po
 
   const address = server.address()
   const url = `http://127.0.0.1:${address.port}/${sessionId}`
-  pendingSessions.set(sessionId, { server, authType, alias, createdAt, expiresAt })
+  pendingSessions.set(sessionId, { server, authType: initialAuthType, alias, createdAt, expiresAt })
   setTimeout(() => {
     const pending = pendingSessions.get(sessionId)
     if (pending) {
@@ -58,6 +215,7 @@ export async function createAuthSession({ authType, alias = '', domains = {}, po
   return {
     url,
     sessionId,
+    authType: initialAuthType,
     expiresAt: new Date(expiresAt).toISOString(),
     message:
       'Open this local URL in a browser and enter credentials there. Do not paste secrets into the chat.'
@@ -65,38 +223,39 @@ export async function createAuthSession({ authType, alias = '', domains = {}, po
 }
 
 async function finishAuth({ authType, alias, domains, fields }) {
-  if (authType === 'basic') {
-    const username = required(fields.username, 'username')
-    const password = required(fields.password, 'password')
+  const selectedAuthType = normalizeAuthType(authType)
+  if (selectedAuthType === 'basic') {
+    const username = required(fields.basicUsername, 'Basic username')
+    const password = required(fields.basicPassword, 'Basic password')
     return upsertAccount({
       alias: fields.alias || alias,
-      authType,
+      authType: 'basic',
       basicAuth: `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
       domains
     })
   }
 
-  if (authType === 'x-token') {
+  if (selectedAuthType === 'x-token') {
     return upsertAccount({
       alias: fields.alias || alias,
-      authType,
-      token: required(fields.token, 'X-Token'),
+      authType: selectedAuthType,
+      token: required(fields.xToken, 'X-Token'),
       domains
     })
   }
 
-  if (authType === 'password') {
-    const loginMode = fields.loginMode === 'email' ? 'email' : 'username'
+  if (selectedAuthType === 'username-password' || selectedAuthType === 'email-password' || selectedAuthType === 'password') {
+    const loginMode = selectedAuthType === 'email-password' ? 'email' : 'username'
     const loginPayload =
       loginMode === 'email'
         ? {
-            email: required(fields.email, 'email'),
-            pwd: required(fields.password, 'password'),
+            email: required(fields.loginEmail, 'email'),
+            pwd: required(fields.loginPassword, 'password'),
             rememberMe: true
           }
         : {
-            userName: required(fields.username, 'username'),
-            pwd: required(fields.password, 'password'),
+            userName: required(fields.loginUsername, 'username'),
+            pwd: required(fields.loginPassword, 'password'),
             rememberMe: true,
             pdomain: fields.pdomain || undefined
           }
@@ -117,28 +276,28 @@ async function finishAuth({ authType, alias, domains, fields }) {
     }
     return upsertAccount({
       alias: fields.alias || alias,
-      authType,
+      authType: selectedAuthType,
       token,
       domains
     })
   }
 
-  if (authType === 'register-email') {
+  if (selectedAuthType === 'register-email') {
     const sdk = getSdk()
     resetSdkConfig()
     if (domains && Object.keys(domains).length) {
       sdk.setDomains(domains)
     }
     const result = await sdk.registerAdminSaveEmail({
-      email: required(fields.email, 'email'),
-      pwd: required(fields.password, 'password'),
-      name: fields.name || undefined,
+      email: required(fields.registerEmail, 'email'),
+      pwd: required(fields.registerPassword, 'password'),
+      name: fields.registerName || undefined,
       mailCode: fields.mailCode || fields.code || undefined
     })
     const token = extractToken(result)
     return upsertAccount({
       alias: fields.alias || alias,
-      authType,
+      authType: selectedAuthType,
       token,
       domains
     })
@@ -147,6 +306,16 @@ async function finishAuth({ authType, alias, domains, fields }) {
   throw new Error(`Unsupported auth type: ${authType}`)
 }
 
+function normalizeAuthType(authType) {
+  if (authType === 'password') return 'username-password'
+  if (
+    ['all', 'basic', 'x-token', 'username-password', 'email-password', 'register-email'].includes(authType)
+  ) {
+    return authType
+  }
+  return 'all'
+}
+
 function extractToken(response) {
   const candidates = [
     response?.data?.token,
@@ -203,7 +372,7 @@ function escapeHtml(value) {
 }
 
 function renderForm({ authType, alias, expiresAt }) {
-  const fields = renderFields(authType)
+  const initialType = authType === 'all' ? 'username-password' : authType
   return `<!doctype html>
 <html lang="zh-CN">
 <head>
@@ -211,77 +380,373 @@ function renderForm({ authType, alias, expiresAt }) {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>APIFM Admin MCP Authorization</title>
   <style>
-    body { margin: 0; font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f7f4; color: #202124; }
-    main { max-width: 560px; margin: 8vh auto; padding: 32px; background: #fff; border: 1px solid #deded8; border-radius: 8px; }
-    h1 { margin: 0 0 8px; font-size: 22px; }
-    p { margin: 0 0 20px; color: #5f6368; }
-    label { display: block; margin: 14px 0 6px; font-weight: 650; }
-    input, select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #c7c7c0; border-radius: 6px; font: inherit; }
-    button { margin-top: 22px; width: 100%; padding: 12px 14px; border: 0; border-radius: 6px; background: #1f6feb; color: white; font: inherit; font-weight: 700; cursor: pointer; }
-    .note { margin-top: 18px; font-size: 13px; color: #6a6f75; }
+    :root {
+      color-scheme: light;
+      --bg: oklch(0.965 0.006 250);
+      --surface: oklch(1 0 0);
+      --surface-2: oklch(0.982 0.006 250);
+      --ink: oklch(0.215 0.028 255);
+      --muted: oklch(0.43 0.028 255);
+      --line: oklch(0.875 0.013 250);
+      --accent: oklch(0.56 0.19 255);
+      --accent-ink: oklch(1 0 0);
+      --accent-soft: oklch(0.94 0.035 255);
+      --success: oklch(0.58 0.15 155);
+      --danger: oklch(0.55 0.18 25);
+      --radius: 12px;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background:
+        radial-gradient(circle at top left, oklch(0.9 0.06 255), transparent 34rem),
+        linear-gradient(135deg, var(--bg), oklch(0.955 0.011 230));
+      color: var(--ink);
+    }
+    .shell {
+      width: min(1080px, calc(100vw - 32px));
+      min-height: 100vh;
+      margin: 0 auto;
+      display: grid;
+      place-items: center;
+      padding: 28px 0;
+    }
+    .panel {
+      width: 100%;
+      display: grid;
+      grid-template-columns: minmax(280px, 0.84fr) minmax(320px, 1.16fr);
+      background: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 8px 28px oklch(0.25 0.02 255 / 0.12);
+    }
+    .aside {
+      padding: 34px;
+      background: linear-gradient(180deg, oklch(0.26 0.07 255), oklch(0.19 0.04 255));
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 32px;
+    }
+    .brand { display: flex; align-items: center; gap: 12px; font-weight: 760; }
+    .mark {
+      width: 38px;
+      height: 38px;
+      display: grid;
+      place-items: center;
+      border-radius: 10px;
+      background: oklch(0.74 0.16 210);
+      color: oklch(0.18 0.04 255);
+      font-weight: 850;
+    }
+    h1 { margin: 28px 0 12px; font-size: 2rem; line-height: 1.12; text-wrap: balance; letter-spacing: 0; }
+    .lead { margin: 0; color: oklch(0.88 0.018 250); max-width: 48ch; }
+    .trust { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
+    .trust li { display: flex; gap: 10px; align-items: flex-start; color: oklch(0.91 0.015 250); }
+    .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: oklch(0.78 0.16 155); flex: 0 0 auto; }
+    .content { padding: 30px; }
+    .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
+    .meta { color: var(--muted); font-size: 0.92rem; }
+    .lang { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
+    .lang button, .method button {
+      appearance: none;
+      border: 0;
+      font: inherit;
+      cursor: pointer;
+    }
+    .lang button { padding: 6px 10px; border-radius: 999px; color: var(--muted); background: transparent; }
+    .lang button[aria-pressed="true"] { background: var(--ink); color: white; }
+    .method {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 8px;
+      margin-bottom: 22px;
+    }
+    .method button {
+      min-height: 58px;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: var(--surface-2);
+      color: var(--ink);
+      text-align: left;
+      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+    }
+    .method button:hover { border-color: oklch(0.72 0.04 255); transform: translateY(-1px); }
+    .method button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+    .method strong { display: block; font-size: 0.92rem; line-height: 1.2; }
+    .method span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
+    form { display: grid; gap: 18px; }
+    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+    .field { display: grid; gap: 7px; }
+    label { color: var(--ink); font-weight: 660; }
+    input {
+      width: 100%;
+      min-height: 44px;
+      padding: 10px 12px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: white;
+      color: var(--ink);
+      font: inherit;
+      outline: none;
+      transition: border-color 160ms ease, box-shadow 160ms ease;
+    }
+    input::placeholder { color: oklch(0.48 0.025 255); }
+    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.62 0.16 255 / 0.18); }
+    .section {
+      display: none;
+      padding: 18px;
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: var(--surface-2);
+    }
+    .section.active { display: block; }
+    .section-head { margin: 0 0 14px; color: var(--muted); }
+    .submit {
+      min-height: 46px;
+      border: 0;
+      border-radius: 8px;
+      background: var(--accent);
+      color: var(--accent-ink);
+      font: inherit;
+      font-weight: 760;
+      cursor: pointer;
+      transition: transform 160ms ease, filter 160ms ease;
+    }
+    .submit:hover { filter: brightness(1.03); transform: translateY(-1px); }
+    .note {
+      margin: 12px 0 0;
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+    .security {
+      margin-top: 20px;
+      padding: 12px 14px;
+      border-radius: 10px;
+      background: oklch(0.96 0.025 155);
+      color: oklch(0.31 0.07 155);
+      font-size: 0.9rem;
+    }
+    [hidden] { display: none !important; }
+    @media (max-width: 860px) {
+      .panel { grid-template-columns: 1fr; }
+      .aside { padding: 26px; }
+      .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .grid { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 520px) {
+      .shell { width: min(100vw - 20px, 1080px); padding: 10px 0; }
+      .content { padding: 20px; }
+      .topbar { align-items: flex-start; flex-direction: column; }
+      .method { grid-template-columns: 1fr; }
+      h1 { font-size: 1.55rem; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+    }
   </style>
 </head>
 <body>
-<main>
-  <h1>APIFM Admin MCP Authorization</h1>
-  <p>Secrets entered here stay inside this local MCP process memory and are not sent through the chat transcript.</p>
-  <form method="post" autocomplete="off">
-    <label for="alias">Account alias</label>
-    <input id="alias" name="alias" value="${escapeHtml(alias)}" placeholder="default-admin">
-    ${fields}
-    <button type="submit">Authorize</button>
-  </form>
-  <p class="note">This local page expires at ${escapeHtml(new Date(expiresAt).toLocaleString())}. Close it after authorization.</p>
+<main class="shell">
+  <section class="panel" aria-labelledby="title">
+    <aside class="aside">
+      <div>
+        <div class="brand"><span class="mark">A</span><span data-i18n="brand">APIFM Admin MCP</span></div>
+        <h1 id="title" data-i18n="title">安全连接你的 APIFM 后台</h1>
+        <p class="lead" data-i18n="lead">在本机页面完成授权，密钥只保存在当前 MCP 进程内存，不会进入聊天上下文。</p>
+        <ul class="trust">
+          <li><span class="dot"></span><span data-i18n="trustLocal">本地 127.0.0.1 页面提交</span></li>
+          <li><span class="dot"></span><span data-i18n="trustMemory">凭证仅在内存中保存</span></li>
+          <li><span class="dot"></span><span data-i18n="trustSwitch">支持多个后台账号切换</span></li>
+        </ul>
+      </div>
+      <p class="lead" data-i18n="footer">授权完成后回到 Agent，重新执行刚才的后台操作。</p>
+    </aside>
+    <div class="content">
+      <div class="topbar">
+        <div>
+          <strong data-i18n="formTitle">选择授权方式</strong>
+          <div class="meta"><span data-i18n="expires">页面过期时间</span>: ${escapeHtml(new Date(expiresAt).toLocaleString())}</div>
+        </div>
+        <div class="lang" aria-label="Language">
+          <button type="button" data-lang="zh-CN" aria-pressed="true">简</button>
+          <button type="button" data-lang="zh-TW" aria-pressed="false">繁</button>
+          <button type="button" data-lang="en" aria-pressed="false">EN</button>
+        </div>
+      </div>
+
+      <div class="method" role="tablist" aria-label="Auth methods">
+        ${renderMethodButton('username-password', initialType)}
+        ${renderMethodButton('email-password', initialType)}
+        ${renderMethodButton('basic', initialType)}
+        ${renderMethodButton('x-token', initialType)}
+        ${renderMethodButton('register-email', initialType)}
+      </div>
+
+      <form method="post" autocomplete="off" id="authForm">
+        <input type="hidden" id="authType" name="authType" value="${escapeHtml(initialType)}">
+        <div class="field">
+          <label for="alias" data-i18n="alias">账号别名</label>
+          <input id="alias" name="alias" value="${escapeHtml(alias)}" placeholder="default-admin" data-i18n-placeholder="aliasPh">
+        </div>
+
+        <section class="section" data-section="username-password">
+          <p class="section-head" data-i18n="usernameHint">使用后台用户名和密码登录，MCP 会通过 SDK 换取 X-Token。</p>
+          <div class="grid">
+            <div class="field">
+              <label for="loginUsername" data-i18n="username">用户名</label>
+              <input id="loginUsername" name="loginUsername" data-i18n-placeholder="usernamePh">
+            </div>
+            <div class="field">
+              <label for="loginPasswordUser" data-i18n="password">密码</label>
+              <input id="loginPasswordUser" name="loginPassword" type="password" data-i18n-placeholder="passwordPh">
+            </div>
+          </div>
+          <div class="field" style="margin-top:14px">
+            <label for="pdomain" data-i18n="pdomain">专属域名，可选</label>
+            <input id="pdomain" name="pdomain" data-i18n-placeholder="pdomainPh">
+          </div>
+        </section>
+
+        <section class="section" data-section="email-password">
+          <p class="section-head" data-i18n="emailHint">使用后台邮箱和密码登录，MCP 会通过 SDK 换取 X-Token。</p>
+          <div class="grid">
+            <div class="field">
+              <label for="loginEmail" data-i18n="email">邮箱地址</label>
+              <input id="loginEmail" name="loginEmail" type="email" data-i18n-placeholder="emailPh">
+            </div>
+            <div class="field">
+              <label for="loginPasswordEmail" data-i18n="password">密码</label>
+              <input id="loginPasswordEmail" name="loginPassword" type="password" data-i18n-placeholder="passwordPh">
+            </div>
+          </div>
+        </section>
+
+        <section class="section" data-section="basic">
+          <p class="section-head" data-i18n="basicHint">填写 Basic Authentication 信息，将作为 Authorization 请求头调用后台接口。</p>
+          <div class="grid">
+            <div class="field">
+              <label for="basicUsername" data-i18n="basicUser">Basic 用户名</label>
+              <input id="basicUsername" name="basicUsername" data-i18n-placeholder="basicUserPh">
+            </div>
+            <div class="field">
+              <label for="basicPassword" data-i18n="basicPass">Basic 密码</label>
+              <input id="basicPassword" name="basicPassword" type="password" data-i18n-placeholder="basicPassPh">
+            </div>
+          </div>
+        </section>
+
+        <section class="section" data-section="x-token">
+          <p class="section-head" data-i18n="tokenHint">直接填写管理员登录后的 X-Token，用于后续所有后台接口调用。</p>
+          <div class="field">
+            <label for="xToken" data-i18n="xToken">X-Token</label>
+            <input id="xToken" name="xToken" type="password" data-i18n-placeholder="xTokenPh">
+          </div>
+        </section>
+
+        <section class="section" data-section="register-email">
+          <p class="section-head" data-i18n="registerHint">使用邮箱注册开通新后台账号。需要验证码时，请先通过 SDK 获取邮箱验证码。</p>
+          <div class="grid">
+            <div class="field">
+              <label for="registerEmail" data-i18n="email">邮箱地址</label>
+              <input id="registerEmail" name="registerEmail" type="email" data-i18n-placeholder="emailPh">
+            </div>
+            <div class="field">
+              <label for="registerPassword" data-i18n="newPassword">登录密码</label>
+              <input id="registerPassword" name="registerPassword" type="password" data-i18n-placeholder="newPasswordPh">
+            </div>
+            <div class="field">
+              <label for="registerName" data-i18n="name">姓名或昵称</label>
+              <input id="registerName" name="registerName" data-i18n-placeholder="namePh">
+            </div>
+            <div class="field">
+              <label for="mailCode" data-i18n="mailCode">邮箱验证码</label>
+              <input id="mailCode" name="mailCode" data-i18n-placeholder="mailCodePh">
+            </div>
+          </div>
+        </section>
+
+        <button class="submit" type="submit" data-i18n="submit">完成授权</button>
+      </form>
+      <div class="security" data-i18n="security">请不要把密码、Token 或 Basic Authentication 内容粘贴到聊天窗口。</div>
+      <p class="note" data-i18n="closeNote">提交成功后可以关闭本页面。</p>
+    </div>
+  </section>
 </main>
-</body>
-</html>`
-}
+<script>
+  const messages = ${JSON.stringify(I18N)}
+  const initialType = ${JSON.stringify(initialType)}
+  let activeLang = localStorage.getItem('apifm-auth-lang') || 'zh-CN'
 
-function renderFields(authType) {
-  if (authType === 'basic') {
-    return `
-      <label for="username">Basic username</label>
-      <input id="username" name="username" required>
-      <label for="password">Basic password</label>
-      <input id="password" name="password" type="password" required>`
-  }
-  if (authType === 'x-token') {
-    return `
-      <label for="token">X-Token</label>
-      <input id="token" name="token" type="password" required>`
+  const authTypeInput = document.querySelector('#authType')
+  const sections = [...document.querySelectorAll('[data-section]')]
+  const methodButtons = [...document.querySelectorAll('[data-method]')]
+  const langButtons = [...document.querySelectorAll('[data-lang]')]
+
+  function t(key) {
+    return messages[activeLang][key] || messages['zh-CN'][key] || key
   }
-  if (authType === 'password') {
-    return `
-      <label for="loginMode">Login mode</label>
-      <select id="loginMode" name="loginMode">
-        <option value="username">Username and password</option>
-        <option value="email">Email and password</option>
-      </select>
-      <label for="username">Username</label>
-      <input id="username" name="username">
-      <label for="email">Email</label>
-      <input id="email" name="email" type="email">
-      <label for="password">Password</label>
-      <input id="password" name="password" type="password" required>
-      <label for="pdomain">Private domain (optional)</label>
-      <input id="pdomain" name="pdomain">`
+
+  function setLang(lang) {
+    activeLang = messages[lang] ? lang : 'zh-CN'
+    localStorage.setItem('apifm-auth-lang', activeLang)
+    document.documentElement.lang = activeLang
+    document.querySelectorAll('[data-i18n]').forEach((node) => {
+      node.textContent = t(node.dataset.i18n)
+    })
+    document.querySelectorAll('[data-i18n-placeholder]').forEach((node) => {
+      node.placeholder = t(node.dataset.i18nPlaceholder)
+    })
+    langButtons.forEach((button) => {
+      button.setAttribute('aria-pressed', String(button.dataset.lang === activeLang))
+    })
   }
-  if (authType === 'register-email') {
-    return `
-      <label for="email">Email</label>
-      <input id="email" name="email" type="email" required>
-      <label for="password">Password</label>
-      <input id="password" name="password" type="password" required>
-      <label for="name">Name</label>
-      <input id="name" name="name">
-      <label for="mailCode">Email verification code</label>
-      <input id="mailCode" name="mailCode">`
+
+  function setMethod(method) {
+    authTypeInput.value = method
+    sections.forEach((section) => {
+      const active = section.dataset.section === method
+      section.classList.toggle('active', active)
+      section.querySelectorAll('input').forEach((input) => {
+        input.disabled = !active
+        input.required = active && input.type !== 'hidden' && !['pdomain', 'registerName', 'mailCode'].includes(input.name)
+      })
+    })
+    methodButtons.forEach((button) => {
+      button.setAttribute('aria-pressed', String(button.dataset.method === method))
+    })
   }
-  return ''
+
+  methodButtons.forEach((button) => button.addEventListener('click', () => setMethod(button.dataset.method)))
+  langButtons.forEach((button) => button.addEventListener('click', () => setLang(button.dataset.lang)))
+  setLang(activeLang)
+  setMethod(initialType)
+</script>
+</body>
+</html>`
+}
+
+function renderMethodButton(method, activeType) {
+  const keys = {
+    'username-password': ['methodUsername', 'methodUsernameSub'],
+    'email-password': ['methodEmail', 'methodEmailSub'],
+    basic: ['methodBasic', 'methodBasicSub'],
+    'x-token': ['methodToken', 'methodTokenSub'],
+    'register-email': ['methodRegister', 'methodRegisterSub']
+  }[method]
+  return `<button type="button" role="tab" data-method="${method}" aria-pressed="${method === activeType}">
+    <strong data-i18n="${keys[0]}"></strong>
+    <span data-i18n="${keys[1]}"></span>
+  </button>`
 }
 
 function renderSuccess(account) {
-  return `<!doctype html><html lang="zh-CN"><meta charset="utf-8"><body style="font:16px system-ui;padding:40px"><h1>Authorized</h1><p>Account <strong>${escapeHtml(account.alias)}</strong> is ready. You can close this tab.</p></body></html>`
+  return `<!doctype html><html lang="zh-CN"><meta charset="utf-8"><body style="font:16px system-ui;padding:40px;background:#f7f8fb;color:#202124"><main style="max-width:560px;margin:10vh auto;background:white;border:1px solid #dde2ea;border-radius:14px;padding:32px"><h1>授权成功</h1><p>账号 <strong>${escapeHtml(account.alias)}</strong> 已准备好。你可以关闭本页面，回到 Agent 继续操作。</p></main></body></html>`
 }
 
 function renderError(error) {

package/src/index.js

@@ -21,7 +21,7 @@ import {
   summarizeMetadata
 } from './sdk.js'
 
-const VERSION = '26.5.2'
+const VERSION = '26.5.3'
 
 const server = new McpServer(
   {
@@ -32,7 +32,7 @@ const server = new McpServer(
     instructions: [
       'Use this MCP server to operate APIFM admin APIs through the apifm-admin SDK.',
       'Never ask users to paste passwords, Basic Authentication values, X-Token values, or API keys into chat.',
-      'Use apifm_admin_start_auth to collect secrets through a local browser page, then call APIs by account alias.',
+      'Use apifm_admin_start_auth to collect secrets through a local browser page, then call APIs by account alias. If an API call is attempted before authorization, the tool will return an authorization URL directly.',
       'For user requests that ask to read, create, update, delete, or operate backend data, call apifm_admin_find_and_call or apifm_admin_call and return the live apiResult.',
       'apifm_admin_search_methods and apifm_admin_method_info are only planning helpers; do not treat their parameter documentation as the final answer.'
     ].join('\n')
@@ -47,9 +47,10 @@ server.registerTool(
       'Creates a localhost browser page for entering Basic Auth, X-Token, username/password, or email registration details. Secrets are stored only in this MCP process memory and must not be pasted into chat.',
     inputSchema: z.object({
       authType: z
-        .enum(['basic', 'x-token', 'password', 'register-email'])
+        .enum(['all', 'basic', 'x-token', 'password', 'username-password', 'email-password', 'register-email'])
+        .optional()
         .describe(
-          'basic = Basic Authentication, x-token = existing admin X-Token, password = username/email + password login, register-email = create admin account by email'
+          'Optional initial auth method. all shows every method in one browser page. basic = Basic Authentication, x-token = existing admin X-Token, username-password/email-password = SDK login, register-email = create admin account by email.'
         ),
       alias: z.string().optional().describe('Friendly local account alias, for example prod or test-shop.'),
       domains: z
@@ -59,7 +60,7 @@ server.registerTool(
       port: z.number().int().min(0).max(65535).optional().describe('Optional localhost port. 0 chooses a free port.')
     })
   },
-  async ({ authType, alias, domains, port }) => {
+  async ({ authType = 'all', alias, domains, port }) => {
     const session = await createAuthSession({ authType, alias, domains, port })
     return toolJson({
       ...session,
@@ -276,8 +277,20 @@ async function callToolResult({
 
   const account = getAccount(alias)
   if (!account) {
+    const session = await createAuthSession({ authType: 'all', alias, domains })
     return toolError(
-      'No APIFM admin account is authorized. Call apifm_admin_start_auth first, then use the returned local browser URL.'
+      [
+        'No APIFM admin account is authorized.',
+        `Open this local authorization URL now: ${session.url}`,
+        'Complete authorization in the browser, then run the same API call again.'
+      ].join('\n'),
+      {
+        reason: 'authorization_required',
+        authUrl: session.url,
+        sessionId: session.sessionId,
+        expiresAt: session.expiresAt,
+        nextStep: 'Open authUrl in a browser, complete authorization, then retry the same tool call.'
+      }
     )
   }
 
@@ -322,7 +335,7 @@ function findCallableMethod(query) {
   return candidates.find((candidate) => typeof sdk[candidate.methodName] === 'function')?.methodName || ''
 }
 
-function toolError(message) {
+function toolError(message, extra = {}) {
   return {
     isError: true,
     content: [
@@ -331,7 +344,7 @@ function toolError(message) {
         text: message
       }
     ],
-    structuredContent: { error: message }
+    structuredContent: { error: message, ...extra }
   }
 }
 

package/src/self-check.js

@@ -32,9 +32,24 @@ try {
     }
   }
 
+  const auth = await client.callTool({
+    name: 'apifm_admin_start_auth',
+    arguments: {}
+  })
+  const authData = JSON.parse(auth.content[0].text)
+  if (!authData.url?.startsWith('http://127.0.0.1:')) {
+    throw new Error('start_auth should return a local authorization URL.')
+  }
+  const authPage = await fetch(authData.url).then((response) => response.text())
+  for (const expected of ['data-lang="zh-CN"', 'data-lang="zh-TW"', 'data-lang="en"', 'data-method="basic"', 'data-method="x-token"']) {
+    if (!authPage.includes(expected)) {
+      throw new Error(`Authorization page is missing ${expected}.`)
+    }
+  }
+
   const search = await client.callTool({
     name: 'apifm_admin_search_methods',
-    arguments: { query: '用户 列表', limit: 5 }
+    arguments: { query: 'user list', limit: 5 }
   })
   const searchData = JSON.parse(search.content[0].text)
   if (!searchData.sdkMethodCount || !Array.isArray(searchData.results)) {
@@ -55,12 +70,16 @@ try {
   const findAndCall = await client.callTool({
     name: 'apifm_admin_find_and_call',
     arguments: {
-      query: '用户列表',
+      query: 'user list',
       payload: { page: 1, pageSize: 1 }
     }
   })
-  if (!findAndCall.isError || !findAndCall.content[0].text.includes('No APIFM admin account is authorized')) {
-    throw new Error('find_and_call should attempt execution and require authorization before returning API data.')
+  const findAndCallData = findAndCall.structuredContent || {}
+  if (!findAndCall.isError || !findAndCallData.authUrl?.startsWith('http://127.0.0.1:')) {
+    throw new Error('find_and_call should return a local authUrl when authorization is missing.')
+  }
+  if (!findAndCall.content[0].text.includes(findAndCallData.authUrl)) {
+    throw new Error('find_and_call should show the authUrl in the visible tool text.')
   }
 
   await client.close()