Die Credential Management API

Meggin Kearney
Meggin Kearney

Die Credential Management API ist eine auf Standards basierende Browser-API, die eine programmatische Schnittstelle zwischen der Website und dem Browser für eine nahtlose Anmeldung auf allen Geräten bietet.

Die Credential Management API:

  • Vereinfachte Anmeldung: Nutzer können automatisch wieder auf einer Website angemeldet werden, auch wenn ihre Sitzung abgelaufen ist oder sie ihre Anmeldedaten auf einem anderen Gerät gespeichert haben.
  • Anmeldung mit Kontoauswahl mit einmaligem Tippen zulassen: Nutzer können in der nativen Kontoauswahl ein Konto auswählen.
  • Speichert Anmeldedaten: Ihre App kann eine Kombination aus Nutzername und Passwort oder sogar Details zu föderierten Konten speichern. Diese Anmeldedaten können über den Browser zwischen Geräten synchronisiert werden.

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

Browsersupport für die Credential Management API prüfen

Unterstützte Browser

  • 51
  • 18
  • 60
  • 13

Quelle

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

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

Nutzer anmelden

Um den Nutzer anzumelden, rufen Sie die Anmeldedaten aus dem Passwortmanager des Browsers ab und melden Sie den Nutzer damit an.

Beispiel:

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

Weitere Informationen findest du unter Angemeldete Nutzer.

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 das 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 Angemeldete Nutzer.

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 den PasswordCredential mit der Nutzer-ID und dem 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, rufen Sie navigator.credentials.preventSilentAccess() auf, um zu verhindern, dass er automatisch wieder angemeldet wird.

Wenn Sie die automatische Anmeldung deaktivieren, können Nutzer ganz einfach zwischen Konten wechseln, z. B. zwischen Arbeits- und privaten Konten, oder zwischen Konten auf gemeinsam verwendeten Geräten.

Weitere Informationen findest du unter Abmelden.

Feedback