perf: 支持passkey登录

packages/ui/certd-client/src/locales/langs/en-US/authentication.ts

@@ -68,6 +68,14 @@ export default {
 
   smsTab: "Login via SMS code",
   passwordTab: "Password login",
+  passkeyTab: "Passkey Login",
+  passkeyLogin: "Passkey Login",
+  passkeyHelper: "Login with your biometric or security key",
+  passkeyNotSupported: "Your browser does not support Passkey",
+  passkeyRegister: "Register Passkey",
+  passkeyRegistered: "Passkey Registered",
+  passkeyRegisterSuccess: "Passkey registered successfully",
+  passkeyRegisterFailed: "Passkey registration failed",
   title: "Change Password",
   weakPasswordWarning: "For your account security, please change your password immediately",
   changeNow: "Change Now",
@@ -90,4 +98,7 @@ export default {
   updateProfile: "Update Profile",
   oauthLoginTitle: "Other ways of login",
   oauthOnlyLoginTitle: "Login",
+  registerPasskey: "Register Passkey",
+  deviceName: "Device Name",
+  deviceNameHelper: "Please enter the device name， used to identify the device",
 };

packages/ui/certd-client/src/locales/langs/zh-CN/authentication.ts

@@ -68,6 +68,14 @@ export default {
 
   smsTab: "手机号登录/注册",
   passwordTab: "密码登录",
+  passkeyTab: "Passkey登录",
+  passkeyLogin: "Passkey登录",
+  passkeyHelper: "使用您的生物识别或安全密钥登录",
+  passkeyNotSupported: "您的浏览器不支持Passkey",
+  passkeyRegister: "注册Passkey",
+  passkeyRegistered: "Passkey已注册",
+  passkeyRegisterSuccess: "Passkey注册成功",
+  passkeyRegisterFailed: "Passkey注册失败",
 
   title: "修改密码",
   weakPasswordWarning: "为了您的账户安全，请立即修改密码",
@@ -92,4 +100,7 @@ export default {
 
   oauthLoginTitle: "其他登录方式",
   oauthOnlyLoginTitle: "登录",
+  registerPasskey: "注册Passkey",
+  deviceName: "设备名称",
+  deviceNameHelper: "请输入当前设备名称，绑定多个时好做区分",
 };

packages/ui/certd-client/src/router/source/modules/certd.ts

@@ -260,7 +260,7 @@ export const certdResources = [
             meta: {
               icon: "ion:person-outline",
               auth: true,
-              isMenu: false,
+              isMenu: true,
             },
           },
           {

packages/ui/certd-client/src/store/user/api.user.ts

@@ -107,3 +107,42 @@ export async function OauthProviders() {
     method: "post",
   });
 }
+
+export async function generatePasskeyRegistrationOptions() {
+  return await request({
+    url: "/passkey/generateRegistration",
+    method: "post",
+  });
+}
+
+export async function verifyPasskeyRegistration(userId: number, response: any, challenge: string) {
+  return await request({
+    url: "/passkey/verifyRegistration",
+    method: "post",
+    data: { userId, response, challenge },
+  });
+}
+
+export async function generatePasskeyAuthenticationOptions(userId: number) {
+  return await request({
+    url: "/passkey/generateAuthentication",
+    method: "post",
+    data: { userId },
+  });
+}
+
+export async function loginByPasskey(form: { userId: number; credential: any; challenge: string }) {
+  return await request({
+    url: "/loginByPasskey",
+    method: "post",
+    data: form,
+  });
+}
+
+export async function registerPasskey(form: { userId: number; response: any; challenge: string }) {
+  return await request({
+    url: "/passkey/register",
+    method: "post",
+    data: form,
+  });
+}

packages/ui/certd-client/src/store/user/index.ts

@@ -92,6 +92,16 @@ export const useUserStore = defineStore({
       const loginRes = await UserApi.loginByTwoFactor(form);
       return await this.onLoginSuccess(loginRes);
     },
+
+    async loginByPasskey(form: any) {
+      const loginRes = await UserApi.loginByPasskey(form);
+      return await this.onLoginSuccess(loginRes);
+    },
+
+    async registerPasskey(form: any) {
+      return await UserApi.registerPasskey(form);
+    },
+
     async getUserInfoAction(): Promise<UserInfoRes> {
       const userInfo = await UserApi.mine();
       this.setUserInfo(userInfo);

packages/ui/certd-client/src/views/certd/mine/api.ts

@@ -55,3 +55,94 @@ export async function OauthBoundUrl(type: string) {
     },
   });
 }
