feat: 添加 passkey 登录功能

2025-05-08 14:13:32 +08:00
parent 56dcbc33e0
commit bc4ae93d7d
20 changed files with 1347 additions and 159 deletions
@@ -2,7 +2,7 @@
 import { reactive, ref, onMounted } from 'vue'; // computed 不再直接使用，移除
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-// Removed Passkey import: import { startAuthentication } from '@simplewebauthn/browser';
+import { startAuthentication } from '@simplewebauthn/browser';
 import { useAuthStore } from '../stores/auth.store';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import VueRecaptcha from 'vue3-recaptcha2'; // 使用默认导入
@@ -98,7 +98,48 @@ onMounted(() => {
  authStore.fetchCaptchaConfig();
 });

-// --- Passkey Login Handler Removed ---
+// --- Passkey Login Handler ---
+const handlePasskeyLogin = async () => {
+  // TODO: Implement Passkey login logic
+  // 1. Get username (assume it's available in credentials.username for now)
+  if (!credentials.username) {
+    // TODO: Handle missing username, maybe show an error
+    alert(t('login.error.usernameRequiredForPasskey'));
+    return;
+  }
+  try {
+    isLoading.value = true;
+    error.value = null; // Clear previous errors
+
+    // Step 1: Get authentication options from the server
+    const optionsResponse = await fetch('/api/v1/auth/passkey/authentication-options', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: credentials.username }),
+    });
+    if (!optionsResponse.ok) {
+      const errData = await optionsResponse.json();
+      throw new Error(errData.message || t('login.error.passkeyAuthOptionsFailed'));
+    }
+    const authOptions = await optionsResponse.json();
+
+    // Step 2: Use WebAuthn API to authenticate
+    const authenticationResult = await startAuthentication(authOptions);
+
+    // Step 3: Send authentication result to the server
+    await authStore.loginWithPasskey(credentials.username, authenticationResult);
+
+  } catch (err: any) {
+    console.error('Passkey login error:', err);
+    error.value = err.message || t('login.error.passkeyAuthFailed');
+    // Potentially reset CAPTCHA if it was involved, though typically not for passkey flows directly
+    // if (publicCaptchaConfig.value?.enabled) {
+    //   resetCaptchaWidget();
+    // }
+  } finally {
+    isLoading.value = false;
+  }
+};

 </script>
 <template>
