torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement passkey support checks in registration page, including user feedback for unsupported scenarios. Update logic to determine passkey availability based on secure context and browser compatibility, enhancing user experience during registration.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-07 18:46:45 +01:00
parent 50d634eb2e
commit 0e5856f19d
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pages/registrieren.vue
View File

@@ -20,6 +20,9 @@
<div class="text-sm text-gray-700"> <div class="text-sm text-gray-700">
<div class="font-medium">Registrierungsmethode</div> <div class="font-medium">Registrierungsmethode</div>
<div class="text-xs text-gray-600">Passkey = Anmeldung ohne Passwort (z.B. FaceID/TouchID/Windows Hello)</div> <div class="text-xs text-gray-600">Passkey = Anmeldung ohne Passwort (z.B. FaceID/TouchID/Windows Hello)</div>
<div v-if="!isPasskeySupported" class="text-xs text-red-700 mt-1">
Passkeys aktuell nicht verfügbar: {{ passkeySupportReason || 'Bitte HTTPS/aktuellen Browser verwenden.' }}
</div>
</div> </div>
<label class="flex items-center gap-2 text-sm font-medium text-gray-800"> <label class="flex items-center gap-2 text-sm font-medium text-gray-800">
<input v-model="usePasskey" type="checkbox" class="h-4 w-4" :disabled="isLoading || !isPasskeySupported"> <input v-model="usePasskey" type="checkbox" class="h-4 w-4" :disabled="isLoading || !isPasskeySupported">
@@ -194,7 +197,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { onMounted, ref } from 'vue'
import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next' import { AlertCircle, Check, Loader2, Info } from 'lucide-vue-next'
const formData = ref({ const formData = ref({
@@ -210,9 +213,21 @@ const errorMessage = ref('')
const successMessage = ref('') const successMessage = ref('')
const usePasskey = ref(false) const usePasskey = ref(false)
const isPasskeySupported = ref(false) const isPasskeySupported = ref(false)
if (process.client) { const passkeySupportReason = ref('')
isPasskeySupported.value = !!window.PublicKeyCredential
} onMounted(() => {
try {
const hasPKC = typeof window !== 'undefined' && typeof window.PublicKeyCredential !== 'undefined'
const secure = typeof window !== 'undefined' && !!window.isSecureContext
isPasskeySupported.value = !!(hasPKC && secure)
if (!secure) passkeySupportReason.value = 'Kein Secure Context (HTTPS oder localhost erforderlich).'
else if (!hasPKC) passkeySupportReason.value = 'Browser unterstützt WebAuthn/Passkeys nicht.'
else passkeySupportReason.value = ''
} catch {
isPasskeySupported.value = false
passkeySupportReason.value = 'Passkey-Check fehlgeschlagen.'
}
})
const handleRegister = async () => { const handleRegister = async () => {
errorMessage.value = '' errorMessage.value = ''
@@ -271,7 +286,7 @@ const handleRegisterWithPasskey = async () => {
successMessage.value = '' successMessage.value = ''
if (!isPasskeySupported.value) { if (!isPasskeySupported.value) {
errorMessage.value = 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).' errorMessage.value = passkeySupportReason.value || 'Passkeys sind in diesem Browser/unter dieser URL nicht verfügbar (HTTPS erforderlich).'
return return
} }