From 750c05eac1fe39f506276e0ca6b942a7639fd7ab Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Thu, 8 Jan 2026 11:56:57 +0100 Subject: [PATCH] Enhance debug logging for Cross-Device Passkey Registration Add detailed debug statements in the registrieren.vue component to provide insights into the QR-Code generation process and the Cross-Device authentication flow. Additionally, update the register-passkey API to log request details, including user agent and method, to improve troubleshooting capabilities and ensure clarity during the registration process. --- CROSS_DEVICE_DEBUG.md | 152 +++++++++ SMARTPHONE_TEST_ANLEITUNG.md | 98 ++++++ pages/registrieren.vue | 18 ++ public/test-smartphone.html | 394 +++++++++++++++++++++++ server/api/auth/register-passkey.post.js | 6 +- 5 files changed, 667 insertions(+), 1 deletion(-) create mode 100644 CROSS_DEVICE_DEBUG.md create mode 100644 SMARTPHONE_TEST_ANLEITUNG.md create mode 100644 public/test-smartphone.html diff --git a/CROSS_DEVICE_DEBUG.md b/CROSS_DEVICE_DEBUG.md new file mode 100644 index 0000000..1520a30 --- /dev/null +++ b/CROSS_DEVICE_DEBUG.md @@ -0,0 +1,152 @@ +# Cross-Device Passkey Debugging + +## Problem: Smartphone kann keine Verbindung aufbauen + +CORS funktioniert jetzt korrekt (OPTIONS gibt 204 zurück), aber das Smartphone kann immer noch keine Verbindung aufbauen. + +## Debugging-Schritte + +### 1. Prüfe Server-Logs + +Auf dem Server, während du versuchst, den QR-Code zu scannen: + +```bash +pm2 logs harheimertc --lines 100 | grep -i "register-passkey\|OPTIONS\|CORS\|origin" +``` + +**Was zu prüfen ist:** +- Kommt ein Request vom Smartphone an? (Sollte `[DEBUG] register-passkey request received` zeigen) +- Welche Origin hat der Request? (Sollte `https://harheimertc.tsschulz.de` sein) +- Welcher User-Agent? (Sollte das Smartphone-Browser sein) + +### 2. Prüfe Browser-Konsole (Desktop) + +Öffne F12 → Console auf dem Desktop-Browser und prüfe: +- Wird der QR-Code angezeigt? +- Gibt es Fehlermeldungen? +- Was steht in den Debug-Logs? + +### 3. Prüfe Smartphone-Browser + +**Wichtig:** Wenn du den QR-Code scannst, öffnet das Smartphone die Website. Prüfe dort: + +1. **Öffne die Website direkt auf dem Smartphone:** + ``` + https://harheimertc.tsschulz.de/registrieren + ``` + +2. **Prüfe, ob die Website lädt** (sollte funktionieren, da du sagst, du kannst die Website vom Smartphone aus erreichen) + +3. **Versuche, den QR-Code zu scannen** und prüfe: + - Öffnet sich die Website auf dem Smartphone? + - Gibt es Fehlermeldungen? + - Wird ein Request an den Server gesendet? + +### 4. Netzwerk-Test + +**Auf dem Smartphone:** +- Öffne die Website direkt: `https://harheimertc.tsschulz.de` +- Prüfe, ob sie lädt +- Prüfe, ob HTTPS korrekt funktioniert (keine Zertifikat-Fehler) + +**Mit curl (vom Server aus):** +```bash +# Simuliere einen Request vom Smartphone +curl -X POST \ + -H "Origin: https://harheimertc.tsschulz.de" \ + -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)" \ + -H "Content-Type: application/json" \ + -d '{"registrationId":"test","credential":{}}' \ + -v \ + https://harheimertc.tsschulz.de/api/auth/register-passkey +``` + +### 5. Häufige Probleme + +#### Problem 1: QR-Code wird nicht angezeigt +**Symptom:** Kein QR-Code erscheint im Browser +**Lösung:** +- Prüfe Browser-Konsole auf Fehler +- Prüfe, ob `startRegistration` aufgerufen wird +- Prüfe, ob die Options korrekt sind + +#### Problem 2: QR-Code wird gescannt, aber Website öffnet sich nicht +**Symptom:** QR-Code wird gescannt, aber nichts passiert +**Lösung:** +- Prüfe, ob der QR-Code die richtige URL enthält +- Prüfe, ob das Smartphone die Website erreichen kann +- Prüfe, ob es Firewall-Blockierungen gibt + +#### Problem 3: Website öffnet sich, aber Request kommt nicht an +**Symptom:** Website öffnet sich auf dem Smartphone, aber Server-Logs zeigen keinen Request +**Lösung:** +- Prüfe CORS-Header (sollte jetzt funktionieren) +- Prüfe, ob der Request wirklich gesendet wird (Browser-Entwicklertools auf dem Smartphone) +- Prüfe, ob Apache den Request weiterleitet + +#### Problem 4: Request kommt an, aber Fehler +**Symptom:** Request kommt im Server-Log an, aber es gibt einen Fehler +**Lösung:** +- Prüfe die Fehlermeldung im Server-Log +- Prüfe, ob die Challenge korrekt ist +- Prüfe, ob die Origin übereinstimmt + +### 6. Manueller Test + +**Test 1: Direkte Website-Zugriff vom Smartphone** +``` +https://harheimertc.tsschulz.de/registrieren +``` +Sollte funktionieren. + +**Test 2: API-Endpoint vom Smartphone** +Öffne auf dem Smartphone: +``` +https://harheimertc.tsschulz.de/api/auth/register-passkey-options +``` +Sollte einen JSON-Fehler zurückgeben (weil POST erwartet wird), aber kein 404. + +**Test 3: OPTIONS-Request vom Smartphone** +Mit einem Tool wie "HTTP Request" auf dem Smartphone: +``` +OPTIONS https://harheimertc.tsschulz.de/api/auth/register-passkey-options +Origin: https://harheimertc.tsschulz.de +``` +Sollte 204 mit CORS-Headern zurückgeben. + +### 7. Browser-spezifische Probleme + +**Chrome/Edge:** +- Sollte Cross-Device unterstützen +- QR-Code sollte automatisch erscheinen + +**Firefox:** +- Unterstützt Cross-Device möglicherweise nicht vollständig +- Prüfe Browser-Konsole auf Warnungen + +**Safari (iOS):** +- Unterstützt Cross-Device +- QR-Code sollte automatisch erscheinen + +### 8. Was die Logs zeigen sollten + +**Wenn alles funktioniert:** +1. Desktop-Browser: `[DEBUG] startRegistration called - QR-Code should appear now` +2. Smartphone scannt QR-Code +3. Smartphone sendet Request: `[DEBUG] register-passkey request received` mit Smartphone User-Agent +4. Server verifiziert: `[DEBUG] Verification successful` + +**Wenn es nicht funktioniert:** +- Kein Request vom Smartphone → Problem mit QR-Code oder Netzwerk +- Request kommt an, aber Fehler → Problem mit Challenge oder Origin +- Timeout → Problem mit Verbindung oder CORS + +### 9. Nächste Schritte + +1. **Prüfe Server-Logs** während des QR-Code-Scans +2. **Prüfe Browser-Konsole** auf dem Desktop +3. **Prüfe, ob der QR-Code angezeigt wird** +4. **Prüfe, ob das Smartphone die Website öffnet** +5. **Prüfe, ob ein Request ankommt** + +Bitte teile die Ergebnisse dieser Tests, dann können wir das Problem weiter eingrenzen. diff --git a/SMARTPHONE_TEST_ANLEITUNG.md b/SMARTPHONE_TEST_ANLEITUNG.md new file mode 100644 index 0000000..3efca4d --- /dev/null +++ b/SMARTPHONE_TEST_ANLEITUNG.md @@ -0,0 +1,98 @@ +# Smartphone Passkey Test - Anleitung + +## Test-Seite öffnen + +**Auf dem Smartphone öffnen:** +``` +https://harheimertc.tsschulz.de/test-smartphone.html +``` + +## Was die Test-Seite zeigt + +### 1. Basis-Informationen +- Aktuelle URL und Origin +- Ob HTTPS/Secure Context aktiv ist +- Ob WebAuthn unterstützt wird +- Browser und Plattform-Info + +### 2. OPTIONS Preflight Test +- Testet, ob OPTIONS-Requests funktionieren +- Zeigt CORS-Header +- Sollte Status 204 zurückgeben + +### 3. Registration Options Test +- Testet den `/api/auth/register-passkey-options` Endpoint +- Zeigt, ob Options korrekt zurückgegeben werden +- Zeigt CORS-Header + +### 4. WebAuthn API Test +- Testet die komplette WebAuthn-Registrierung +- Zeigt, ob `startRegistration` funktioniert +- Zeigt, ob ein QR-Code erscheint (für Cross-Device) + +### 5. Network Monitor +- Zeigt alle Requests, die gesendet werden +- Zeigt Status-Codes und URLs + +## Was zu prüfen ist + +### ✅ Erfolgreich, wenn: +- **Basis-Info:** "Is Secure Context: JA ✓" und "WebAuthn Support: JA ✓" +- **OPTIONS Test:** Status 204 und alle CORS-Header vorhanden +- **Registration Options:** Status 200, `success: true`, `hasChallenge: JA ✓` +- **WebAuthn Test:** Zeigt "SUCCESS ✓" oder QR-Code erscheint + +### ❌ Probleme, wenn: +- **OPTIONS Test:** Status 404 oder CORS-Header fehlen +- **Registration Options:** Status 500 oder `success: false` +- **WebAuthn Test:** Fehler wie "NotSupportedError" oder Timeout + +## Häufige Probleme + +### Problem 1: "WebAuthn Support: NEIN ✗" +**Ursache:** Browser unterstützt WebAuthn nicht oder nicht in Secure Context +**Lösung:** +- Stelle sicher, dass HTTPS verwendet wird +- Prüfe, ob der Browser WebAuthn unterstützt (Chrome, Safari, Edge sollten funktionieren) + +### Problem 2: OPTIONS gibt 404 +**Ursache:** Endpoint behandelt OPTIONS nicht korrekt +**Lösung:** Sollte jetzt behoben sein mit `.options.js` Dateien + +### Problem 3: CORS-Header fehlen +**Ursache:** Server setzt CORS-Header nicht +**Lösung:** Prüfe Server-Logs, ob CORS-Header gesetzt werden + +### Problem 4: WebAuthn Test schlägt fehl +**Ursache:** +- Kein lokaler Authenticator verfügbar +- Cross-Device-Verbindung funktioniert nicht +- QR-Code wird nicht angezeigt + +**Lösung:** +- Prüfe, ob ein QR-Code erscheint +- Prüfe, ob das Smartphone die Website erreichen kann +- Prüfe Server-Logs, ob Requests ankommen + +## Nächste Schritte + +1. **Öffne die Test-Seite auf dem Smartphone** +2. **Führe alle Tests aus** +3. **Screenshot oder kopiere die Ergebnisse** +4. **Prüfe Server-Logs während der Tests:** + ```bash + pm2 logs harheimertc --lines 50 + ``` +5. **Teile die Ergebnisse**, dann können wir das Problem weiter eingrenzen + +## Zusätzliche Debug-Info + +**Auf dem Smartphone:** +- Öffne die Browser-Entwicklertools (falls verfügbar) +- Prüfe den Network-Tab +- Prüfe die Console auf Fehler + +**Auf dem Server:** +- Prüfe PM2-Logs während der Tests +- Prüfe Apache-Logs für Requests +- Prüfe, ob Requests ankommen diff --git a/pages/registrieren.vue b/pages/registrieren.vue index 4af0c25..a9f7e24 100644 --- a/pages/registrieren.vue +++ b/pages/registrieren.vue @@ -518,6 +518,24 @@ const handleRegisterWithPasskey = async () => { console.log('[DEBUG] startRegistration called - QR-Code should appear now (if Cross-Device)') console.log('[DEBUG] Passing options directly to startRegistration (same as in profil.vue)') + console.log('[DEBUG] Options for QR-Code:', { + rpId: pre.options.rp?.id, + rpName: pre.options.rp?.name, + challenge: pre.options.challenge?.substring(0, 20) + '...', + timeout: pre.options.timeout, + timeoutSeconds: Math.round(pre.options.timeout / 1000), + note: 'Der Browser generiert automatisch einen QR-Code. Das Smartphone muss diese Origin erreichen können: ' + window.location.origin + }) + + // WICHTIG: Für Cross-Device muss das Smartphone die gleiche Origin erreichen können + // Der QR-Code enthält die Challenge und die Server-Info + // Das Smartphone öffnet dann die Website und sendet die Credential-Response zurück + console.log('[DEBUG] Cross-Device Flow:') + console.log('[DEBUG] 1. Browser generiert QR-Code mit Challenge:', pre.options.challenge?.substring(0, 20) + '...') + console.log('[DEBUG] 2. Smartphone scannt QR-Code') + console.log('[DEBUG] 3. Smartphone muss diese URL erreichen können:', window.location.origin) + console.log('[DEBUG] 4. Smartphone sendet Credential-Response an:', window.location.origin + '/api/auth/register-passkey') + console.log('[DEBUG] 5. Server verifiziert die Response') // Direkt die Options übergeben (wie in profil.vue und passkey-wiederherstellen.vue) credential = await mod.startRegistration(pre.options) diff --git a/public/test-smartphone.html b/public/test-smartphone.html new file mode 100644 index 0000000..426bda2 --- /dev/null +++ b/public/test-smartphone.html @@ -0,0 +1,394 @@ + + + + + + Smartphone Passkey Test + + + +
+

