chore: passkey登录优化

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

@@ -101,4 +101,5 @@ export default {
   registerPasskey: "Register Passkey",
   deviceName: "Device Name",
   deviceNameHelper: "Please enter the device name， used to identify the device",
+  passkeyRegisterHelper: "Site domain change will invalidate passkey",
 };

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

@@ -103,4 +103,5 @@ export default {
   registerPasskey: "注册Passkey",
   deviceName: "设备名称",
   deviceNameHelper: "请输入当前设备名称，绑定多个时好做区分",
+  passkeyRegisterHelper: "1、站点域名变更会导致passkey失效;\n2、同一设备同一个用户绑定多次只有最后一次的有效，之前绑定的会失效，需要手动删除",
 };

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

@@ -115,23 +115,22 @@ export async function generatePasskeyRegistrationOptions() {
   });
 }
 
-export async function verifyPasskeyRegistration(userId: number, response: any, challenge: string) {
+export async function verifyPasskeyRegistration(response: any, challenge: string) {
   return await request({
     url: "/passkey/verifyRegistration",
     method: "post",
-    data: { userId, response, challenge },
+    data: { response, challenge },
   });
 }
 
-export async function generatePasskeyAuthenticationOptions(userId: number) {
+export async function generatePasskeyAuthenticationOptions() {
   return await request({
     url: "/passkey/generateAuthentication",
     method: "post",
-    data: { userId },
   });
 }
 
-export async function loginByPasskey(form: { userId: number; credential: any; challenge: string }) {
+export async function loginByPasskey(form: { credential: any; challenge: string }) {
   return await request({
     url: "/loginByPasskey",
     method: "post",
@@ -139,7 +138,7 @@ export async function loginByPasskey(form: { userId: number; credential: any; ch
   });
 }
 
-export async function registerPasskey(form: { userId: number; response: any; challenge: string }) {
+export async function registerPasskey(form: { response: any; challenge: string }) {
   return await request({
     url: "/passkey/register",
     method: "post",

packages/ui/certd-client/src/style/common.less

@@ -295,7 +295,7 @@ h6 {
 }
 
 .helper {
-  color: #aeaeae;
+  color: #8f8f8f;
   font-size: 12px;
   margin-top: 3px;
   margin-bottom: 3px;

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

@@ -58,14 +58,14 @@ export async function OauthBoundUrl(type: string) {
 
 export async function GetPasskeys() {
   return await request({
-    url: "/mine/passkeys",
+    url: "/mine/passkey/list",
     method: "POST",
   });
 }
 
 export async function UnbindPasskey(id: number) {
   return await request({
-    url: "/mine/unbindPasskey",
+    url: "/mine/passkey/unbind",
     method: "POST",
     data: { id },
   });
@@ -110,39 +110,23 @@ export interface PasskeyCredential {
 
 export async function generatePasskeyRegistrationOptions() {
   return await request({
-    url: "/passkey/generateRegistration",
+    url: "/mine/passkey/generateRegistration",
     method: "post",
   });
 }
 
-export async function verifyPasskeyRegistration(userId: number, response: any, challenge: string, deviceName: string) {
+export async function verifyPasskeyRegistration(response: any, challenge: string, deviceName: string) {
   return await request({
-    url: "/passkey/verifyRegistration",
+    url: "/mine/passkey/verifyRegistration",
     method: "post",
-    data: { userId, response, challenge, deviceName },
+    data: { response, challenge, deviceName },
   });
 }
 
-export async function generatePasskeyAuthenticationOptions(userId: number) {
+export async function registerPasskey(response: any, challenge: string, deviceName: string) {
   return await request({
-    url: "/passkey/generateAuthentication",
+    url: "/mine/passkey/register",
     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 },
+    data: { response, challenge, deviceName },
   });
 }

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

@@ -33,7 +33,11 @@
             <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>
+              <span>
+                <div class="text-sm text-gray-500">注册时间：{{ formatDate(passkey.registeredAt) }}</div>
+                <div class="text-sm text-gray-500">最后使用：{{ formatDate(passkey.updateTime) }}</div>
+              </span>
+
               <a-button type="primary" danger @click="unbindPasskey(passkey.id)">解绑</a-button>
             </div>
           </div>
@@ -42,6 +46,9 @@
           <div v-if="!passkeySupported" class="text-red-500 text-sm mt-2">
             {{ t("authentication.passkeyNotSupported") }}
           </div>
+          <pre class="helper"
+            >{{ t("authentication.passkeyRegisterHelper") }}
+          </pre>
         </a-descriptions-item>
         <a-descriptions-item :label="t('common.handle')">
           <a-button type="primary" @click="doUpdate">{{ t("authentication.updateProfile") }}</a-button>
@@ -59,10 +66,11 @@ import ChangePasswordButton from "/@/views/certd/mine/change-password-button.vue
 import { useI18n } from "/src/locales";
 import { useUserProfile } from "./use";
 import { usePasskeyRegister } from "./use";
-import { message, Modal } from "ant-design-vue";
+import { message, Modal, notification } from "ant-design-vue";
 import { useSettingStore } from "/@/store/settings";
 import { isEmpty } from "lodash-es";
 import { dict } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
 
 const { t } = useI18n();
 
@@ -190,9 +198,15 @@ async function doRegisterPasskey(deviceName: string) {
     const res: any = await api.generatePasskeyRegistrationOptions();
     const options = res;
 
-    navigator.credentials.query({
-      publicKey: options,
-    });
+    // navigator.credentials.query({
+    //   publicKey: options,
+    // });
+
+    // const excludeCredentials = passkeys.value.map(item => ({
+    //   id: new TextEncoder().encode(item.passkeyId),
+    //   type: "public-key",
+    // }));
+
     const credential = await (navigator.credentials as any).create({
       publicKey: {
         challenge: Uint8Array.from(atob(options.challenge.replace(/-/g, "+").replace(/_/g, "/")), c => c.charCodeAt(0)),
@@ -200,9 +214,9 @@ async function doRegisterPasskey(deviceName: string) {
         pubKeyCredParams: options.pubKeyCredParams,
         timeout: options.timeout || 60000,
         attestation: options.attestation,
-        excludeCredentials: options.excludeCredentials || [],
+        // excludeCredentials: excludeCredentials,
         user: {
-          id: Uint8Array.from([res.userId]),
+          id: new TextEncoder().encode(options.userId + ""),
           name: userInfo.value.username,
           displayName: deviceName,
         },
@@ -222,18 +236,20 @@ async function doRegisterPasskey(deviceName: string) {
         clientDataJSON: toBase64Url(credential.response.clientDataJSON),
       },
     };
+    console.log("credential", credential, response);
+    debugger;
 
-    const verifyRes: any = await api.verifyPasskeyRegistration(userInfo.value.id, response, options.challenge, deviceName);
+    const verifyRes: any = await api.verifyPasskeyRegistration(response, options.challenge, deviceName);
     await loadPasskeys();
   } catch (e: any) {
     console.error("Passkey注册失败:", e);
-    Modal.error({ title: "错误", content: e.message || "Passkey注册失败" });
+    notification.error({ message: "错误", description: e.message || "Passkey注册失败" });
   }
 }
 
 const formatDate = (dateString: string) => {
   if (!dateString) return "";
-  return new Date(dateString).toLocaleString("zh-CN");
+  return dayjs(dateString).format("YYYY-MM-DD HH:mm:ss");
 };
 
 const checkPasskeySupport = () => {

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

@@ -233,7 +233,6 @@ const handlePasskeyLogin = async () => {
     }
 
     const loginRes: any = await UserApi.loginByPasskey({
-      userId: optionsResponse.userId,
       credential,
       challenge: options.challenge,
     });