Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 50s
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.
153 lines
4.9 KiB
Markdown
153 lines
4.9 KiB
Markdown
# 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.
|