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 geräteübergreifende Anmeldung 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 Anmeldedatenverwaltungs-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.
}

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 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