Die Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Die Credential Management API ist eine standardbasierte Browser-API, die eine programmatische Benutzeroberfläche bietet zwischen der Website und dem Browser wechseln, um sich auf allen Geräten nahtlos anzumelden.

Die Credential Management API:

  • Einfachere Anmeldung: Nutzer können automatisch wieder auf einer Website angemeldet werden, selbst wenn ihre Sitzung abgelaufen ist oder sie ihre Anmeldedaten auf einem anderen Gerät gespeichert haben.
  • Ermöglicht Anmeldung mit einmaligem Tippen über die Kontoauswahl: Nutzer können ein Konto in einer nativen Kontoauswahl auswählen.
  • Speichert Anmeldedaten: Ihre Anwendung kann entweder eine Kombination aus Nutzername und Passwort oder sogar Details zu föderierten Konten speichern. Diese Anmeldedaten können über den Browser geräteübergreifend synchronisiert werden.

Möchten Sie es in Aktion sehen? Testen Sie die Demo der Credential Management API und werfen Sie einen Blick Code.

Browserunterstützung der Credential Management API prüfen

Unterstützte Browser

  • Chrome: 51. <ph type="x-smartling-placeholder">
  • Edge: 18. <ph type="x-smartling-placeholder">
  • Firefox: 60 <ph type="x-smartling-placeholder">
  • Safari: 13. <ph type="x-smartling-placeholder">

Quelle

Prüfen Sie vor der Verwendung der Credential Management API zuerst, ob PasswordCredential oder FederatedCredential wird unterstützt.

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

Nutzer anmelden

Wenn Sie den Nutzer anmelden möchten, rufen Sie die Anmeldedaten aus dem Browserpasswort ab und zur Anmeldung des Nutzers verwenden.

Beispiel:

  1. Wenn ein nicht angemeldeter Nutzer auf Ihre Website gelangt, Rufen Sie navigator.credentials.get() auf.
  2. Verwenden Sie die abgerufenen Anmeldedaten, um den Nutzer anzumelden.
  3. Aktualisieren Sie die Benutzeroberfläche, um anzugeben, dass der Nutzer angemeldet ist.

Weitere Informationen finden Sie unter Nutzer anmelden.

Nutzeranmeldedaten speichern oder aktualisieren

Wenn sich der Nutzer mit einem föderierten Identitätsanbieter wie Google angemeldet hat Log-in, Facebook, GitHub:

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

Weitere Informationen finden Sie unter Nutzer anmelden.

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

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

Weitere Informationen finden Sie unter Anmeldedaten aus Google Formulare speichern

Abmelden

Wenn sich der Nutzer abmeldet, navigator.credentials.preventSilentAccess() aufrufen um zu verhindern, dass der Nutzer automatisch wieder angemeldet wird.

Wenn Sie die automatische Anmeldung deaktivieren, können Nutzer ganz einfach zwischen Konten wechseln, beispielsweise zwischen Arbeits- und privaten Konten oder zwischen Konten auf gemeinsam verwendeten Geräten nutzen, ohne die Anmeldedaten noch einmal eingeben zu müssen.

Weitere Informationen finden Sie unter Abmelden:

Feedback