+
+export async function GetPasskeys() {
+  return await request({
+    url: "/mine/passkeys",
+    method: "POST",
+  });
+}
+
+export async function UnbindPasskey(id: number) {
+  return await request({
+    url: "/mine/unbindPasskey",
+    method: "POST",
+    data: { id },
+  });
+}
+
+export interface PasskeyRegistrationOptions {
+  rp: {
+    name: string;
+    id: string;
+  };
+  user: {
+    id: Uint8Array;
+    name: string;
+    displayName: string;
+  };
+  challenge: string;
+  pubKeyCredParams: {
+    type: string;
+    alg: number;
+  }[];
+  timeout: number;
+  attestation: string;
+  excludeCredentials: any[];
+}
+
+export interface PasskeyAuthenticationOptions {
+  rpId: string;
+  challenge: string;
+  timeout: number;
+  allowCredentials: any[];
+}
+
+export interface PasskeyCredential {
+  id: string;
+  type: string;
+  rawId: string;
+  response: {
+    attestationObject: string;
+    clientDataJSON: string;
+  };
+}
+
+export async function generatePasskeyRegistrationOptions() {
+  return await request({
+    url: "/passkey/generateRegistration",
+    method: "post",
+  });
+}
+
+export async function verifyPasskeyRegistration(userId: number, response: any, challenge: string, deviceName: string) {
+  return await request({
+    url: "/passkey/verifyRegistration",
+    method: "post",
+    data: { userId, response, challenge, deviceName },
+  });
+}
+
+export async function generatePasskeyAuthenticationOptions(userId: number) {
+  return await request({
+    url: "/passkey/generateAuthentication",
+    method: "post",
+    data: { userId },
+  });
+}
+
+export async function loginByPasskey(userId: number, credential: any, challenge: string) {
+  return await request({
+    url: "/passkey/login",
+    method: "post",
+    data: { userId, credential, challenge },
+  });
+}
+
+export async function registerPasskey(userId: number, response: any, challenge: string) {
+  return await request({
+    url: "/passkey/register",
+    method: "post",
+    data: { userId, response, challenge },
+  });
+}

packages/ui/certd-client/src/views/certd/mine/use.tsx

@@ -108,3 +108,54 @@ export function useUserProfile() {
     openEditProfileDialog,
   };
 }
+
+export function usePasskeyRegister() {
+  const { openCrudFormDialog } = useFormWrapper();
+  const wrapperRef = ref();
+  async function openRegisterDialog(req: { onSubmit?: (ctx: any) => void }) {
+    const { t } = useI18n();
+
+    const userStore = useUserStore();
+    const deviceNameRef = ref();
+
+    const crudOptions: any = {
+      form: {
+        wrapper: {
+          title: t("authentication.registerPasskey"),
+          width: 500,
+          onOpened(opts: { form: any }) {
+            opts.form.deviceName = "";
+          },
+        },
+        onSubmit: req.onSubmit,
+        afterSubmit: null,
+        onSuccess: null,
+      },
+      columns: {
+        deviceName: {
+          title: t("authentication.deviceName"),
+          type: "text",
+          form: {
+            component: {
+              class: "w-full",
+            },
+            col: {
+              span: 24,
+            },
+            helper: t("authentication.deviceNameHelper"),
+            rules: [{ required: true, message: t("authentication.deviceName") }],
+          },
+        },
+      },
+    };
+
+    const wrapper = await openCrudFormDialog({ crudOptions });
+    wrapperRef.value = wrapper;
+
+    return wrapper;
+  }
+
+  return {
+    openRegisterDialog,
+  };
+}

