@liujitcn/kratos-admin-core 0.0.29 → 0.0.31

package/dist/package/src/stores/modules/user.ts

@@ -1,11 +1,14 @@
 import { defineStore } from "pinia";
 import { defAuthService } from "../../api/system/auth";
 import { defLoginService } from "../../api/base/login";
-import type { LoginRequest } from "../../rpc/base/v1/login";
+import { defMfaService } from "../../api/base/mfa";
+import type { LoginRequest, LoginResponse } from "../../rpc/base/v1/login";
+import type { VerifyMfaRequest } from "../../rpc/base/v1/mfa";
 import type { UserInfoForm } from "../../rpc/system/admin/v1/auth";
 import { UserState } from "../../stores/interface";
 import piniaPersistConfig from "../../stores/helper/persist";
 import { useDictStoreHook } from "../../stores/modules/dict";
+import { useLockScreenStore } from "../../stores/modules/lockScreen";
 import { t } from "../../locales";
 
 const defaultUserInfo: UserInfoForm = {
@@ -65,9 +68,18 @@ export const useUserStore = defineStore("admin-user", {
       return Boolean(this.token.trim() && this.tokenExpiresAt > Date.now());
     },
     /** 登录 */
-    async login(loginRequest: LoginRequest) {
+    async login(loginRequest: LoginRequest): Promise<LoginResponse> {
       const data = await defLoginService.Login(loginRequest);
+      if (data.status === 1 || data.status === 0 || data.status === 4) {
+        this.updateTokenAuth(data.access_token, data.refresh_token ?? "", data.token_type ?? "", data.expires_in);
+      }
+      return data;
+    },
+    /** 校验登录阶段的多因素认证并保存正式令牌。 */
+    async verifyMfa(request: VerifyMfaRequest): Promise<LoginResponse> {
+      const data = await defMfaService.VerifyMfa(request);
       this.updateTokenAuth(data.access_token, data.refresh_token ?? "", data.token_type ?? "", data.expires_in);
+      return data;
     },
     /** 刷新认证令牌 */
     async refreshAccessToken() {
@@ -89,6 +101,7 @@ export const useUserStore = defineStore("admin-user", {
     clearAuthData() {
       // 清理登录态时同步清空字典缓存，避免切换账号后读到旧字典。
       useDictStoreHook().clearDictionaryCache();
+      useLockScreenStore().clearLock();
       this.setToken("");
       this.setRefreshToken("");
       this.setTokenType("");
@@ -106,5 +119,5 @@ export const useUserStore = defineStore("admin-user", {
       }
     }
   },
-  persist: piniaPersistConfig("admin-user")
+  persist: piniaPersistConfig("admin-user", ["token", "tokenType", "tokenExpiresAt", "userInfo"])
 });

package/dist/package/src/stores/runtime.ts

@@ -1,5 +1,6 @@
 export { useAuthStore } from "./modules/auth";
 export { useConfigStore } from "./modules/config";
 export { useGlobalStore } from "./modules/global";
+export { useLockScreenStore } from "./modules/lockScreen";
 export { useTabsStore } from "./modules/tabs";
 export { useUserStore } from "./modules/user";

package/dist/package/src/utils/clipboard.ts

@@ -0,0 +1,22 @@
+/** 将文本复制到系统剪贴板，并兼容非安全上下文的管理端开发地址。 */
+export async function copyText(content: string): Promise<void> {
+  if (typeof navigator !== "undefined" && navigator.clipboard && typeof window !== "undefined" && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(content);
+      return;
+    } catch {
+      // Clipboard API 受权限限制时继续尝试传统 DOM 方案。
+    }
+  }
+  if (typeof document === "undefined") throw new Error("copy failed");
+  const textarea = document.createElement("textarea");
+  textarea.value = content;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  const copied = document.execCommand("copy");
+  document.body.removeChild(textarea);
+  if (!copied) throw new Error("copy failed");
+}

package/dist/package/src/utils/request.ts

@@ -1,6 +1,5 @@
 import axios, { type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError } from "axios";
 import qs from "qs";
-import { ElMessage, ElMessageBox } from "element-plus";
 import router from "../routers";
 import { LOGIN_URL } from "../config";
 import pinia from "../stores";
@@ -12,6 +11,7 @@ const apiTargetUrl = import.meta.env.VITE_API_URL || import.meta.env.VITE_APP_AP
 export const requestBaseURL = `${apiTargetUrl}${apiBasePath}`;
 const SESSION_URL = "/v1/base/session";
 const TOKEN_URL = "/v1/base/token";
+const REFRESH_EXPIRY_COOKIE = "kratos_refresh_exp";
 const CAPTCHA_URL = "/v1/base/captcha";
 const CONFIG_URL = "/v1/base/config";
 const LANGUAGE_URL = "/v1/base/language";
@@ -19,6 +19,9 @@ const PASSWORD_PUBLIC_KEY_URL = "/v1/base/password-public-key";
 const OAUTH_PROVIDER_URL = "/v1/base/oauth/provider";
 const OAUTH_AUTHORIZATION_URL = "/v1/base/oauth/authorization";
 const OAUTH_TICKET_URL = "/v1/base/oauth/ticket";
+const MFA_VERIFY_URL = "/v1/base/mfa/verify";
+const MFA_ENROLLMENT_URL = "/v1/base/mfa/enrollment";
+const MFA_ENROLLMENT_CONFIRM_URL = "/v1/base/mfa/enrollment/confirm";
 const LEGACY_AUTH_URL = "/auth";
 const LEGACY_REFRESH_TOKEN_URL = `${LEGACY_AUTH_URL}/token`;
 const LEGACY_CAPTCHA_URL = "/login/captcha";
@@ -33,6 +36,9 @@ const NO_AUTH_URL_SET = new Set([
   OAUTH_PROVIDER_URL,
   OAUTH_AUTHORIZATION_URL,
   OAUTH_TICKET_URL,
+  MFA_VERIFY_URL,
+  MFA_ENROLLMENT_URL,
+  MFA_ENROLLMENT_CONFIRM_URL,
   LEGACY_AUTH_URL,
   LEGACY_CAPTCHA_URL,
   LEGACY_REFRESH_TOKEN_URL
@@ -47,6 +53,9 @@ const AUTH_EXPIRED_EXCLUDED_URL_SET = new Set([
   OAUTH_PROVIDER_URL,
   OAUTH_AUTHORIZATION_URL,
   OAUTH_TICKET_URL,
+  MFA_VERIFY_URL,
+  MFA_ENROLLMENT_URL,
+  MFA_ENROLLMENT_CONFIRM_URL,
   LEGACY_AUTH_URL,
   LEGACY_REFRESH_TOKEN_URL,
   LEGACY_CAPTCHA_URL
@@ -70,7 +79,8 @@ const service = axios.create({
 const refreshService = axios.create({
   baseURL: requestBaseURL,
   timeout: 50000,
-  headers: { "Content-Type": "application/json;charset=utf-8" }
+  headers: { "Content-Type": "application/json;charset=utf-8" },
+  withCredentials: true
 });
 
 /** 获取用户状态仓库 */
@@ -108,6 +118,15 @@ function getTokenExpiresAt() {
   return getUserStore().tokenExpiresAt;
 }
 
+/** 判断浏览器是否存在非敏感的刷新令牌过期提示。 */
+function hasRefreshCookieHint() {
+  if (typeof document === "undefined") return false;
+  const item = document.cookie.split(";").find(value => value.trim().startsWith(`${REFRESH_EXPIRY_COOKIE}=`));
+  if (!item) return false;
+  const expiresAt = Number(item.split("=")[1]);
+  return Number.isFinite(expiresAt) && expiresAt * 1000 > Date.now();
+}
+
 /** 判断当前访问令牌是否仍在有效期内。 */
 export function hasValidAccessToken() {
   const userStore = getUserStore();
@@ -117,7 +136,7 @@ export function hasValidAccessToken() {
 /** 读取最新可用访问令牌，必要时先串行刷新，供 axios、fetch 与 SSE 共用。 */
 export async function getRequestAccessToken(): Promise<string> {
   const userStore = getUserStore();
-  if (!userStore.token && userStore.refreshToken) {
+  if (!userStore.token && (userStore.refreshToken || hasRefreshCookieHint())) {
     await handleTokenRefresh(false);
   }
 
@@ -137,7 +156,7 @@ export async function ensureAccessToken() {
   }
 
   const userStore = getUserStore();
-  if (!userStore.refreshToken) {
+  if (!userStore.refreshToken && !hasRefreshCookieHint()) {
     return false;
   }
 
@@ -213,7 +232,7 @@ service.interceptors.response.use(
     }
 
     ElMessage.error(message || t("common.message.system_error"));
-    return Promise.reject(new Error(message || "Error"));
+    return Promise.reject(new Error(message || t("common.message.system_error")));
   },
   async (error: AxiosError) => {
     const status = error.response?.status;
@@ -224,7 +243,7 @@ service.interceptors.response.use(
 
     // 业务请求仅在 401 时尝试刷新并重放，403 直接展示后端权限错误。
     if ((status === 401 || code === 401) && !shouldSkipAuthExpiredPrompt(requestConfig)) {
-      if (requestConfig && !requestConfig._authRetried && getUserStore().refreshToken) {
+      if (requestConfig && !requestConfig._authRetried && (getUserStore().refreshToken || hasRefreshCookieHint())) {
         requestConfig._authRetried = true;
         try {
           await handleTokenRefresh(false);
@@ -282,13 +301,10 @@ async function handleTokenRefresh(promptOnFailure = true) {
 /** 调用刷新令牌接口并回写最新认证信息 */
 async function refreshAccessToken() {
   const userStore = getUserStore();
-  if (!userStore.refreshToken) {
-    return Promise.reject(new Error(t("core.auth.refresh_token_missing")));
-  }
 
   const response = await refreshService.post(
     TOKEN_URL,
-    { refresh_token: userStore.refreshToken },
+    { refresh_token: userStore.refreshToken || undefined },
     { headers: { Authorization: "no-auth", ...getLocaleRequestHeaders() } }
   );
   const data = response.data;

package/dist/package/src/utils/webauthn.ts

@@ -0,0 +1,90 @@
+import { t } from "../locales";
+
+/** WebAuthn 选项使用的 Base64URL 编解码。 */
+function decodeBase64Url(value: string): ArrayBuffer {
+  const normalized = value.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, "=");
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+  return bytes.buffer;
+}
+
+/** 将 WebAuthn 二进制响应编码为服务端协议使用的 Base64URL。 */
+function encodeBase64Url(value: ArrayBuffer | Uint8Array): string {
+  const bytes = value instanceof Uint8Array ? value : new Uint8Array(value);
+  let binary = "";
+  bytes.forEach(byte => {
+    binary += String.fromCharCode(byte);
+  });
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+
+/** 将服务端返回的 WebAuthn 创建选项转换为浏览器类型。 */
+function parseCreationOptions(optionsJson: string): PublicKeyCredentialCreationOptions {
+  const options = JSON.parse(optionsJson) as { publicKey: PublicKeyCredentialCreationOptions };
+  const publicKey = options.publicKey;
+  publicKey.challenge = decodeBase64Url(publicKey.challenge as unknown as string);
+  publicKey.user.id = decodeBase64Url(publicKey.user.id as unknown as string);
+  publicKey.excludeCredentials = publicKey.excludeCredentials?.map(item => ({
+    ...item,
+    id: decodeBase64Url(item.id as unknown as string)
+  }));
+  return publicKey;
+}
+
+/** 将服务端返回的 WebAuthn 断言选项转换为浏览器类型。 */
+function parseRequestOptions(optionsJson: string): PublicKeyCredentialRequestOptions {
+  const options = JSON.parse(optionsJson) as { publicKey: PublicKeyCredentialRequestOptions };
+  const publicKey = options.publicKey;
+  publicKey.challenge = decodeBase64Url(publicKey.challenge as unknown as string);
+  publicKey.allowCredentials = publicKey.allowCredentials?.map(item => ({
+    ...item,
+    id: decodeBase64Url(item.id as unknown as string)
+  }));
+  return publicKey;
+}
+
+/** 将 PublicKeyCredential 序列化为可提交给服务端的 JSON。 */
+function serializeCredential(credential: PublicKeyCredential): string {
+  const response = credential.response;
+  const serializedResponse: Record<string, unknown> = {
+    clientDataJSON: encodeBase64Url(response.clientDataJSON)
+  };
+  const payload: Record<string, unknown> = {
+    id: credential.id,
+    rawId: encodeBase64Url(credential.rawId),
+    type: credential.type,
+    response: serializedResponse,
+    clientExtensionResults: credential.getClientExtensionResults()
+  };
+  if ("attestationObject" in response) {
+    const attestation = response as AuthenticatorAttestationResponse;
+    serializedResponse.attestationObject = encodeBase64Url(attestation.attestationObject);
+  } else {
+    const assertion = response as AuthenticatorAssertionResponse;
+    Object.assign(serializedResponse, {
+      authenticatorData: encodeBase64Url(assertion.authenticatorData),
+      signature: encodeBase64Url(assertion.signature),
+      userHandle: assertion.userHandle ? encodeBase64Url(assertion.userHandle) : null
+    });
+  }
+  if (credential.authenticatorAttachment) payload.authenticatorAttachment = credential.authenticatorAttachment;
+  return JSON.stringify(payload);
+}
+
+/** 执行 WebAuthn 注册 ceremony。 */
+export async function createWebAuthnCredential(optionsJson: string): Promise<string> {
+  if (!navigator.credentials?.create) throw new Error(t("core.login.mfa_webauthn_setup_unsupported"));
+  const credential = await navigator.credentials.create({ publicKey: parseCreationOptions(optionsJson) });
+  if (!(credential instanceof PublicKeyCredential)) throw new Error(t("core.login.mfa_webauthn_setup_invalid"));
+  return serializeCredential(credential);
+}
+
+/** 执行 WebAuthn 登录 ceremony。 */
+export async function getWebAuthnAssertion(optionsJson: string): Promise<string> {
+  if (!navigator.credentials?.get) throw new Error(t("core.login.mfa_webauthn_login_unsupported"));
+  const credential = await navigator.credentials.get({ publicKey: parseRequestOptions(optionsJson) });
+  if (!(credential instanceof PublicKeyCredential)) throw new Error(t("core.login.mfa_webauthn_login_invalid"));
+  return serializeCredential(credential);
+}

package/dist/package/src/views/login/components/LoginForm.vue

@@ -59,15 +59,18 @@
     </el-form-item>
   </el-form>
   <div class="login-btn">
-    <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)">{{ t("common.action.reset") }}</el-button>
+    <el-button round size="large" @click="resetForm(loginFormRef)">
+      <el-icon><CircleClose /></el-icon>
+      {{ t("common.action.reset") }}
+    </el-button>
     <el-button
-      :icon="UserFilled"
       round
       size="large"
       type="primary"
       :loading="loading || oauthTicketLoading"
       @click="handleLogin(loginFormRef)"
     >
+      <el-icon><UserFilled /></el-icon>
       {{ t("common.action.login") }}
     </el-button>
   </div>
@@ -128,6 +131,48 @@
       />
     </div>
   </el-dialog>
+  <ProDialog v-model="mfaDialogVisible" :title="t('core.login.mfa_title')" width="360px" :close-on-click-modal="false">
+    <ProForm
+      ref="mfaLoginFormRef"
+      :model="mfaLoginForm"
+      :fields="mfaLoginFormFields"
+      :rules="mfaLoginFormRules"
+      size="default"
+      label-width="auto"
+      @keyup.enter.prevent="verifyMfaLogin"
+    />
+    <template #footer>
+      <el-button @click="mfaDialogVisible = false">{{ t("common.action.cancel") }}</el-button>
+      <el-button type="primary" :loading="mfaLoading" @click="verifyMfaLogin">
+        {{ mfaMethod === "webauthn" ? t("core.login.mfa_webauthn_action") : t("common.action.confirm") }}
+      </el-button>
+    </template>
+  </ProDialog>
+  <ProDialog v-model="mfaSetupDialogVisible" :title="t('core.login.mfa_setup_title')" width="520px" :close-on-click-modal="false">
+    <template v-if="mfaSetupMethod !== 'webauthn'">
+      <MfaSetupPanel :uri="mfaSetupUri" />
+      <ProForm
+        ref="mfaSetupFormRef"
+        :model="mfaSetupForm"
+        :fields="mfaSetupFormFields"
+        :rules="mfaSetupFormRules"
+        size="default"
+        label-width="auto"
+        @keyup.enter.prevent="confirmMfaSetup"
+      />
+    </template>
+    <template #footer>
+      <el-button :disabled="mfaLoading" @click="mfaSetupDialogVisible = false">{{ t("common.action.cancel") }}</el-button>
+      <el-button type="primary" :loading="mfaLoading" @click="confirmMfaSetup">
+        {{ mfaSetupMethod === "webauthn" ? t("core.login.mfa_webauthn_action") : t("common.action.confirm") }}
+      </el-button>
+    </template>
+  </ProDialog>
+  <MfaRecoveryCodesDialog
+    v-model="recoveryCodesDialogVisible"
+    :codes="recoveryCodes"
+    @confirm="finishMfaEnrollment"
+  />
 </template>
 
 <script setup lang="ts">
@@ -136,9 +181,15 @@ import { useRoute, useRouter } from "vue-router";
 import { HOME_URL } from "../../../config";
 import { getTimeState } from "../../../utils";
 import { defLoginService } from "../../../api/base/login";
+import { defMfaService } from "../../../api/base/mfa";
 import { defOauthService } from "../../../api/base/oauth";
-import { ElMessage, ElNotification } from "element-plus";
-import type { LoginRequest } from "../../../rpc/base/v1/login";
+import { createWebAuthnCredential, getWebAuthnAssertion } from "../../../security";
+import ProDialog from "../../../components/Dialog/ProDialog.vue";
+import ProForm from "../../../components/ProForm/index.vue";
+import MfaSetupPanel from "../../../components/Mfa/MfaSetupPanel.vue";
+import MfaRecoveryCodesDialog from "../../../components/Mfa/MfaRecoveryCodesDialog.vue";
+import type { ProFormField, ProFormInstance } from "../../../components/ProForm/interface";
+import { LoginStatus, type LoginRequest, type LoginResponse } from "../../../rpc/base/v1/login";
 import type { OauthProvider } from "../../../rpc/base/v1/oauth";
 import { getOauthProviderIcon, withOauthProviderDisplay, type OauthProviderDisplay } from "../../../utils/oauthProvider";
 import { useUserStore } from "../../../stores/modules/user";
@@ -147,8 +198,7 @@ import { useTabsStore } from "../../../stores/modules/tabs";
 import { useKeepAliveStore } from "../../../stores/modules/keepAlive";
 import { initDynamicRouter } from "../../../routers/modules/dynamicRouter";
 import { isUnmatchedRoute, navigateTo, resolveFrontendRouteURL } from "../../../utils/router";
-import { CircleClose, UserFilled } from "@element-plus/icons-vue";
-import type { ElForm } from "element-plus";
+import type { ElForm, FormRules } from "element-plus";
 import { PASSWORD_CRYPTO_SCENE, encryptPassword } from "../../../utils/passwordCrypto";
 import { useConfigStore } from "../../../stores/modules/config";
 import { Click as GoCaptchaClick, Rotate as GoCaptchaRotate, Slide as GoCaptchaSlide } from "go-captcha-vue";
@@ -182,6 +232,84 @@ const loginRules = computed(() => ({
 const loading = ref(false);
 const oauthLoadingProvider = ref("");
 const oauthTicketLoading = ref(false);
+const mfaDialogVisible = ref(false);
+const mfaLoading = ref(false);
+const mfaChallengeId = ref("");
+const mfaLoginFormRef = ref<ProFormInstance>();
+const mfaLoginForm = reactive({ code: "", recoveryCode: "" });
+const mfaMethod = ref("totp");
+const mfaWebAuthnOptionsJson = ref("");
+const mfaSetupDialogVisible = ref(false);
+const mfaSetupTicket = ref("");
+const mfaSetupUri = ref("");
+const mfaSetupFormRef = ref<ProFormInstance>();
+const mfaSetupForm = reactive({ code: "" });
+const recoveryCodesDialogVisible = ref(false);
+const recoveryCodes = ref<string[]>([]);
+const mfaSetupMethod = ref("totp");
+const mfaSetupWebAuthnOptionsJson = ref("");
+
+/** 登录阶段 MFA 输入字段，验证码和恢复码至少填写其一。 */
+const mfaLoginFormFields = computed<ProFormField[]>(() => {
+  const recoveryCodeField: ProFormField = {
+    prop: "recoveryCode",
+    label: t("core.login.mfa_recovery_code"),
+    component: "input",
+    props: {
+      autocomplete: "one-time-code",
+      placeholder: t("core.login.mfa_recovery_code")
+    }
+  };
+  if (mfaMethod.value === "webauthn") return [recoveryCodeField];
+  return [
+    {
+      prop: "code",
+      label: t("core.login.mfa_code"),
+      component: "input",
+      props: {
+        autocomplete: "one-time-code",
+        inputmode: "numeric",
+        maxlength: 8,
+        placeholder: t("core.login.mfa_code")
+      }
+    },
+    recoveryCodeField
+  ];
+});
+
+const mfaLoginFormRules = computed<FormRules>(() => {
+  if (mfaMethod.value === "webauthn") return {};
+  const factorRule = {
+    validator: (_rule: unknown, value: string, callback: (error?: Error) => void) => {
+      if (value || mfaLoginForm.code || mfaLoginForm.recoveryCode) {
+        callback();
+        return;
+      }
+      callback(new Error(t("core.login.mfa_code")));
+    },
+    trigger: "blur"
+  };
+  return { code: [factorRule], recoveryCode: [factorRule] };
+});
+
+/** 强制绑定 MFA 的 TOTP 输入字段。 */
+const mfaSetupFormFields = computed<ProFormField[]>(() => [
+  {
+    prop: "code",
+    label: t("core.login.mfa_code"),
+    component: "input",
+    props: {
+      autocomplete: "one-time-code",
+      inputmode: "numeric",
+      maxlength: 8,
+      placeholder: t("core.login.mfa_code")
+    }
+  }
+]);
+
+const mfaSetupFormRules = computed<FormRules>(() => ({
+  code: [{ required: true, message: t("core.login.mfa_code"), trigger: "blur" }]
+}));
 
 /** 登录页三方登录展示项。 */
 type LoginOauthProvider = OauthProvider & OauthProviderDisplay;
@@ -412,12 +540,14 @@ const handleOauthLogin = async (provider: LoginOauthProvider) => {
 };
 
 /** 完成登录后的用户信息、字典与动态路由初始化。 */
-const finishLogin = async () => {
+const finishLogin = async (mustChangePassword = false) => {
   // 1.获取用户信息
   await userStore.getUserInfo();
 
-  // 2.预加载字典缓存，避免页面首次渲染时字典值为空
-  await dictStore.loadDictionaries();
+  if (!mustChangePassword) {
+    // 2.预加载字典缓存，避免页面首次渲染时字典值为空
+    await dictStore.loadDictionaries();
+  }
 
   // 3.添加动态路由
   await initDynamicRouter();
@@ -428,7 +558,11 @@ const finishLogin = async () => {
 
   // 5.优先跳回登录失效前页面，没有记录时再进入首个可访问页面。
   // 统一走动态路由感知跳转，避免首次登录后目标页面尚未完成挂载时直接进入 404。
-  await navigateTo(router, getLoginRedirectPath());
+  if (mustChangePassword) {
+    await navigateTo(router, "/profile", { tab: "password" });
+  } else {
+    await navigateTo(router, getLoginRedirectPath());
+  }
   ElNotification({
     title: getTimeState(),
     message: t("core.login.welcome"),
@@ -437,6 +571,95 @@ const finishLogin = async () => {
   });
 };
 
+/** 处理密码或 OAuth 返回的 MFA 登录状态。 */
+const handleLoginResponse = async (result: LoginResponse) => {
+  if (result.status === LoginStatus.LOGIN_STATUS_MFA_REQUIRED) {
+    mfaChallengeId.value = result.mfa_challenge_id;
+    mfaMethod.value = result.mfa_method || "totp";
+    mfaWebAuthnOptionsJson.value = result.mfa_webauthn_options_json || "";
+    mfaLoginForm.code = "";
+    mfaLoginForm.recoveryCode = "";
+    mfaDialogVisible.value = true;
+    return;
+  }
+	if (result.status === LoginStatus.LOGIN_STATUS_MFA_ENROLLMENT_REQUIRED) {
+    mfaSetupTicket.value = result.mfa_setup_ticket;
+    mfaSetupMethod.value = result.mfa_method || "totp";
+    await beginMfaSetup(result.mfa_setup_ticket);
+		return;
+	}
+	userStore.updateTokenAuth(result.access_token, result.refresh_token ?? "", result.token_type ?? "", result.expires_in);
+	await finishLogin(result.status === LoginStatus.LOGIN_STATUS_PASSWORD_CHANGE_REQUIRED);
+};
+
+/** 校验登录阶段 MFA 并完成登录。 */
+const verifyMfaLogin = async () => {
+  if (mfaLoading.value || !mfaChallengeId.value) return;
+  if (mfaMethod.value !== "webauthn" && !(await mfaLoginFormRef.value?.validate())) return;
+  mfaLoading.value = true;
+  try {
+    const useRecoveryCode = Boolean(mfaLoginForm.recoveryCode);
+    const webauthnResponseJson =
+      mfaMethod.value === "webauthn" && !useRecoveryCode ? await getWebAuthnAssertion(mfaWebAuthnOptionsJson.value) : "";
+    if (mfaMethod.value !== "webauthn" && !mfaLoginForm.code && !mfaLoginForm.recoveryCode) return;
+    const result = await defMfaService.VerifyMfa({
+      challenge_id: mfaChallengeId.value,
+      code: useRecoveryCode ? "" : mfaLoginForm.code,
+      recovery_code: mfaLoginForm.recoveryCode,
+      webauthn_response_json: webauthnResponseJson
+    });
+    mfaDialogVisible.value = false;
+    await handleLoginResponse(result);
+  } finally {
+    mfaLoading.value = false;
+  }
+};
+
+/** 开始强制绑定 MFA。 */
+const beginMfaSetup = async (setupTicket: string) => {
+  mfaLoading.value = true;
+  try {
+    const result = await defMfaService.BeginMfaEnrollment({ setup_ticket: setupTicket });
+    mfaSetupTicket.value = result.setup_ticket;
+    mfaSetupUri.value = result.otpauth_uri;
+    mfaSetupMethod.value = result.method || "totp";
+    mfaSetupWebAuthnOptionsJson.value = result.webauthn_options_json || "";
+    mfaSetupForm.code = "";
+    mfaSetupDialogVisible.value = true;
+  } finally {
+    mfaLoading.value = false;
+  }
+};
+
+/** 关闭恢复码弹窗并结束强制绑定登录流程。 */
+const finishMfaEnrollment = async () => {
+  if (!recoveryCodes.value.length) return;
+  recoveryCodes.value = [];
+  ElMessage.success(t("core.login.mfa_setup_success"));
+  await loadPageCaptcha();
+};
+
+/** 确认强制绑定 MFA 并要求用户重新登录。 */
+const confirmMfaSetup = async () => {
+  if (mfaLoading.value || !mfaSetupTicket.value) return;
+  if (mfaSetupMethod.value !== "webauthn" && !(await mfaSetupFormRef.value?.validate())) return;
+  mfaLoading.value = true;
+  try {
+    const webauthnResponseJson =
+      mfaSetupMethod.value === "webauthn" ? await createWebAuthnCredential(mfaSetupWebAuthnOptionsJson.value) : "";
+    const result = await defMfaService.ConfirmMfaEnrollment({
+      setup_ticket: mfaSetupTicket.value,
+      code: mfaSetupForm.code,
+      webauthn_response_json: webauthnResponseJson
+    });
+    mfaSetupDialogVisible.value = false;
+    recoveryCodes.value = result.recovery_codes;
+    recoveryCodesDialogVisible.value = true;
+  } finally {
+    mfaLoading.value = false;
+  }
+};
+
 /** 消费 OAuth 回调携带的一次性票据。 */
 const consumeOauthTicket = async () => {
   const oauthError = route.query.oauth_error;
@@ -452,8 +675,7 @@ const consumeOauthTicket = async () => {
   oauthTicketLoading.value = true;
   try {
     const result = await defOauthService.ExchangeOauthTicket({ ticket });
-    userStore.updateTokenAuth(result.access_token, result.refresh_token ?? "", result.token_type ?? "", result.expires_in);
-    await finishLogin();
+    await handleLoginResponse(result);
   } finally {
     oauthTicketLoading.value = false;
   }
@@ -537,10 +759,9 @@ const submitLogin = async (captchaToken: string) => {
       captcha_code: captchaToken,
       captcha_id: loginForm.captcha_id
     };
-    // 1.执行登录接口
-    await userStore.login(loginRequest);
-
-    await finishLogin();
+    // 1.执行登录接口，挑战态不保存令牌，等待 MFA 完成。
+    const result = await userStore.login(loginRequest);
+    await handleLoginResponse(result);
   } catch (_error) {
     await loadPageCaptcha();
   } finally {

package/dist/package/src/views/login/index.vue

@@ -4,7 +4,7 @@
       <SwitchDark class="dark" />
       <LocaleSwitch class="locale" />
       <div class="login-left">
-        <img class="login-left-img" :src="backgroundUrl" alt="login" />
+        <img class="login-left-img" :src="backgroundUrl" :alt="t('core.login.background_alt')" />
       </div>
       <div class="login-form">
         <div ref="loginLogoRef" class="login-logo">
@@ -23,8 +23,10 @@ import LoginForm from "./components/LoginForm.vue";
 import SwitchDark from "../../components/SwitchDark/index.vue";
 import LocaleSwitch from "../../components/LocaleSwitch/index.vue";
 import { useConfigStore } from "../../stores/modules/config";
+import { useLocaleStore } from "../../locales";
 
 const configStore = useConfigStore();
+const { t } = useLocaleStore();
 const projectName = computed(() => configStore.display.sysName || import.meta.env.VITE_GLOB_APP_TITLE);
 const logoUrl = computed(() => configStore.display.adminLogo);
 const backgroundUrl = computed(() => configStore.display.background);