新增通行密钥登录

mail-vue/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.3.0",
+    "@simplewebauthn/browser": "^13.2.2",
     "@vueuse/components": "^14.1.0",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.8",

mail-vue/src/i18n/en.js

@@ -324,7 +324,18 @@ const en = {
     searchUser: 'Search by user',
     searchEmail: 'Search by Email',
     searchSender: 'Search by Sender',
-    userEmail: 'Email Address'
+    userEmail: 'Email Address',
+    passkeyLogin: 'Passkey Login',
+    passkeyEnabled: 'Passkey Login',
+    passkeyLoginFailed: 'Passkey login failed',
+    passkeys: 'Passkeys',
+    registerPasskey: 'Register Passkey',
+    passkeyId: 'Passkey ID',
+    passkeyRegSuccess: 'Passkey registered successfully',
+    passkeyRegFailed: 'Failed to register passkey',
+    passkeyRegistered: 'Delete the current passkey to register a new one.',
+    deletePasskeyConfirm: 'Are you sure you want to delete this passkey?',
+    deleteSuccess: 'Deleted successfully'
 }
 
 export default en

mail-vue/src/i18n/zh.js

@@ -324,6 +324,17 @@ const zh = {
     searchUser: '搜索用户',
     searchEmail: '搜索邮箱',
     searchSender: '搜索发件人',
-    userEmail: '用户邮箱'
+    userEmail: '用户邮箱',
+    passkeyLogin: '通行密钥登录',
+    passkeyEnabled: '开启通行密钥',
+    passkeyLoginFailed: '通行密钥登录失败',
+    passkeys: '通行密钥',
+    registerPasskey: '注册通行密钥',
+    passkeyId: '密钥ID',
+    passkeyRegSuccess: '通行密钥注册成功',
+    passkeyRegFailed: '通行密钥注册失败',
+    passkeyRegistered: '删除当前密钥后可重新注册。',
+    deletePasskeyConfirm: '确定要删除这个通行密钥吗？',
+    deleteSuccess: '删除成功'
 }
 export default zh

mail-vue/src/request/login.js

@@ -10,4 +10,12 @@ export function logout() {
 
 export function register(form) {
     return http.post('/register', form)
+}
+
+export function getWebauthnLoginOptions(email) {
+    return http.get(`/login/webauthn/options?email=${email}`)
+}
+
+export function verifyWebauthnLogin(data) {
+    return http.post('/login/webauthn/verify', data)
 }

mail-vue/src/request/my.js

@@ -12,3 +12,19 @@ export function userDelete() {
     return http.delete('/my/delete')
 }
 
+export function getWebauthnRegisterOptions() {
+    return http.get('/my/webauthn/register/options')
+}
+
+export function verifyWebauthnRegister(data) {
+    return http.post('/my/webauthn/register/verify', data)
+}
+
+export function getWebauthnList() {
+    return http.get('/my/webauthn/list')
+}
+
+export function deleteWebauthn(id) {
+    return http.delete(`/my/webauthn/${encodeURIComponent(id)}`)
+}
+

mail-vue/src/store/setting.js

@@ -6,6 +6,7 @@ export const useSettingStore = defineStore('setting', {
         settings: {
             r2Domain: '',
             loginOpacity: 1.00,
+            passkeyEnabled: 1,
         },
         lang: '',
     }),

mail-vue/src/views/login/index.vue

@@ -47,6 +47,7 @@
           <el-button class="btn" v-if="settingStore.settings.linuxdoSwitch"  style="margin-top: 10px"  @click="linuxDoLogin">
             <el-avatar src="/image/linuxdo.webp" :size="18" style="margin-right: 10px" />LinuxDo
           </el-button>
+          <el-button class="btn" style="margin-top: 10px" v-if="settingStore.settings.passkeyEnabled" @click="handlePasskeyLogin">{{ $t('passkeyLogin') }}</el-button>
         </div>
         <div v-show="show !== 'login'">
           <el-input class="email-input" v-model="registerForm.email" type="text" :placeholder="$t('emailAccount')"
@@ -149,8 +150,8 @@
 <script setup>
 import router from "@/router";
 import {computed, nextTick, reactive, ref} from "vue";
-import {login} from "@/request/login.js";
-import {register} from "@/request/login.js";
+import {login, register, getWebauthnLoginOptions, verifyWebauthnLogin} from "@/request/login.js";
+import { startAuthentication } from '@simplewebauthn/browser';
 import {isEmail} from "@/utils/verify-utils.js";
 import {useSettingStore} from "@/store/setting.js";
 import {useAccountStore} from "@/store/account.js";
@@ -350,6 +351,29 @@ function bind() {
   })
 }
 
+const handlePasskeyLogin = async () => {
+  if (!form.email) {
+    ElMessage({ message: t('emptyEmailMsg'), type: 'error', plain: true })
+    return
+  }
+  let email = form.email + (settingStore.settings.loginDomain === 0 ? suffix.value : '');
+  if (!isEmail(email)) {
+    ElMessage({ message: t('notEmailMsg'), type: 'error', plain: true })
+    return
+  }
+
+  try {
+    const options = await getWebauthnLoginOptions(email);
+    const authResp = await startAuthentication(options);
+    const data = await verifyWebauthnLogin({ challengeId: options.challengeId, response: authResp });
+    const token = data.token || data;
+    await saveToken(token);
+  } catch (error) {
+    console.error('Passkey login failed:', error);
+    ElMessage({ message: t('passkeyLoginFailed'), type: 'error', plain: true });
+  }
+}
+
 const submit = () => {
 
   if (!form.email) {