Für eine anspruchsvolle Nutzererfahrung ist es wichtig, dass sich die Nutzer bei Ihrer Website authentifizieren können. Authentifizierte Nutzer können über ein dediziertes Profil miteinander interagieren, Daten geräteübergreifend synchronisieren oder Daten verarbeiten, während sie offline sind. Die Liste ist endlos. Das Erstellen, Speichern und Eingeben von Passwörtern kann für Endnutzer jedoch umständlich sein, insbesondere auf mobilen Bildschirmen, sodass sie dieselben Passwörter auf verschiedenen Websites wiederverwenden müssen. Dies stellt natürlich ein Sicherheitsrisiko dar.
Die neueste Version von Chrome (51) unterstützt die Credential Management API. Es handelt sich dabei um einen Vorschlag des W3C zur standardisierten Vorgehensweise, der Entwicklern programmatischen Zugriff auf den Anmeldedaten-Manager eines Browsers bietet und Nutzern die Anmeldung erleichtert.
Was ist die Credential Management API?
Mit der Credential Management API können Entwickler Passwortanmeldedaten und föderierte Anmeldedaten speichern und abrufen. Sie bietet drei Funktionen:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Mit diesen einfachen APIs haben Entwickler u. a. folgende Möglichkeiten:
- Ermöglichen Sie es Nutzern, sich mit nur einem Tippen anzumelden.
- Merken Sie sich das föderierte Konto, mit dem sich der Nutzer angemeldet hat.
- Nutzer wieder anmelden, wenn eine Sitzung abläuft.
Bei der Implementierung von Chrome werden Anmeldedaten im Passwortmanager von Chrome gespeichert. Wenn Nutzer in Chrome angemeldet sind, können sie ihre Passwörter geräteübergreifend synchronisieren. Diese synchronisierten Passwörter können auch mit Android-Apps geteilt werden, in die die Smart Lock for Passwords API for Android integriert ist, um eine nahtlose plattformübergreifende Nutzung zu ermöglichen.
Credential Management API in deine Website einbinden
Wie Sie die Credential Management API mit Ihrer Website verwenden, kann je nach Architektur variieren. Handelt es sich um eine einseitige App? Handelt es sich um eine Legacy-Architektur mit Seitenübergängen? Befindet sich das Anmeldeformular nur auf der oberen Seite? Befinden sich die Anmeldeschaltflächen überall? Können Nutzende auf Ihrer Website sinnvoll surfen, ohne sich anzumelden? Funktioniert Föderation in Pop-up-Fenstern? Oder ist eine seitenübergreifende Interaktion erforderlich?
Es ist fast unmöglich, alle diese Fälle abzudecken. Sehen wir uns jedoch eine typische Single-Page-Anwendung an.
- Die obere Seite ist ein Anmeldeformular.
- Durch Tippen auf die Schaltfläche „Anmelden“ gelangen Nutzer zu einem Anmeldeformular.
- Sowohl das Registrierungs- als auch das Anmeldeformular haben die typischen Optionen für ID/Passwort und Föderation, z.B. mit Google Log-in und Facebook Log-in.
Mithilfe der Credential Management API kannst du der Website beispielsweise die folgenden Funktionen hinzufügen:
- Kontoauswahl bei der Anmeldung anzeigen:Wenn ein Nutzer auf „Anmelden“ tippt, wird die native Benutzeroberfläche zur Kontoauswahl angezeigt.
- Anmeldedaten speichern:Biete nach der erfolgreichen Anmeldung an, die Anmeldedaten zur späteren Verwendung im Passwortmanager des Browsers zu speichern.
- Nutzer automatisch wieder anmelden lassen:Nutzer können sich nach Ablauf einer Sitzung wieder anmelden.
- Automatische Anmeldung vermitteln:Nachdem ein Nutzer sich abgemeldet hat, deaktivieren Sie die automatische Anmeldung für den nächsten Besuch des Nutzers.
Sie können sich die Implementierung dieser Funktionen auf einer Demowebsite mit dem Beispielcode ansehen.
Kontoauswahl beim Anmelden anzeigen
Nachdem der Nutzer auf die Schaltfläche „Anmelden“ getippt hat und zu einem Anmeldeformular navigiert wurde, können Sie Anmeldedaten mit navigator.credentials.get() abrufen. Chrome zeigt eine Benutzeroberfläche für die Kontoauswahl an, aus der der Nutzer ein Konto auswählen kann.
Anmeldedatenobjekt für Passwort abrufen
Wenn Anmeldedaten für Passwörter als Kontooptionen angezeigt werden sollen, verwenden Sie password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Passwortbasierte Anmeldung verwenden
Sobald der Nutzer ein Konto auswählt, erhält die Auflösungsfunktion ein Passwort. Sie können sie mit fetch() an den Server senden:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Föderierte Anmeldedaten zum Anmelden verwenden
Wenn Sie einem Nutzer föderierte Konten anzeigen lassen möchten, fügen Sie den get()-Optionen federated hinzu. Dabei wird ein Array von Identitätsanbietern verwendet.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
Prüfen Sie, ob das Attribut type des Berechtigungsobjekts PasswordCredential (type == 'password') oder FederatedCredential (type == 'federated') ist. Wenn das Ausweisdokument ein FederatedCredential ist, können Sie die entsprechende API mit den darin enthaltenen Informationen aufrufen.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
Anmeldedaten speichern
Wenn sich ein Nutzer mit einem Formular auf Ihrer Website anmeldet, können Sie die Anmeldedaten mit navigator.credentials.store() speichern. Der Nutzer wird aufgefordert, sie zu speichern. Je nach Typ der Anmeldedaten können Sie new
PasswordCredential() oder new
FederatedCredential() verwenden, um ein Anmeldedatenobjekt zu erstellen, das Sie speichern möchten.
Anmeldedaten für Passwörter aus einem Formularelement erstellen und speichern
Im folgenden Code werden autocomplete-Attribute verwendet, um die Elemente des Formulars automatisch den Objektparametern PasswordCredential zuzuordnen.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Föderierte Anmeldedaten erstellen und speichern
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Automatische Anmeldung des Nutzers zulassen
Wenn ein Nutzer Ihre Website verlässt und später zurückkehrt, ist die Sitzung möglicherweise abgelaufen. Nutzer sollten nicht bei jeder Rückkehr ihr Passwort eingeben müssen. Lassen Sie den Nutzer automatisch wieder anmelden.
Anmeldedatenobjekt abrufen
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
Der Code sollte in etwa dem entsprechen, was Sie im Bereich „Kontoauswahl beim Anmelden anzeigen“ sehen. Der einzige Unterschied besteht darin, dass Sie unmediated: true festlegen.
Die Funktion wird dadurch sofort aufgelöst und Sie erhalten die Anmeldedaten für die automatische Anmeldung des Nutzers. Es gibt einige Bedingungen:
- Der Nutzer hat die Funktion für die automatische Anmeldung in einer freundlichen Begrüßung bestätigt.
- Der Nutzer hat sich zuvor mit der Credential Management API auf der Website angemeldet.
- Der Nutzer hat nur ein Ausweisdokument für Ihren Ursprung gespeichert.
- Der Nutzer hat sich in der vorherigen Sitzung nicht explizit abgemeldet.
Wenn eine dieser Bedingungen nicht erfüllt ist, wird die Funktion abgelehnt.
Automatische Anmeldung vermitteln
Wenn sich ein Nutzer von Ihrer Website abmeldet, müssen Sie selbst dafür sorgen, dass er nicht automatisch wieder angemeldet wird. Die Credential Management API bietet dazu einen Mechanismus namens Vermittlung.
Sie können den Vermittlungsmodus durch Aufrufen von navigator.credentials.requireUserMediation() aktivieren.
Solange der Vermittlungsstatus des Nutzers für den Ursprung aktiviert ist und unmediated: true mit navigator.credentials.get() verwendet wird, wird diese Funktion mit undefined aufgelöst.
Automatische Anmeldung vermitteln
navigator.credentials.requireUserMediation();
Häufig gestellte Fragen
Kann JavaScript auf der Website ein unformatiertes Passwort abrufen?
Nein. Sie können Passwörter nur im Rahmen von PasswordCredential abrufen. Das Passwort ist auf keine Weise zugänglich.
Ist es möglich, mit der Credential Management API drei Ziffern für eine ID zu speichern? Derzeit nicht. Wir würden uns über Feedback zur Spezifikation freuen.
Kann ich die Credential Management API in einem iFrame verwenden?
Die API ist auf Kontexte der obersten Ebene beschränkt. Aufrufe von .get() oder .store() in einem iFrame werden sofort ohne Auswirkungen aufgelöst.
Kann ich meine Chrome-Erweiterung für die Passwortverwaltung in die Credential Management API einbinden?
Sie können navigator.credentials überschreiben und mit Ihrer Chrome-Erweiterung für get()- oder store()-Anmeldedaten verknüpfen.
Ressourcen
Weitere Informationen zur Credential Management API findest du im Integrationsleitfaden.