packages/ui/certd-client/src/views/certd/mine/user-profile.vue

@@ -15,6 +15,9 @@
         </a-descriptions-item>
         <a-descriptions-item :label="t('authentication.email')">{{ userInfo.email }}</a-descriptions-item>
         <a-descriptions-item :label="t('authentication.phoneNumber')">{{ userInfo.phoneCode }}{{ userInfo.mobile }}</a-descriptions-item>
+        <a-descriptions-item label="角色">
+          <fs-values-format :model-value="userInfo.roleIds" :dict="roleDict" />
+        </a-descriptions-item>
         <a-descriptions-item v-if="settingStore.sysPublic.oauthEnabled && settingStore.isPlus" label="第三方账号绑定">
           <template v-for="item in computedOauthBounds" :key="item.name">
             <div v-if="item.addonId" class="flex items-center gap-2 mb-2">
@@ -25,6 +28,21 @@
             </div>
           </template>
         </a-descriptions-item>
+        <a-descriptions-item label="Passkey">
+          <div v-if="passkeys.length > 0" class="flex flex-col gap-2">
+            <div v-for="passkey in passkeys" :key="passkey.id" class="flex items-center gap-4 p-2 border-b">
+              <fs-icon icon="ion:finger-print" class="text-blue-500 fs-24" />
+              <span class="w-40 truncate" :title="passkey.passkeyId">{{ passkey.deviceName }}</span>
+              <span class="text-sm text-gray-500">{{ formatDate(passkey.registeredAt) }}</span>
+              <a-button type="primary" danger @click="unbindPasskey(passkey.id)">解绑</a-button>
+            </div>
+          </div>
+          <div v-else class="text-gray-500">暂无Passkey</div>
+          <a-button v-if="passkeySupported" type="primary" class="mt-2" @click="registerPasskey">注册Passkey</a-button>
+          <div v-if="!passkeySupported" class="text-red-500 text-sm mt-2">
+            {{ t("authentication.passkeyNotSupported") }}
+          </div>
+        </a-descriptions-item>
         <a-descriptions-item :label="t('common.handle')">
           <a-button type="primary" @click="doUpdate">{{ t("authentication.updateProfile") }}</a-button>
           <change-password-button class="ml-10" :show-button="true"> </change-password-button>
@@ -40,9 +58,11 @@ import { computed, onMounted, Ref, ref } from "vue";
 import ChangePasswordButton from "/@/views/certd/mine/change-password-button.vue";
 import { useI18n } from "/src/locales";
 import { useUserProfile } from "./use";
-import { Modal } from "ant-design-vue";
+import { usePasskeyRegister } from "./use";
+import { message, Modal } from "ant-design-vue";
 import { useSettingStore } from "/@/store/settings";
 import { isEmpty } from "lodash-es";
+import { dict } from "@fast-crud/fast-crud";
 
 const { t } = useI18n();
 
