750c05eac1
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.
99 lines
2.9 KiB
Markdown
99 lines
2.9 KiB
Markdown
# 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
|