@@ -198,8 +239,13 @@ onMounted(() => {
            {{ isLoading ? t('login.loggingIn') : (loginRequires2FA ? t('login.verifyButton') : t('login.loginButton')) }}
          </button>
 
-          <!-- Passkey Login Button Removed -->
-
+          <!-- Passkey Login Button -->
+          <div class="mt-4 text-center">
+           <button type="button" @click="handlePasskeyLogin" :disabled="isLoading"
+                   class="w-full py-3 px-4 bg-secondary text-white border-none rounded-lg text-base font-semibold cursor-pointer shadow-md transition-colors duration-200 ease-in-out hover:bg-secondary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed disabled:opacity-70">
+             {{ isLoading ? t('login.loggingIn') : t('login.loginWithPasskey') }}
+           </button>
+         </div>
        </form>
      </div>
    </div>
@@ -50,7 +50,49 @@
                </form>
              </div>
              <hr class="border-border/50">
-              <!-- Passkey Section Removed -->
+              <!-- Passkey Management -->
+              <div class="settings-section-content">
+                <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.passkey.title') }}</h3>
+                <p class="text-sm text-text-secondary mb-4">{{ $t('settings.passkey.description') }}</p>
+                <button @click="handleRegisterNewPasskey" :disabled="passkeyLoading"
+                        class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                  {{ passkeyLoading ? $t('common.loading') : $t('settings.passkey.registerNewButton') }}
+                </button>
+                <p v-if="passkeyMessage" :class="['mt-3 text-sm', passkeySuccess ? 'text-success' : 'text-error']">{{ passkeyMessage }}</p>
+
+                <!-- Display list of registered passkeys -->
+                <div class="mt-6">
+                  <h4 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.passkey.registeredKeysTitle') }}</h4>
+                  <div v-if="authStore.passkeysLoading" class="p-4 text-center text-text-secondary italic">
+                    {{ $t('common.loading') }}
+                  </div>
+                  <div v-else-if="authStore.passkeys && authStore.passkeys.length > 0">
+                    <ul class="space-y-3">
+                      <li v-for="key in authStore.passkeys" :key="key.credentialID" class="flex flex-col sm:flex-row justify-between items-start sm:items-center p-3 border border-border rounded-md bg-header/20 hover:bg-header/40 transition-colors duration-150">
+                        <div class="flex-grow mb-2 sm:mb-0">
+                          <span class="block font-medium text-foreground text-sm">
+                            {{ key.name || $t('settings.passkey.unnamedKey') }}
+                            <span class="text-xs text-text-tertiary ml-1">(ID: ...{{ key.credentialID.slice(-8) }})</span>
+                          </span>
+                          <div class="text-xs text-text-secondary mt-1 space-x-2">
+                            <span>{{ $t('settings.passkey.createdDate') }}: {{ formatDate(key.creationDate) }}</span>
+                            <span v-if="key.lastUsedDate">{{ $t('settings.passkey.lastUsedDate') }}: {{ formatDate(key.lastUsedDate) }}</span>
+                            <span v-if="key.transports && key.transports.length > 0" class="capitalize">({{ key.transports.join(', ') }})</span>
+                          </div>
+                        </div>
+                        <button @click="handleDeletePasskey(key.credentialID)"
+                                :disabled="passkeyDeleteLoadingStates[key.credentialID]"
+                                class="px-3 py-1.5 bg-error text-error-text rounded-md text-xs font-medium hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out self-start sm:self-center">
+                          {{ passkeyDeleteLoadingStates[key.credentialID] ? $t('common.loading') : $t('common.delete') }}
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
+                  <p v-else class="text-sm text-text-secondary italic">{{ $t('settings.passkey.noKeysRegistered') }}</p>
+                  <p v-if="passkeyDeleteError" class="mt-3 text-sm text-error">{{ passkeyDeleteError }}</p>
+                </div>
+              </div>
+              <hr class="border-border/50">
              <!-- 2FA -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.twoFactor.title') }}</h3>
@@ -670,7 +712,7 @@ import { storeToRefs } from 'pinia';
 import { availableLocales } from '../i18n'; // 导入可用语言列表
 import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
 import { isAxiosError } from 'axios'; // 单独导入 isAxiosError
-// Removed Passkey import: import { startRegistration } from '@simplewebauthn/browser';
+import { startRegistration } from '@simplewebauthn/browser';

 const authStore = useAuthStore();
 const settingsStore = useSettingsStore();
@@ -708,8 +750,8 @@ const {
    terminalScrollbackLimitNumber, // NEW: Import terminal scrollback limit getter
    fileManagerShowDeleteConfirmationBoolean, // NEW: Import file manager delete confirmation getter
 } = storeToRefs(settingsStore);
- 
- // Removed Passkey state import from authStore
+
+const { passkeys, passkeysLoading } = storeToRefs(authStore); // Import passkey state


 // --- Local state for forms ---
@@ -803,8 +845,13 @@ const captchaForm = reactive<UpdateCaptchaSettingsDto>({ // Use reactive for the
 const captchaLoading = ref(false);
 const captchaMessage = ref('');
 const captchaSuccess = ref(false);
-// Removed Passkey Deletion State

+// --- Passkey State ---
+const passkeyLoading = ref(false);
+const passkeyMessage = ref('');
+const passkeySuccess = ref(false);
+const passkeyDeleteLoadingStates = reactive<Record<string, boolean>>({});
+const passkeyDeleteError = ref<string | null>(null);

 // 提供一些常用的时区供选择
 const commonTimezones = ref([
@@ -1128,13 +1175,86 @@ const openStyleCustomizer = () => {
    appearanceStore.toggleStyleCustomizer(true);
 };

-// --- Passkey state & methods Removed ---
+// --- Passkey Methods ---
+const handleRegisterNewPasskey = async () => {
+  passkeyLoading.value = true;
+  passkeyMessage.value = '';
+  passkeySuccess.value = false;
+
+  const username = authStore.user?.username;
+  if (!username) {
+    passkeyMessage.value = t('settings.passkey.error.userNotLoggedIn');
+    passkeyLoading.value = false;
+    return;
+  }
+
+  try {
+    // 1. Get registration options from the server
+    const registrationOptions = await authStore.getPasskeyRegistrationOptions(username);
+
+    // 2. Start WebAuthn registration ceremony
+    const registrationResult = await startRegistration(registrationOptions);
+
+    // 3. Send registration result to the server
+    await authStore.registerPasskey(username, registrationResult);
+
+    passkeyMessage.value = t('settings.passkey.success.registered');
+    passkeySuccess.value = true;
+    await authStore.fetchPasskeys(); // Refresh passkey list
+  } catch (error: any) {
+    console.error('Passkey 注册失败:', error);
+    // Check if the error is from startRegistration (e.g., user cancellation)
+    if (error.name === 'InvalidStateError' || error.message.includes('cancelled')) {
+        passkeyMessage.value = t('settings.passkey.error.registrationCancelled');
+    } else {
+        passkeyMessage.value = error.response?.data?.message || error.message || t('settings.passkey.error.registrationFailed');
+    }
+    passkeySuccess.value = false;
+  } finally {
+    passkeyLoading.value = false;
+  }
+};
+
+const handleDeletePasskey = async (credentialID: string) => {
+  if (!confirm(t('settings.passkey.confirmDelete'))) return;
+
+  passkeyDeleteLoadingStates[credentialID] = true;
+  passkeyDeleteError.value = null;
+  passkeyMessage.value = ''; // Clear previous general passkey messages
+  try {
+    await authStore.deletePasskey(credentialID);
+    // The authStore.deletePasskey action should internally call fetchPasskeys to refresh the list.
+    // So, no need to call it explicitly here if the store handles it.
+    // If not, uncomment the line below:
+    // await authStore.fetchPasskeys();
+    passkeyMessage.value = t('settings.passkey.success.deleted');
+    passkeySuccess.value = true; // Use general success for feedback
+  } catch (error: any) {
+    console.error(`删除 Passkey ${credentialID} 失败:`, error);
+    passkeyDeleteError.value = error.message || t('settings.passkey.error.deleteFailedGeneral');
+    passkeySuccess.value = false;
+  } finally {
+    passkeyDeleteLoadingStates[credentialID] = false;
+  }
+};

 // --- Formatting function (kept in case other parts need it, can be removed if unused) ---
-const formatDate = (timestamp: number | undefined) => {
-    if (!timestamp) return t('statusMonitor.notAvailable');
+const formatDate = (dateInput: string | number | Date | undefined): string => {
+    if (!dateInput) return t('statusMonitor.notAvailable');
    try {
-        return new Date(timestamp * 1000).toLocaleString();
+        const date = new Date(dateInput);
+        // Check if date is valid
+        if (isNaN(date.getTime())) {
+            // Try parsing as seconds if it's a number (common for Unix timestamps)
+            if (typeof dateInput === 'number') {
+                const dateFromSeconds = new Date(dateInput * 1000);
+                if (!isNaN(dateFromSeconds.getTime())) {
+                    return dateFromSeconds.toLocaleString();
+                }
+            }
+            return t('statusMonitor.notAvailable');
+        }
+        return date.toLocaleString();
    } catch (e) {
        console.error("Error formatting date:", e);
        return t('statusMonitor.notAvailable');
@@ -1439,7 +1559,9 @@ onMounted(async () => {
  await fetchIpBlacklist(); // Fetch current blacklist entries
  await settingsStore.loadCaptchaSettings(); // <-- Load CAPTCHA settings
  await checkLatestVersion(); // <-- Check for latest version on mount
-  // Removed fetchPasskeys call: await authStore.fetchPasskeys();
+  if (authStore.isAuthenticated) {
+    await authStore.fetchPasskeys();
+  }
  // Initial settings (including language, whitelist, blacklist config) are loaded in main.ts via settingsStore.loadInitialSettings()
 });