@@ -53,11 +73,20 @@ defineOptions({
 const settingStore = useSettingStore();
 
 const userInfo: Ref = ref({});
+const passkeys = ref([]);
+const passkeySupported = ref(false);
 
 const getUserInfo = async () => {
   userInfo.value = await api.getMineInfo();
 };
+const roleDict = dict({
+  url: "/basic/user/getSimpleRoles",
+  value: "id",
+  label: "name",
+});
+
 const { openEditProfileDialog } = useUserProfile();
+const { openRegisterDialog } = usePasskeyRegister();
 
 function doUpdate() {
   openEditProfileDialog({
@@ -69,10 +98,12 @@ function doUpdate() {
 
 const oauthBounds = ref([]);
 const oauthProviders = ref([]);
+
 async function loadOauthBounds() {
   const res = await api.GetOauthBounds();
   oauthBounds.value = res;
 }
+
 async function loadOauthProviders() {
   const res = await api.GetOauthProviders();
   oauthProviders.value = res;
@@ -102,12 +133,116 @@ async function unbind(type: string) {
 }
 
 async function bind(type: string) {
-  //获取第三方登录URL
   const res = await api.OauthBoundUrl(type);
   const loginUrl = res.loginUrl;
   window.location.href = loginUrl;
 }
 
+async function loadPasskeys() {
+  try {
+    const res = await api.GetPasskeys();
+    passkeys.value = res;
+  } catch (e: any) {
+    console.error("加载Passkey失败:", e);
+  }
+}
+
+async function unbindPasskey(id: number) {
+  Modal.confirm({
+    title: "确认解绑吗？",
+    okText: "确认",
+    okType: "danger",
+    onOk: async () => {
+      await api.UnbindPasskey(id);
+      await loadPasskeys();
+    },
+  });
+}
+
+const toBase64Url = (buffer: ArrayBuffer) => {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+};
+
+async function registerPasskey() {
+  if (!passkeySupported.value) {
+    Modal.error({ title: "错误", content: "浏览器不支持Passkey" });
+    return;
+  }
+  await openRegisterDialog({
+    onSubmit: async (ctx: any) => {
+      const deviceName = ctx.form.deviceName;
+      if (!deviceName) {
+        return;
+      }
+      await doRegisterPasskey(deviceName);
+      message.success("Passkey注册成功");
+    },
+  });
+}
+
+async function doRegisterPasskey(deviceName: string) {
+  try {
+    const res: any = await api.generatePasskeyRegistrationOptions();
+    const options = res;
+
+    navigator.credentials.query({
+      publicKey: options,
+    });
+    const credential = await (navigator.credentials as any).create({
+      publicKey: {
+        challenge: Uint8Array.from(atob(options.challenge.replace(/-/g, "+").replace(/_/g, "/")), c => c.charCodeAt(0)),
+        rp: options.rp,
+        pubKeyCredParams: options.pubKeyCredParams,
+        timeout: options.timeout || 60000,
+        attestation: options.attestation,
+        excludeCredentials: options.excludeCredentials || [],
+        user: {
+          id: Uint8Array.from([res.userId]),
+          name: userInfo.value.username,
+          displayName: deviceName,
+        },
+      },
+    });
+
+    if (!credential) {
+      throw new Error("Passkey注册失败");
+    }
+
+    const response = {
+      id: credential.id,
+      type: credential.type,
+      rawId: toBase64Url(credential.rawId),
+      response: {
+        attestationObject: toBase64Url(credential.response.attestationObject),
+        clientDataJSON: toBase64Url(credential.response.clientDataJSON),
+      },
+    };
+
+    const verifyRes: any = await api.verifyPasskeyRegistration(userInfo.value.id, response, options.challenge, deviceName);
+    await loadPasskeys();
+  } catch (e: any) {
+    console.error("Passkey注册失败:", e);
+    Modal.error({ title: "错误", content: e.message || "Passkey注册失败" });
+  }
+}
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return "";
+  return new Date(dateString).toLocaleString("zh-CN");
+};
+
+const checkPasskeySupport = () => {
+  passkeySupported.value = false;
+  if (typeof window !== "undefined" && "credentials" in navigator && "PublicKeyCredential" in window) {
+    passkeySupported.value = true;
+  }
+};
+
 const userAvatar = computed(() => {
   if (isEmpty(userInfo.value.avatar)) {
     return "";
@@ -123,5 +258,7 @@ onMounted(async () => {
   await getUserInfo();
   await loadOauthBounds();
   await loadOauthProviders();
+  await loadPasskeys();
+  checkPasskeySupport();
 });
 </script>

packages/ui/certd-client/src/views/framework/login/index.vue

@@ -46,11 +46,21 @@
               </a-form-item>
             </template>
           </a-tab-pane>
+          <a-tab-pane key="passkey" :tab="t('authentication.passkeyTab')">
+            <template v-if="formState.loginType === 'passkey'">
+              <div v-if="!passkeySupported" class="text-red-500 text-sm mt-2">
+                {{ t("authentication.passkeyNotSupported") }}
+              </div>
+            </template>
+          </a-tab-pane>
         </a-tabs>
         <a-form-item>
-          <a-button type="primary" size="large" html-type="button" :loading="loading" class="login-button" @click="handleFinish">
+          <a-button v-if="formState.loginType !== 'passkey'" type="primary" size="large" html-type="button" :loading="loading" class="login-button" @click="handleFinish">
             {{ queryBindCode ? t("authentication.bindButton") : t("authentication.loginButton") }}
           </a-button>
+          <a-button v-else type="primary" size="large" html-type="button" :loading="loading" class="login-button" :disabled="!passkeySupported" @click="handlePasskeyLogin">
+            {{ t("authentication.passkeyLogin") }}
+          </a-button>
         </a-form-item>
         <a-form-item>
           <div class="mt-2 flex justify-between items-center">
@@ -94,8 +104,8 @@
     </a-form>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, nextTick, reactive, ref, toRaw } from "vue";
+<script lang="ts" setup>
+import { computed, nextTick, reactive, ref, toRaw, onMounted } from "vue";
 import { useUserStore } from "/src/store/user";
 import { useSettingStore } from "/@/store/settings";
 import { utils } from "@fast-crud/fast-crud";
@@ -103,193 +113,199 @@ import SmsCode from "/@/views/framework/login/sms-code.vue";
 import { useI18n } from "/@/locales";
 import { LanguageToggle } from "/@/vben/layouts";
 import CaptchaInput from "/@/components/captcha/captcha-input.vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import OauthFooter from "/@/views/framework/oauth/oauth-footer.vue";
 import * as oauthApi from "../oauth/api";
 import { notification } from "ant-design-vue";
-export default defineComponent({
-  name: "LoginPage",
-  components: { LanguageToggle, SmsCode, CaptchaInput, OauthFooter },
-  setup() {
-    const { t } = useI18n();
-    const route = useRoute();
-    const userStore = useUserStore();
+import { request } from "/src/api/service";
+import * as UserApi from "/src/store/user/api.user";
 
-    const queryBindCode = ref(route.query.bindCode as string | undefined);
+const { t } = useI18n();
+const route = useRoute();
+const userStore = useUserStore();
 
-    const queryOauthOnly = route.query.oauthOnly as string;
-    const urlLoginType = route.query.loginType as string | undefined;
-    const verifyCodeInputRef = ref();
-    const loading = ref(false);
+const queryBindCode = ref(route.query.bindCode as string | undefined);
+const queryOauthOnly = route.query.oauthOnly as string;
+const urlLoginType = route.query.loginType as string | undefined;
+const verifyCodeInputRef = ref();
+const loading = ref(false);
 
-    const settingStore = useSettingStore();
-    const formRef = ref();
-    let defaultLoginType = settingStore.sysPublic.defaultLoginType || "password";
-    if (defaultLoginType === "sms") {
-      if (!settingStore.sysPublic.smsLoginEnabled || !settingStore.isComm) {
-        defaultLoginType = "password";
-      }
-    }
-    const formState = reactive({
-      username: "",
-      phoneCode: "86",
-      mobile: "",
-      password: "",
-      loginType: urlLoginType || defaultLoginType, //password
-      smsCode: "",
-      captcha: null,
-      smsCaptcha: null,
-    });
+const settingStore = useSettingStore();
+const formRef = ref();
+let defaultLoginType = settingStore.sysPublic.defaultLoginType || "password";
+if (defaultLoginType === "sms") {
+  if (!settingStore.sysPublic.smsLoginEnabled || !settingStore.isComm) {
+    defaultLoginType = "password";
+  }
+}
+const formState = reactive({
+  username: "",
+  phoneCode: "86",
+  mobile: "",
+  password: "",
+  loginType: urlLoginType || defaultLoginType,
+  smsCode: "",
+  captcha: null,
+  smsCaptcha: null,
+});
 
-    const rules = {
-      mobile: [
-        {
-          required: true,
-          message: "请输入手机号",
-        },
-      ],
-      username: [
-        {
-          required: true,
-          message: "请输入用户名",
-        },
-      ],
-      password: [
-        {
-          required: true,
-          message: "请输入登录密码",
-        },
-      ],
-      smsCode: [
-        {
-          required: true,
-          message: "请输入短信验证码",
-        },
-      ],
-      captcha: [
-        {
-          required: true,
-          message: "请进行验证码验证",
-        },
-      ],
-    };
-    const layout = {
-      labelCol: {
-        span: 0,
-      },
-      wrapperCol: {
-        span: 24,
-      },
-    };
-
-    async function afterLoginSuccess() {
-      if (queryBindCode.value) {
-        await oauthApi.BindUser(queryBindCode.value);
-        notification.success({ message: "绑定第三方账号成功" });
-      }
-    }
-
-    const twoFactor = reactive({
-      loginId: "",
-      verifyCode: "",
-    });
-
-    const handleTwoFactorSubmit = async () => {
-      await userStore.loginByTwoFactor(twoFactor);
-      afterLoginSuccess();
-    };
-
-    const handleFinish = async () => {
-      loading.value = true;
-      try {
-        // formState.captcha = await doCaptchaValidate();
-        // if (!formState.captcha) {
-        //   return;
-        // }
-        const loginType = formState.loginType;
-        await userStore.login(loginType, toRaw(formState));
-        afterLoginSuccess();
-      } catch (e: any) {
-        //@ts-ignore
-        if (e.code === 10020) {
-          //双重认证
-          //@ts-ignore
-          twoFactor.loginId = e.data;
-          await nextTick();
-          verifyCodeInputRef.value.focus();
-        } else {
-          throw e;
-        }
-      } finally {
-        loading.value = false;
-        formState.captcha = null;
-      }
-    };
-
-    const handleFinishFailed = (errors: any) => {
-      utils.logger.log(errors);
-    };
-
-    const resetForm = () => {
-      formRef.value.resetFields();
-    };
-
-    const isLoginError = ref();
-
-    const sysPublicSettings = settingStore.getSysPublic;
-
-    function hasRegisterTypeEnabled() {
-      return sysPublicSettings.registerEnabled && (sysPublicSettings.usernameRegisterEnabled || sysPublicSettings.emailRegisterEnabled || sysPublicSettings.mobileRegisterEnabled || sysPublicSettings.smsLoginEnabled);
-    }
-
-    const captchaInputRef = ref();
-    const captchaInputForSmsCode = ref();
-
-    const isOauthOnly = computed(() => {
-      if (queryOauthOnly === "false" || queryOauthOnly === "0") {
-        return false;
-      }
-      return sysPublicSettings.oauthOnly && settingStore.isPlus && sysPublicSettings.oauthEnabled;
-    });
-
-    return {
-      t,
-      loading,
-      formState,
-      formRef,
-      rules,
-      layout,
-      isOauthOnly,
-      handleFinishFailed,
-      handleFinish,
-      resetForm,
-      isLoginError,
-      sysPublicSettings,
-      hasRegisterTypeEnabled,
-      twoFactor,
-      handleTwoFactorSubmit,
-      verifyCodeInputRef,
-      settingStore,
-      captchaInputRef,
-      captchaInputForSmsCode,
-      queryBindCode,
-    };
+const rules = {
+  mobile: [
+    {
+      required: true,
+      message: "请输入手机号",
+    },
+  ],
+  username: [
+    {
+      required: true,
+      message: "请输入用户名",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入登录密码",
+    },
+  ],
+  smsCode: [
+    {
+      required: true,
+      message: "请输入短信验证码",
+    },
+  ],
+  captcha: [
+    {
+      required: true,
+      message: "请进行验证码验证",
+    },
+  ],
+};
+const layout = {
+  labelCol: {
+    span: 0,
   },
+  wrapperCol: {
+    span: 24,
+  },
+};
+
+const twoFactor = reactive({
+  loginId: "",
+  verifyCode: "",
+});
+
+const passkeySupported = ref(false);
+const passkeyEnabled = ref(false);
+
+const checkPasskeySupport = () => {
+  passkeySupported.value = false;
+  if (typeof window !== "undefined" && "credentials" in navigator && "PublicKeyCredential" in window) {
+    passkeySupported.value = true;
+  }
+};
+
+const handlePasskeyLogin = async () => {
+  if (!passkeySupported.value) {
+    notification.error({ message: t("authentication.passkeyNotSupported") });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const optionsResponse: any = await request({
+      url: "/passkey/generateAuthentication",
+      method: "post",
+    });
+    const options = optionsResponse;
+
+    const credential = await (navigator.credentials as any).get({
+      publicKey: {
+        challenge: Uint8Array.from(atob(options.challenge.replace(/-/g, "+").replace(/_/g, "/")), c => c.charCodeAt(0)),
+        rpId: options.rpId,
+        allowCredentials: options.allowCredentials || [],
+        timeout: options.timeout || 60000,
+      },
+    });
+
+    if (!credential) {
+      throw new Error("Passkey认证失败");
+    }
+
+    const loginRes: any = await UserApi.loginByPasskey({
+      userId: optionsResponse.userId,
+      credential,
+      challenge: options.challenge,
+    });
+
+    await userStore.onLoginSuccess(loginRes);
+  } catch (e: any) {
+    console.error("Passkey登录失败:", e);
+    notification.error({ message: e.message || "Passkey登录失败" });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleFinish = async () => {
+  loading.value = true;
+  try {
+    const loginType = formState.loginType;
+    await userStore.login(loginType, toRaw(formState));
+    if (queryBindCode.value) {
+      await oauthApi.BindUser(queryBindCode.value);
+      notification.success({ message: "绑定第三方账号成功" });
+    }
+  } catch (e: any) {
+    if (e.code === 10020) {
+      twoFactor.loginId = e.data;
+      await nextTick();
+      verifyCodeInputRef.value.focus();
+    } else {
+      throw e;
+    }
+  } finally {
+    loading.value = false;
+    formState.captcha = null;
+  }
+};
+
+const handleFinishFailed = (errors: any) => {
+  utils.logger.log(errors);
+};
+
+const handleTwoFactorSubmit = async () => {
+  await userStore.loginByTwoFactor(twoFactor);
+  if (queryBindCode.value) {
+    await oauthApi.BindUser(queryBindCode.value);
+    notification.success({ message: "绑定第三方账号成功" });
+  }
+};
+
+const sysPublicSettings = settingStore.getSysPublic;
+
+const hasRegisterTypeEnabled = () => {
+  return sysPublicSettings.registerEnabled && (sysPublicSettings.usernameRegisterEnabled || sysPublicSettings.emailRegisterEnabled || sysPublicSettings.mobileRegisterEnabled || sysPublicSettings.smsLoginEnabled);
+};
+
+const isOauthOnly = computed(() => {
+  if (queryOauthOnly === "false" || queryOauthOnly === "0") {
+    return false;
+  }
+  return sysPublicSettings.oauthOnly && settingStore.isPlus && sysPublicSettings.oauthEnabled;
+});
+
+onMounted(() => {
+  checkPasskeySupport();
 });
 </script>
 
 <style lang="less">
 .login-page.main {
-  //margin: 20px !important;
   margin-bottom: 100px;
 
   .user-layout-login {
-    //label {
-    //  font-size: 14px;
-    //}
-
     .fs-icon {
-      // color: rgba(0, 0, 0, 0.45);
       margin-right: 4px;
     }
 
@@ -328,7 +344,6 @@ export default defineComponent({
       text-align: left;
       margin-top: 30px;
       margin-bottom: 30px;
-      //line-height: 22px;
 
       .item-icon {
         font-size: 24px;

packages/ui/certd-client/src/views/sys/authority/user/crud.tsx

@@ -269,7 +269,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           title: t("certd.roles"),
           type: "dict-select",
           dict: dict({
-            url: "/sys/authority/role/list",
+            url: "/basic/user/getSimpleRoles",
             value: "id",
             label: "name",
           }), // 数据字典