🔍 Smartphone Passkey Test

+ +
+

1. Basis-Informationen

+
+
+ +
+

2. OPTIONS Preflight Test

+ +
+
+ +
+

3. Registration Options Test

+ +
+
+ +
+

4. WebAuthn API Test

+ +
+
+ +
+

5. Network Monitor

+

+ Öffne die Browser-Entwicklertools (falls verfügbar) oder prüfe die Netzwerk-Requests unten. +

+
+
+
+ + + + diff --git a/server/api/auth/register-passkey.post.js b/server/api/auth/register-passkey.post.js index d3f75d5..b8d6c38 100644 --- a/server/api/auth/register-passkey.post.js +++ b/server/api/auth/register-passkey.post.js @@ -11,12 +11,16 @@ import { assertPasswordNotPwned } from '../../utils/hibp.js' export default defineEventHandler(async (event) => { const requestStart = Date.now() const requestOrigin = getHeader(event, 'origin') + const userAgent = getHeader(event, 'user-agent') const { origin: webauthnOrigin } = getWebAuthnConfig() console.log('[DEBUG] register-passkey request received', { origin: requestOrigin, webauthnOrigin, - timestamp: new Date().toISOString() + userAgent: userAgent?.substring(0, 100), + timestamp: new Date().toISOString(), + method: getMethod(event), + note: 'Dieser Request sollte vom Smartphone kommen, wenn der QR-Code gescannt wurde' }) // CORS-Header für Cross-Device Authentication