Die Credential Management API

Eiji Kitamura

Meggin Kearney

Die Credential Management API ist eine standardsbasierte Browser-API, die eine programmatische Schnittstelle zwischen Website und Browser für eine nahtlose Anmeldung auf verschiedenen Geräten bietet.

Die Credential Management API:

• Reduziert die Komplexität der Anmeldeabläufe: Nutzer können sich automatisch wieder auf einer Website anmelden, auch wenn ihre Sitzung abgelaufen ist oder sie Anmeldedaten auf einem anderen Gerät gespeichert haben.
• Anmeldung mit Kontoauswahl per One-Tap-Bedienung: Nutzer können in einer nativen Kontoauswahl ein Konto auswählen.
• Anmeldedaten speichern: Ihre Anwendung kann entweder eine Kombination aus Nutzername und Passwort oder sogar Details zu einem föderierten Konto speichern. Diese Anmeldedaten können vom Browser zwischen Geräten synchronisiert werden.

Wichtig : Für die Verwendung der Credential Management API muss die Seite von einem sicheren Ursprung aus bereitgestellt werden.

Möchten Sie es in Aktion sehen? Sehen Sie sich die Demo der Credential Management API und den Code an.

Browserunterstützung für die Credential Management API prüfen

Unterstützte Browser

• 51
• 18
• 60
• 13

Quelle

Bevor Sie die Anmeldedaten-Management API verwenden, prüfen Sie, ob PasswordCredential oder FederatedCredential unterstützt wird.

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

Warnung : Wenn Sie die Funktionsprüfung durch Prüfen von navigator.credentials ausführen, funktioniert Ihre Website möglicherweise nicht in Browsern, die WebAuthn(PublicKeyCredential) unterstützen, aber nicht alle Anmeldedatentypen (PasswordCredential und FederatedCredential), die von der Credential Management API definiert sind. Weitere Informationen

Nutzer anmelden

Rufen Sie die Anmeldedaten aus dem Passwortmanager des Browsers ab und melden Sie den Nutzer damit an.

Beispiel:

1. Wenn ein Nutzer deine Website aufruft und nicht angemeldet ist, ruf navigator.credentials.get() auf.
2. Melden Sie den Nutzer mit den abgerufenen Anmeldedaten an.
3. Aktualisieren Sie die Benutzeroberfläche, um anzuzeigen, dass der Nutzer angemeldet ist.

Weitere Informationen

Nutzeranmeldedaten speichern oder aktualisieren

Wenn sich der Nutzer über einen Anbieter von föderierten Identitäten wie Google Sign-In, Facebook oder GitHub angemeldet hat:

1. Nachdem sich der Nutzer erfolgreich angemeldet oder ein Konto erstellt hat, erstellen Sie die FederatedCredential mit der E-Mail-Adresse des Nutzers als ID und geben Sie den Identitätsanbieter mit FederatedCredentials.provider an.
2. Speichern Sie das Anmeldedatenobjekt mit navigator.credentials.store().

Weitere Informationen

Wenn sich der Nutzer mit einem Nutzernamen und Passwort angemeldet hat:

1. Nachdem sich der Nutzer erfolgreich angemeldet oder ein Konto erstellt hat, erstelle die PasswordCredential mit der Nutzer-ID und dem Passwort.
2. Speichern Sie das Anmeldedatenobjekt mit navigator.credentials.store().

Weitere Informationen finden Sie unter Anmeldedaten aus Formularen speichern.

Abmelden

Rufe navigator.credentials.preventSilentAccess() auf, wenn sich der Nutzer abmeldet, um zu verhindern, dass er automatisch wieder angemeldet wird.

Wenn die automatische Anmeldung deaktiviert ist, können Nutzer auch ganz einfach zwischen Konten wechseln, z. B. zwischen geschäftlichen und privaten Konten oder zwischen Konten auf gemeinsam genutzten Geräten, ohne ihre Anmeldedaten noch einmal eingeben zu müssen.

Weitere Informationen zum Abmelden

Feedback