Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 53s
Update the CROSS_DEVICE_PROBLEM_ZUSAMMENFASSUNG.md to clarify the role of tunnel servers in the Cross-Device authentication process and outline troubleshooting steps. Additionally, enhance the registrieren.vue component with detailed information about the FIDO Cross-Device flow, including QR-Code format, connection requirements, and potential issues. Improve the register-passkey-options API documentation to reflect the use of tunnel servers, ensuring better understanding and support for Cross-Device functionality.
172 lines
6.1 KiB
Markdown
172 lines
6.1 KiB
Markdown
# Cross-Device Passkey Problem - Zusammenfassung
|
|
|
|
## Aktueller Status
|
|
|
|
✅ **Was funktioniert:**
|
|
- CORS ist korrekt konfiguriert (OPTIONS gibt 204 zurück)
|
|
- POST-Requests funktionieren (Status 200)
|
|
- Options werden korrekt generiert
|
|
- QR-Code wird angezeigt (Desktop-Browser)
|
|
- QR-Code enthält FIDO-URI (Format: `FIDO:/...`)
|
|
|
|
❌ **Was nicht funktioniert:**
|
|
- Verbindung vom Smartphone zum Server wird nicht hergestellt
|
|
- "Verbindung mit einem anderen Gerät wird hergestellt" bleibt hängen
|
|
- Keine Requests vom Smartphone im Server-Log
|
|
- Smartphone öffnet keine Website nach QR-Code-Scan
|
|
|
|
## Wichtige Erkenntnis: Tunnel-Server
|
|
|
|
**FIDO Cross-Device verwendet Tunnel-Server:**
|
|
- `cable.ua5v.com` (Google)
|
|
- `cable.auth.com` (Apple)
|
|
|
|
**Wie funktioniert es:**
|
|
1. Desktop-Browser generiert QR-Code mit öffentlichem Schlüssel (FIDO-URI)
|
|
2. Smartphone scannt QR-Code
|
|
3. **Smartphone verbindet sich über Tunnel-Server mit Desktop-Browser** (nicht direkt mit dem Server!)
|
|
4. Desktop-Browser leitet Credential-Response an den Server weiter
|
|
|
|
**Voraussetzungen:**
|
|
- ✅ Beide Geräte müssen **Internetverbindung** haben
|
|
- ✅ Tunnel-Server müssen erreichbar sein (Firewall/Netzwerk: cable.ua5v.com, cable.auth.com)
|
|
- ⚠️ Bluetooth kann für physische Nähe-Bestätigung verwendet werden (abhängig vom Browser/Gerät)
|
|
- ⚠️ Einige Browser/Implementierungen erfordern Bluetooth für Cross-Device
|
|
|
|
## Mögliche Ursachen
|
|
|
|
### 1. WebAuthn API auf dem Smartphone
|
|
**Problem:** Die WebAuthn-API auf dem Smartphone kann die Verbindung nicht herstellen.
|
|
|
|
**Prüfung:**
|
|
- Öffne die Website direkt auf dem Smartphone: `https://harheimertc.tsschulz.de/registrieren`
|
|
- Versuche, einen Passkey zu registrieren (ohne QR-Code)
|
|
- Funktioniert das?
|
|
|
|
### 2. QR-Code-Inhalt
|
|
**Problem:** Der QR-Code enthält möglicherweise nicht die richtige URL oder Challenge.
|
|
|
|
**Prüfung:**
|
|
- Scanne den QR-Code mit einem QR-Code-Scanner
|
|
- Prüfe, welche URL/Informationen im QR-Code enthalten sind
|
|
- Sollte die Origin `https://harheimertc.tsschulz.de` enthalten
|
|
|
|
### 3. Browser-Kompatibilität
|
|
**Problem:** Nicht alle Browser unterstützen Cross-Device Passkeys gleich gut.
|
|
|
|
**Prüfung:**
|
|
- Welcher Browser wird auf dem Desktop verwendet? (Chrome, Firefox, Edge, Safari)
|
|
- Welcher Browser wird auf dem Smartphone verwendet?
|
|
- Chrome/Edge sollten am besten funktionieren
|
|
|
|
### 4. Tunnel-Server / Netzwerk/Firewall
|
|
**Problem:** Das Smartphone kann die Tunnel-Server nicht erreichen oder Bluetooth ist nicht aktiviert.
|
|
|
|
**Prüfung:**
|
|
- Ist Bluetooth auf beiden Geräten aktiviert? ⚠️ **WICHTIG für Cross-Device!**
|
|
- Können Tunnel-Server erreicht werden? (cable.ua5v.com, cable.auth.com)
|
|
- Sind die Geräte in physischer Nähe? (Bluetooth-Reichweite)
|
|
- Gibt es Firewall-Blockierungen für Tunnel-Server?
|
|
- Kann das Smartphone die Website direkt öffnen? ✅ (bereits bestätigt)
|
|
|
|
### 5. Options-Struktur
|
|
**Problem:** Die Warnung "startRegistration() was not called correctly" deutet auf ein Problem mit der Options-Struktur hin.
|
|
|
|
**Prüfung:**
|
|
- Prüfe Browser-Konsole (Desktop) auf die Debug-Logs
|
|
- Prüfe, ob die Options-Struktur korrekt ist
|
|
- Die Options sollten direkt von `@simplewebauthn/server` kommen (keine manuelle Serialisierung)
|
|
|
|
## Debugging-Schritte
|
|
|
|
### Schritt 1: Server-Logs prüfen
|
|
```bash
|
|
pm2 logs harheimertc --lines 200 | grep -i "register-passkey\|mobile\|smartphone\|user-agent"
|
|
```
|
|
|
|
**Was zu prüfen ist:**
|
|
- Kommt ein Request vom Smartphone an, wenn der QR-Code gescannt wird?
|
|
- Welcher User-Agent? (Sollte "Mobile", "iPhone", "Android" enthalten)
|
|
- Welche IP-Adresse? (Sollte die IP des Smartphones sein)
|
|
|
|
### Schritt 2: Browser-Konsole prüfen (Desktop)
|
|
**Öffne F12 → Console und prüfe:**
|
|
- Gibt es die Warnung "startRegistration() was not called correctly"?
|
|
- Was zeigen die Debug-Logs `[DEBUG] Full options structure check`?
|
|
- Wird der QR-Code angezeigt?
|
|
|
|
### Schritt 3: Smartphone direkt testen
|
|
**Öffne auf dem Smartphone:**
|
|
```
|
|
https://harheimertc.tsschulz.de/registrieren
|
|
```
|
|
|
|
**Versuche:**
|
|
- Registrierung mit Passkey (ohne QR-Code)
|
|
- Funktioniert das? (Sollte einen lokalen Authenticator verwenden)
|
|
|
|
### Schritt 4: QR-Code-Inhalt prüfen
|
|
**Scanne den QR-Code mit einem QR-Code-Scanner:**
|
|
- Welche URL/Informationen sind enthalten?
|
|
- Enthält er die richtige Origin?
|
|
- Enthält er die Challenge?
|
|
|
|
## Bekannte Probleme
|
|
|
|
### Problem 1: "startRegistration() was not called correctly"
|
|
**Ursache:** Die Options-Struktur ist nicht korrekt.
|
|
|
|
**Lösung:**
|
|
- Options werden jetzt direkt von `@simplewebauthn/server` zurückgegeben (keine manuelle Serialisierung)
|
|
- Prüfe Browser-Konsole auf die Debug-Logs
|
|
|
|
### Problem 2: Keine Requests vom Smartphone
|
|
**Ursache:** Cross-Device-Verbindung funktioniert nicht.
|
|
|
|
**Mögliche Lösungen:**
|
|
1. Prüfe, ob beide Geräte im gleichen Netzwerk sind
|
|
2. Prüfe, ob der Browser Cross-Device unterstützt (Chrome/Edge am besten)
|
|
3. Prüfe, ob es Firewall-Blockierungen gibt
|
|
4. Versuche einen anderen Browser
|
|
|
|
### Problem 3: Timeout
|
|
**Ursache:** Die Verbindung wird nicht innerhalb von 5 Minuten hergestellt.
|
|
|
|
**Lösung:**
|
|
- Prüfe, ob Requests ankommen
|
|
- Prüfe, ob CORS korrekt ist (✅ bereits bestätigt)
|
|
- Prüfe, ob die Origin übereinstimmt
|
|
|
|
## Nächste Schritte
|
|
|
|
1. **Prüfe Server-Logs** während des QR-Code-Scans:
|
|
- Kommt ein Request an?
|
|
- Welcher User-Agent?
|
|
- Welche Fehlermeldungen?
|
|
|
|
2. **Prüfe Browser-Konsole** (Desktop):
|
|
- Gibt es noch die Warnung?
|
|
- Was zeigen die Debug-Logs?
|
|
|
|
3. **Teste direkt auf dem Smartphone:**
|
|
- Öffne die Registrierungsseite
|
|
- Versuche, einen Passkey zu registrieren (ohne QR-Code)
|
|
- Funktioniert das?
|
|
|
|
4. **Teile die Ergebnisse:**
|
|
- Server-Logs
|
|
- Browser-Konsole (Desktop)
|
|
- Was passiert auf dem Smartphone?
|
|
|
|
## Wichtige Erkenntnisse
|
|
|
|
- ✅ CORS funktioniert (OPTIONS gibt 204 zurück)
|
|
- ✅ POST-Requests funktionieren (Status 200)
|
|
- ✅ Options werden korrekt generiert
|
|
- ✅ QR-Code wird angezeigt
|
|
- ✅ Website öffnet sich auf dem Smartphone
|
|
- ❌ Verbindung vom Smartphone zum Server wird nicht hergestellt
|
|
- ❌ Keine Requests vom Smartphone im Server-Log
|
|
|
|
**Das Problem liegt wahrscheinlich in der Cross-Device-Verbindung selbst, nicht in CORS oder der Server-Konfiguration.**
|