diff --git a/pages/registrieren.vue b/pages/registrieren.vue index b4a1f66..38bdb79 100644 --- a/pages/registrieren.vue +++ b/pages/registrieren.vue @@ -177,17 +177,54 @@
🔍 Debug-Informationen (QR-Code):
-
Challenge: {{ debugChallenge.substring(0, 40) }}...
+
Challenge: {{ debugChallenge }}
RP-ID: {{ debugRpId }}
+
Registration-ID: {{ debugRegistrationId }}
Origin: {{ typeof window !== 'undefined' ? window.location.origin : 'N/A (SSR)' }}
-
- Hinweis: Der QR-Code wird vom Browser generiert. - Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben. +
+ + +
+
📱 Smartphone-URL (statt QR-Code scannen):
+ +
+ Anleitung: Öffnen Sie diese URL auf Ihrem Smartphone, um die Passkey-Registrierung durchzuführen. +
+ +
+ + +
+
+ + 📄 Vollständige Options (JSON) - Klicken zum Anzeigen + +
{{ JSON.stringify(debugOptions, null, 2) }}
+ +
+
+ +
+ Hinweis: Der QR-Code wird vom Browser generiert. + Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben.
@@ -278,6 +315,9 @@ const handleFormSubmit = (event) => { const showDebugInfo = ref(false) const debugChallenge = ref('') const debugRpId = ref('') +const debugRegistrationId = ref('') +const debugOptions = ref(null) +const debugSmartphoneUrl = ref('') onMounted(() => { try { @@ -524,6 +564,15 @@ const handleRegisterWithPasskey = async () => { // Der Browser generiert automatisch einen QR-Code für Cross-Device debugChallenge.value = pre.options?.challenge || '' debugRpId.value = pre.options?.rp?.id || '' + debugRegistrationId.value = pre.registrationId || '' + debugOptions.value = pre.options || null + + // Generiere Smartphone-URL für Cross-Device + // Das Smartphone kann diese URL öffnen, um die Passkey-Registrierung durchzuführen + if (pre.registrationId) { + debugSmartphoneUrl.value = `${window.location.origin}/passkey-register-cross-device?registrationId=${pre.registrationId}` + } + showDebugInfo.value = true console.log('[DEBUG] QR-Code Info (for Cross-Device):', { @@ -642,6 +691,19 @@ const handleRegisterWithPasskey = async () => { console.log('[DEBUG] 4. Smartphone muss startRegistration aufrufen können') console.log('[DEBUG] 5. Smartphone sendet Credential-Response an:', window.location.origin + '/api/auth/register-passkey') + // WICHTIG: Prüfe, ob Cross-Device überhaupt unterstützt wird + console.log('[DEBUG] Checking Cross-Device support...') + console.log('[DEBUG] Platform Authenticator Available:', await mod.platformAuthenticatorIsAvailable()) + console.log('[DEBUG] Browser Supports WebAuthn:', mod.browserSupportsWebAuthn()) + + // Versuche startRegistration aufzurufen + // Bei Cross-Device wird automatisch ein QR-Code generiert + // Das Smartphone muss dann die Website öffnen können + console.log('[DEBUG] Calling startRegistration...') + console.log('[DEBUG] ⚠️ WICHTIG: Wenn Cross-Device verwendet wird, sollte ein QR-Code erscheinen') + console.log('[DEBUG] ⚠️ Das Smartphone muss dann die Website öffnen können:', window.location.origin) + console.log('[DEBUG] ⚠️ Prüfe, ob das Smartphone die Website erreichen kann!') + credential = await mod.startRegistration({ optionsJSON: pre.options }) clearTimeout(timeoutWarning) @@ -713,6 +775,31 @@ const handleRegisterWithPasskey = async () => { } finally { isLoading.value = false } + + // Funktion zum Kopieren in die Zwischenablage + async function copyToClipboard(text) { + try { + await navigator.clipboard.writeText(text) + alert('In Zwischenablage kopiert!') + } catch (err) { + console.error('Fehler beim Kopieren:', err) + // Fallback für ältere Browser + const textArea = document.createElement('textarea') + textArea.value = text + textArea.style.position = 'fixed' + textArea.style.opacity = '0' + document.body.appendChild(textArea) + textArea.select() + try { + document.execCommand('copy') + alert('In Zwischenablage kopiert!') + } catch (err) { + console.error('Fallback-Kopieren fehlgeschlagen:', err) + alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.') + } + document.body.removeChild(textArea) + } + } } useHead({