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.
4.9 KiB
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:
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 receivedzeigen) - Welche Origin hat der Request? (Sollte
https://harheimertc.tsschulz.desein) - 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:
-
Öffne die Website direkt auf dem Smartphone:
https://harheimertc.tsschulz.de/registrieren -
Prüfe, ob die Website lädt (sollte funktionieren, da du sagst, du kannst die Website vom Smartphone aus erreichen)
-
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):
# 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
startRegistrationaufgerufen 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:
- Desktop-Browser:
[DEBUG] startRegistration called - QR-Code should appear now - Smartphone scannt QR-Code
- Smartphone sendet Request:
[DEBUG] register-passkey request receivedmit Smartphone User-Agent - 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
- Prüfe Server-Logs während des QR-Code-Scans
- Prüfe Browser-Konsole auf dem Desktop
- Prüfe, ob der QR-Code angezeigt wird
- Prüfe, ob das Smartphone die Website öffnet
- Prüfe, ob ein Request ankommt
Bitte teile die Ergebnisse dieser Tests, dann können wir das Problem weiter eingrenzen.