From 6ff9249dc15812d64df0663845f1704d8217f48c Mon Sep 17 00:00:00 2001
From: itcsx <itcsx@126.com>
Date: Mon, 3 Aug 2026 09:03:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

指纹验证
---
 BiometricEnrollCard.vue | 699 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 699 insertions(+)
 create mode 100644 BiometricEnrollCard.vue

diff --git a/BiometricEnrollCard.vue b/BiometricEnrollCard.vue
new file mode 100644
index 0000000..905fe03
--- /dev/null
+++ b/BiometricEnrollCard.vue
@@ -0,0 +1,699 @@
+<template>
+  <!-- ============================================================
+       Biometric login enrollment card
+       Shown on MyProfile.vue below the personal-details card.
+       Two related toggles:
+         1. Biometric login — enrolls / removes this device's
+            fingerprint / face / device PIN for signing in.
+         2. Biometric for epayslip / taxation — once biometric login
+            is enabled, lets the user skip re-typing the epayslip
+            password on the enquiry pages. Requires the user to prove
+            they know the epayslip password at enable-time.
+
+       The "credential id" of the WebAuthn registration is stashed in
+       localStorage under `biometric_<username>` so the login page can
+       show the "Sign in with fingerprint" button.
+
+       The card hides itself entirely on devices that have a browser
+       but no platform authenticator (e.g. a desktop without Windows
+       Hello / Touch ID configured).
+       ============================================================ -->
+  <section
+    v-if="showCard"
+    class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft sm:p-6"
+  >
+    <header class="mb-4 flex items-center justify-between gap-3">
+      <div>
+        <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500">
+          {{ t('MyProfileView.biometric_login') || 'Biometric login' }}
+        </h3>
+        <p class="mt-1 text-xs text-slate-400">
+          {{ statusText }}
+        </p>
+      </div>
+      <a-spin v-if="enrolling || removing" :spinning="true" size="small" />
+    </header>
+
+    <div v-if="!isSupported" class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
+      {{ t('MyProfileView.biometric_not_supported') || 'This browser does not support biometric login. Try the latest Chrome, Edge, Safari, or Firefox.' }}
+    </div>
+
+    <div v-else-if="hasPlatformAuthenticator === false" class="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
+      <p class="font-medium">{{ t('MyProfileView.biometric_no_authenticator') || 'No biometric authenticator on this device' }}</p>
+      <p class="mt-1 text-xs text-amber-700">
+        {{ t('MyProfileView.biometric_no_authenticator_detail') || 'Enable Windows Hello (Settings → Accounts → Sign-in options), Touch ID, or a device PIN, then refresh this page.' }}
+      </p>
+    </div>
+
+    <div v-else-if="hasPlatformAuthenticator === null" class="rounded-lg bg-slate-50 px-4 py-3 text-sm text-slate-500">
+      {{ t('MyProfileView.biometric_checking') || 'Checking biometric support…' }}
+    </div>
+
+    <div v-else class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm text-slate-700">
+          {{ enrolled
+            ? (t('MyProfileView.biometric_enrolled_with') || `Enrolled on ${enrolledDeviceName || 'this device'}`)
+            : (t('MyProfileView.biometric_use_prompt') || 'Sign in with fingerprint, face, or device PIN on this device.') }}
+        </p>
+        <p v-if="enrolled && enrolledAt" class="text-xs text-slate-400">
+          {{ t('MyProfileView.biometric_enrolled_on') || 'Enrolled on' }} {{ formatDate(enrolledAt) }}
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <a-switch
+          :checked="enrolled"
+          :loading="enrolling || removing"
+          @change="onToggle"
+        />
+      </div>
+    </div>
+
+    <!-- Second toggle — biometric for epayslip / taxation.
+         Only visible when biometric login itself is enrolled (the local
+         `enrolled` state is set from localStorage on mount, so the second
+         toggle appears as soon as the user has a stored credential id).
+         The server-side guard in EnableBiometricForEpayslip also re-checks
+         that biometric_credential_id is not null. -->
+    <div
+      v-if="enrolled"
+      class="mt-4 flex flex-col gap-3 border-t border-slate-100 pt-4 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div class="flex flex-col gap-1">
+        <p class="text-sm text-slate-700">
+          {{ t('MyProfileView.biometric_for_epayslip_prompt') || 'Use biometric for epayslip / taxation enquiry' }}
+        </p>
+        <p class="text-xs text-slate-400">
+          {{
+            biometricForEpayslip
+              ? (t('MyProfileView.biometric_for_epayslip_enabled') || 'You can open epayslip / taxation with fingerprint or face.')
+              : (t('MyProfileView.biometric_for_epayslip_disabled') || 'You will need to type your epayslip password each time.')
+          }}
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <a-spin v-if="epayslipSaving" :spinning="true" size="small" />
+        <a-switch
+          v-else
+          :checked="biometricForEpayslip"
+          :disabled="epayslipSaving"
+          @change="onEpayslipToggle"
+        />
+      </div>
+    </div>
+
+    <!-- Confirm-remove modal — kept inline for compactness -->
+    <a-modal
+      v-model:open="confirmRemoveOpen"
+      :title="t('MyProfileView.biometric_remove_title') || 'Remove biometric login?'"
+      :ok-text="t('buttons.remove') || 'Remove'"
+      :ok-type="'danger'"
+      :cancel-text="t('buttons.cancel') || 'Cancel'"
+      @ok="onConfirmRemove"
+    >
+      <p>{{ t('MyProfileView.biometric_remove_body') || 'You will need to type your password to sign in next time. You can re-enroll anytime.' }}</p>
+    </a-modal>
+
+    <!-- Password re-verification modal — shown when the user toggles
+         biometric login ON. Requires the user to prove they know the
+         account password before WebAuthn enrollment starts. Closes
+         silently on Cancel / X / ESC; clears `passwordInput` via the
+         watcher when closed. -->
+    <a-modal
+      v-model:open="confirmPasswordOpen"
+      :title="t('MyProfileView.biometric_enable_title') || 'Verify your password'"
+      :ok-text="t('buttons.confirm') || 'Confirm'"
+      :cancel-text="t('buttons.cancel') || 'Cancel'"
+      :confirm-loading="verifying"
+      :ok-button-props="{ disabled: !passwordInput }"
+      @ok="onConfirmPassword"
+    >
+      <p class="mb-4 text-sm text-slate-600">
+        {{ t('MyProfileView.biometric_enable_prompt') || 'Enter your password to enable biometric login on this device. This prevents someone from enrolling their fingerprint on a stolen or unattended device without your knowledge.' }}
+      </p>
+      <a-form layout="vertical">
+        <a-form-item
+          :label="t('LoginView.password') || 'Password'"
+          :rules="[{ required: true, message: t('LoginView.pls_input_password') || 'Please enter your password' }]"
+        >
+          <a-input-password
+            v-model:value="passwordInput"
+            :placeholder="t('LoginView.password') || 'Password'"
+            size="large"
+            @press-enter="onConfirmPassword"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- Epayslip password modal — shown when the user enables
+         "biometric for epayslip". Re-uses passwordInput state.
+         Disable flow needs no password (the user is just opting out
+         of a convenience), so it calls disableBiometricForEpayslip
+         directly. -->
+    <a-modal
+      v-model:open="epayslipPasswordOpen"
+      :title="t('MyProfileView.biometric_for_epayslip_enable_title') || 'Verify your epayslip password'"
+      :ok-text="t('buttons.confirm') || 'Confirm'"
+      :cancel-text="t('buttons.cancel') || 'Cancel'"
+      :confirm-loading="epayslipSaving"
+      :ok-button-props="{
+        type: 'primary',
+        disabled: !passwordInput,
+        style: { backgroundColor: '#1677ff', borderColor: '#1677ff', color: '#ffffff' }
+      }"
+      @ok="onConfirmEpayslipPassword"
+    >
+      <p class="mb-4 text-sm text-slate-600">
+        {{ t('MyProfileView.biometric_for_epayslip_password_prompt') || 'Enter your epayslip password to confirm. After this you can open epayslip / taxation with fingerprint or face instead of typing it again.' }}
+      </p>
+      <a-form layout="vertical">
+        <a-form-item
+          :label="t('MyProfileView.epayslip_password') || 'Epayslip password'"
+          :rules="[{ required: true, message: t('LoginView.pls_input_password') || 'Please enter your password' }]"
+        >
+          <a-input-password
+            v-model:value="passwordInput"
+            :placeholder="t('MyProfileView.epayslip_password') || 'Epayslip password'"
+            size="large"
+            @press-enter="onConfirmEpayslipPassword"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { startRegistration } from '@simplewebauthn/browser'
+import { notification, message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+import userProfileService from '@/service/UserProfileService'
+
+const props = defineProps<{
+  /** HR+ username — used as the localStorage key prefix. */
+  username: string
+  /** Current value of security_user.biometric_for_epayslip — drives the
+   * switch's checked state and the helper-text copy. */
+  biometricForEpayslipInitial?: boolean
+}>()
+
+const { t } = useI18n()
+
+// ===== State =====
+const enrolling = ref(false)
+const removing = ref(false)
+const enrolled = ref(false)
+const enrolledDeviceName = ref<string | null>(null)
+const enrolledAt = ref<Date | null>(null)
+const confirmRemoveOpen = ref(false)
+// Password re-verification before enabling biometric login. This prevents
+// someone from enrolling their fingerprint on a stolen / unattended device
+// without the user explicitly proving they know the account password.
+//   confirmPasswordOpen  — controls the modal visibility
+//   passwordInput        — bound to the password input field
+//   verifying            — disables the OK button + shows a spinner while
+//                          useLogin is in flight
+const confirmPasswordOpen = ref(false)
+const passwordInput = ref('')
+const verifying = ref(false)
+
+// ===== Epayslip / taxation biometric sub-toggle =====
+// Mirrors security_user.biometric_for_epayslip. The initial value is
+// passed in as a prop from MyProfile (which reads it from
+// UserProfileDisplayData); we keep a local copy so the switch can
+// optimistically flip when the user toggles, then commit to the server.
+const biometricForEpayslip = ref(!!props.biometricForEpayslipInitial)
+const epayslipSaving = ref(false)
+const epayslipPasswordOpen = ref(false)
+
+// Clear the password field whenever either modal closes (cancel, X, OK, ESC,
+// or backdrop click). Otherwise the next open would pre-fill with the
+// previous value.
+watch(confirmPasswordOpen, (open) => {
+  if (!open) passwordInput.value = ''
+})
+watch(epayslipPasswordOpen, (open) => {
+  if (!open) passwordInput.value = ''
+})
+
+const isSupported = computed(() =>
+  typeof window !== 'undefined' &&
+  typeof window.PublicKeyCredential === 'function'
+)
+
+// Tri-state probe for the device's biometric capability.
+//   null  → still loading (probe in flight or not started)
+//   true  → the device has a user-verifying platform authenticator
+//   false → the browser supports WebAuthn but no biometric is available
+//
+// isUserVerifyingPlatformAuthenticatorAvailable() is the W3C-standard
+// check: it returns true only when the device has a biometric / PIN
+// authenticator the browser can use to satisfy "user verification".
+// Older / non-biometric devices return false, which means we should
+// hide the toggle entirely instead of letting the user click into
+// a failing flow.
+const hasPlatformAuthenticator = ref<boolean | null>(
+  isSupported.value ? null : false,
+)
+
+if (isSupported.value && typeof PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable === 'function') {
+  PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
+    .then((available) => {
+      hasPlatformAuthenticator.value = !!available
+    })
+    .catch(() => {
+      // Probe can fail on locked-down browsers. Default to "show the
+      // toggle" — the call-time catch in enroll() will still surface
+      // a friendly error if the user actually tries.
+      hasPlatformAuthenticator.value = true
+    })
+}
+
+// Only show the card if either:
+//   - the device DOES have a platform authenticator, or
+//   - the user has already enrolled on this device (so we need the
+//     card to render the "remove" toggle even if the current
+//     authenticator is no longer available, e.g. the user replaced
+//     their fingerprint scanner but the credential still works).
+const showCard = computed(() => {
+  if (!isSupported.value) return false
+  if (enrolled.value) return true
+  return hasPlatformAuthenticator.value === true
+})
+
+// localStorage key — the login page reads this same key to decide
+// whether to show the fingerprint button.
+const storageKey = computed(() => `biometric_${props.username}`)
+
+// Best-effort error message extraction. Handles three error shapes:
+//   1. Axios: error.response.data is the server body (string or object)
+//   2. WebAuthn/JS: err is a DOMException / SyntaxError with .name + .message
+//   3. Plain string thrown by our own service
+// Returns a single non-empty human-readable string.
+const normalizeError = (err: any): string => {
+  if (err == null) return 'Unknown error'
+  if (typeof err === 'string') return err
+  // Axios error: prefer the server's body when present
+  if (err.response?.data != null) {
+    const data = err.response.data
+    if (typeof data === 'string') return data
+    if (typeof data === 'object') {
+      // Common ASP.NET ValidationException shape: { message, ... } or
+      // a string that came from WebMessages.GetString.
+      if (typeof data.message === 'string' && data.message) return data.message
+      if (typeof data.error === 'string' && data.error) return data.error
+      if (typeof data.title === 'string' && data.title) return data.title
+      // Last resort: stringify the body. Try JSON first (avoids
+      // "[object Object]" for plain objects) then fall back to String.
+      try { return JSON.stringify(data) } catch { return String(data) }
+    }
+  }
+  // WebAuthn / DOMException / Error
+  if (err.name && err.message) return `${err.name}: ${err.message}`
+  if (err.message) return err.message
+  return String(err)
+}
+
+// Coerce the BeginBiometricRegistration response into a
+// PublicKeyCredentialCreationOptionsJSON object that
+// @simplewebauthn/browser can consume.
+//
+// The C# method returns a JSON *string* (the output of Fido2NetLib's
+// options.ToJson()), which ASP.NET serializes as a JSON-encoded string.
+// axios's default transformResponse JSON.parses that, so resp.data is
+// normally a JS string. But we've seen this flow break in three ways:
+//
+//   1. resp.data is an empty string (server-side exception, the catch
+//      logged it and rethrew, ASP.NET emitted a 500 with no body, or
+//      a proxy stripped the body). Bare JSON.parse("") throws
+//      "Unexpected end of JSON input" — the cryptic error the user
+//      was seeing.
+//   2. resp.data is an object (axios mis-classified the response, or
+//      the body was a JSON object like {message: "..."} with a 200).
+//      JSON.parse({message: "..."}) throws
+//      "Unexpected token o in JSON at position 1".
+//   3. resp.data is a valid object already (some intermediate layer
+//      double-parsed). Just pass it through.
+//
+// This helper normalises all three cases and throws a readable error
+// for (1) and (2) so the user sees "the server returned …" instead of
+// a raw SyntaxError.
+const parseCreationOptions = (raw: unknown): any => {
+  if (raw == null || raw === '') {
+    throw new Error(
+      'Server returned an empty response for BeginBiometricRegistration. ' +
+      'The backend probably threw an exception. Check the API log.',
+    )
+  }
+  if (typeof raw === 'object') {
+    return raw
+  }
+  if (typeof raw === 'string') {
+    try {
+      return JSON.parse(raw)
+    } catch (e: any) {
+      // Truncate the raw value so we don't dump a giant HTML error page
+      // into the notification toast.
+      const preview = raw.length > 200 ? raw.slice(0, 200) + '…' : raw
+      throw new Error(
+        `Server returned invalid JSON for BeginBiometricRegistration: ` +
+        `${e.message}. Raw response: ${preview}`,
+      )
+    }
+  }
+  throw new Error(
+    `Unexpected BeginBiometricRegistration response type: ${typeof raw}`,
+  )
+}
+
+const statusText = computed(() => {
+  if (!isSupported.value) return t('MyProfileView.biometric_unsupported') || 'Not supported in this browser'
+  if (enrolled.value) return t('MyProfileView.biometric_enrolled') || 'Enabled on this device'
+  return t('MyProfileView.biometric_disabled') || 'Disabled'
+})
+
+// ===== Lifecycle =====
+onMounted(() => {
+  if (!props.username) return
+  try {
+    const stored = localStorage.getItem(storageKey.value)
+    if (stored) {
+      const parsed = JSON.parse(stored) as { deviceName?: string; enrolledAt?: string }
+      enrolled.value = true
+      enrolledDeviceName.value = parsed.deviceName ?? null
+      enrolledAt.value = parsed.enrolledAt ? new Date(parsed.enrolledAt) : null
+    }
+  } catch {
+    // corrupted localStorage entry — treat as not enrolled
+    localStorage.removeItem(storageKey.value)
+  }
+})
+
+// ===== Actions =====
+const formatDate = (d: Date): string => d.toLocaleDateString()
+
+const onToggle = async (checked: boolean | string | Event) => {
+  const next = typeof checked === 'boolean' ? checked : !!checked
+  if (next) {
+    // Don't enroll straight away — require the user to re-enter their
+    // account password first. This is the standard "step-up auth" pattern
+    // for sensitive enrollment changes (FIDO2 / WebAuthn best practice
+    // §6.1.1 — "user verification prior to credential creation").
+    confirmPasswordOpen.value = true
+  } else {
+    confirmRemoveOpen.value = true
+  }
+}
+
+// Verify the password by calling UserProfileProcess.ConfirmPassword
+// (auto-generated webmethod). The username is taken from the JWT on
+// the server side via loginCredential, not from the request body, so
+// the user can only verify their own password. No new session is
+// minted — the existing one is preserved.
+//
+// IMPORTANT: the backend returns `false` (not throws) on wrong password.
+// So we MUST check the boolean return value — only checking for thrown
+// errors (the catch block) would let a wrong password fall through to
+// the success path and start WebAuthn enrollment. That would defeat the
+// entire purpose of the step-up auth gate.
+const onConfirmPassword = async () => {
+  if (verifying.value) return
+  if (!passwordInput.value) {
+    notification.warning({
+      message: t('LoginView.pls_input_password') || 'Please enter your password',
+      placement: 'topRight',
+    })
+    return
+  }
+  verifying.value = true
+  const submitted = passwordInput.value
+  try {
+    const ok = await userProfileService.confirmPassword(submitted)
+    if (!ok) {
+      // Wrong password. Keep the dialog open so the user can retry.
+      notification.error({
+        message: t('MyProfileView.biometric_password_incorrect') || 'Incorrect password',
+        description: t('MyProfileView.biometric_password_incorrect_detail') || 'Please re-enter your password to enable biometric login.',
+        placement: 'topRight',
+      })
+      return
+    }
+    // Password is correct. Close the dialog and kick off WebAuthn
+    // enrollment. Use the captured `submitted` value, not the cleared
+    // `passwordInput` (the modal reset it on close).
+    confirmPasswordOpen.value = false
+    await enroll()
+  } catch (err: any) {
+    // Network / 500 / other transport errors. Wrong-password itself
+    // does NOT throw — it returns false (handled above).
+    notification.error({
+      message: t('MyProfileView.biometric_password_check_failed') || 'Could not verify password',
+      description: err?.message ?? String(err),
+      placement: 'topRight',
+    })
+  } finally {
+    verifying.value = false
+  }
+}
+
+// Toggle handler for the epayslip sub-switch. Just opens the password
+// dialog if the user wants to enable; if they want to disable, the
+// password is NOT required (disabling is a safety/no-consequence
+// action — the user can always re-enable with their password later).
+const onEpayslipToggle = async (checked: boolean | string | Event) => {
+  const next = typeof checked === 'boolean' ? checked : !!checked
+  if (next) {
+    // Enable path: don't optimistically flip the switch — the user must
+    // prove they know the epayslip password before the flag (and the
+    // switch) is set. The switch only goes to `true` after
+    // onConfirmEpayslipPassword succeeds. If the user cancels the
+    // password modal (Cancel button, X, Esc, or backdrop click), the
+    // switch stays OFF and the server flag is unchanged.
+    epayslipPasswordOpen.value = true
+  } else {
+    // Disable path: no password needed.
+    epayslipSaving.value = true
+    try {
+      await userProfileService.disableBiometricForEpayslip()
+      biometricForEpayslip.value = false
+      notification.success({
+        message: t('MyProfileView.biometric_for_epayslip_disabled_toast') || 'Epayslip biometric disabled',
+        placement: 'topRight',
+      })
+    } catch (err: any) {
+      // Revert the optimistic flip on failure.
+      biometricForEpayslip.value = true
+      notification.error({
+        message: t('MyProfileView.biometric_for_epayslip_disable_failed') || 'Could not disable epayslip biometric',
+        description: err?.message ?? String(err),
+        placement: 'topRight',
+      })
+    } finally {
+      epayslipSaving.value = false
+    }
+  }
+}
+
+// OK handler for the epayslip-password modal. Same boolean-check
+// pattern as onConfirmPassword — the backend returns true on success
+// and throws on wrong password, so we MUST inspect the return value.
+const onConfirmEpayslipPassword = async () => {
+  if (epayslipSaving.value) return
+  if (!passwordInput.value) {
+    notification.warning({
+      message: t('LoginView.pls_input_password') || 'Please enter your password',
+      placement: 'topRight',
+    })
+    return
+  }
+  epayslipSaving.value = true
+  const submitted = passwordInput.value
+  try {
+    const ok = await userProfileService.enableBiometricForEpayslip(submitted)
+    if (!ok) {
+      // Wrong password — keep dialog open, don't flip the switch.
+      biometricForEpayslip.value = false
+      notification.error({
+        message: t('MyProfileView.biometric_for_epayslip_password_incorrect') || 'Incorrect epayslip password',
+        description: t('MyProfileView.biometric_for_epayslip_password_incorrect_detail') || 'Please re-enter your epayslip password to enable biometric authentication.',
+        placement: 'topRight',
+      })
+      return
+    }
+    // Success: close the dialog AND flip the switch on now that the
+    // server has confirmed the flag. (We do NOT optimistically flip in
+    // onEpayslipToggle so that cancelling the modal leaves the switch
+    // in its previous off state — see that handler for details.)
+    biometricForEpayslip.value = true
+    epayslipPasswordOpen.value = false
+    notification.success({
+      message: t('MyProfileView.biometric_for_epayslip_enabled_toast') || 'Epayslip biometric enabled',
+      placement: 'topRight',
+    })
+  } catch (err: any) {
+    biometricForEpayslip.value = false
+    notification.error({
+      message: t('MyProfileView.biometric_for_epayslip_check_failed') || 'Could not verify epayslip password',
+      description: err?.message ?? String(err),
+      placement: 'topRight',
+    })
+  } finally {
+    epayslipSaving.value = false
+  }
+}
+
+const enroll = async () => {
+  if (enrolling.value) return
+  enrolling.value = true
+  try {
+    // 1. Server returns the PublicKeyCredentialCreationOptions as a JSON
+    //    string (the auto-generated UserProfileService stub types it as
+    //    `Promise<string>` because the C# method returns `string`).
+    //    @simplewebauthn/browser@13 wants a parsed object, so parse it
+    //    here before handing it to startRegistration().
+    //
+    //    Be defensive about the shape: the backend could legitimately
+    //    return the body as a JSON string (axios auto-parses to a JS
+    //    string), as an already-parsed object (if a proxy/CDN unwrapped
+    //    the JSON string), or as an error object (which axios rejects
+    //    on, but a 200 with an error payload would land here). Treat
+    //    all three cases and surface a clear error if parsing fails —
+    //    a bare `JSON.parse` on an empty string throws the cryptic
+    //    "Unexpected end of JSON input" the user was seeing.
+    const raw = await userProfileService.beginBiometricRegistration(
+      deriveDeviceName(),
+    )
+    // eslint-disable-next-line no-console
+    console.log('[biometric] beginBiometricRegistration raw:', typeof raw, raw)
+
+    const optionsJSON = parseCreationOptions(raw)
+
+    // 2. Browser drives navigator.credentials.create(). @simplewebauthn/browser
+    //    validates the object and shows the OS prompt.
+    const attestation = await startRegistration({ optionsJSON })
+    // eslint-disable-next-line no-console
+    console.log('[biometric] attestation received:', JSON.stringify({
+      id: attestation.id,
+      rawId: attestation.rawId,
+      type: attestation.type,
+      hasResponse: !!attestation.response,
+      hasAttestationObject: !!attestation.response?.attestationObject,
+      attestationObjectLen: attestation.response?.attestationObject?.length,
+      hasClientDataJSON: !!attestation.response?.clientDataJSON,
+      clientDataJSONLen: attestation.response?.clientDataJSON?.length,
+    }))
+
+    // 3. Server verifies the attestation and persists the credential.
+    // Use camelCase keys — that matches the TypeGen-generated
+    // FinishBiometricRegistrationData class exactly, so TS type-checks
+    // and ASP.NET's case-insensitive JSON binder maps to the C#
+    // AttestationJson / CreationOptionsJson properties without 400s.
+    const result = await userProfileService.finishBiometricRegistration({
+
+      attestationJson: JSON.stringify(attestation),
+      // creationOptionsJson is no longer used server-side (it was
+      // round-tripped to Fido2NetLib in v1; for v2+ the server can
+      // re-derive the challenge from the session). We keep the field
+      // shape intact for backwards compatibility with the v1 backend.
+      creationOptionsJson: JSON.stringify(optionsJSON),
+    })
+
+    // 4. Stash the credential id locally so the login page can use it
+    //    as allowCredentials[0].id in navigator.credentials.get().
+    localStorage.setItem(
+      storageKey.value,
+      JSON.stringify({
+        credentialId: result.credentialIdBase64Url,
+        deviceName: deriveDeviceName(),
+        enrolledAt: new Date().toISOString(),
+      }),
+    )
+
+    // 5. Remember the username separately so the login page can
+    //    auto-fill the field on next visit (if the user opens a fresh
+    //    tab and the credential id is the only thing in localStorage,
+    //    they still have to type the username before the fingerprint
+    //    button shows). Keyed by username so multiple enrolled
+    //    accounts on the same device don't clobber each other.
+    localStorage.setItem('last_biometric_username', props.username)
+
+    enrolled.value = true
+    enrolledDeviceName.value = deriveDeviceName()
+    enrolledAt.value = new Date()
+    notification.success({
+      message: t('MyProfileView.biometric_enrolled_toast') || 'Biometric login enabled',
+      placement: 'topRight',
+    })
+  } catch (err: any) {
+    // @simplewebauthn/browser throws on user cancel, no authenticator,
+    // or verification failure. Normalize the error to a readable string
+    // (axios errors have a nested response.data; WebAuthn errors have
+    // .name/.message). The previous "err?.message ?? String(err)" would
+    // produce "[object Object]" when err is a structured axios error.
+    const msg = normalizeError(err)
+    if (/user cancelled|user canceled/i.test(msg)) {
+      message.info(t('MyProfileView.biometric_cancelled') || 'Cancelled')
+    } else if (/not allowed|security error|notallowed/i.test(msg)) {
+      // Common on desktop without a biometric reader: the browser
+      // has no platform authenticator. Show a friendlier message.
+      notification.warning({
+        message: t('MyProfileView.biometric_not_supported') || 'No biometric authenticator',
+        description: t('MyProfileView.biometric_not_supported_detail') || 'This device has no fingerprint reader, face camera, or PIN configured. Try on a phone or laptop with Windows Hello / Touch ID.',
+        placement: 'topRight',
+      })
+    } else {
+      notification.error({
+        message: t('MyProfileView.biometric_enroll_failed') || 'Could not enable biometric login',
+        description: msg,
+        placement: 'topRight',
+      })
+    }
+  } finally {
+    enrolling.value = false
+  }
+}
+
+const onConfirmRemove = async () => {
+  if (removing.value) return
+  removing.value = true
+  try {
+    await userProfileService.removeBiometric()
+    localStorage.removeItem(storageKey.value)
+    enrolled.value = false
+    enrolledDeviceName.value = null
+    enrolledAt.value = null
+    notification.success({
+      message: t('MyProfileView.biometric_removed') || 'Biometric login removed',
+      placement: 'topRight',
+    })
+  } catch (err: any) {
+    notification.error({
+      message: t('MyProfileView.biometric_remove_failed') || 'Could not remove biometric login',
+      description: err?.message ?? String(err),
+      placement: 'topRight',
+    })
+  } finally {
+    removing.value = false
+  }
+}
+
+// Best-effort friendly name from the user agent. We use a coarse
+// platform detection — the user can override by re-enrolling on a
+// different device. The server-side column is the source of truth.
+const deriveDeviceName = (): string => {
+  const ua = navigator.userAgent
+  if (/iPhone/.test(ua)) return 'iPhone'
+  if (/iPad/.test(ua)) return 'iPad'
+  if (/Android/.test(ua)) {
+    const m = ua.match(/Android[^;]+;\s*([^)]+)/)
+    return m ? `Android (${m[1].trim()})` : 'Android device'
+  }
+  if (/Mac OS X/.test(ua)) return 'Mac'
+  if (/Windows/.test(ua)) return 'Windows PC'
+  if (/Linux/.test(ua)) return 'Linux'
+  return 'Unnamed device'
+}
+</script>