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.

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

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

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

Nutzer anmelden

Rufen Sie für die Anmeldung des Nutzers die Anmeldedaten aus dem Passwortmanager des Browsers ab und melden Sie sich damit an.

Beispiel:

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

Weitere Informationen

Nutzeranmeldedaten speichern oder aktualisieren

Wenn sich der Nutzer mit einem föderierten Identitätsanbieter wie Google Log-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 findest du unter Nutzer anmelden.

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

1. Nachdem sich der Nutzer erfolgreich angemeldet oder ein Konto erstellt hat, erstellst du 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 Sie die automatische Anmeldung deaktivieren, 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