Diese Seite wurde von der Cloud Translation API übersetzt.

Den Anmeldevorgang mit der Credential Management API optimieren

Eiji Kitamura

Um eine anspruchsvolle User Experience zu bieten, ist es wichtig, den Nutzenden zu helfen, sich bei Ihrer Website zu authentifizieren. Authentifizierte Nutzer können mit ein spezielles Profil nutzen, Daten geräteübergreifend synchronisieren oder Daten verarbeiten, im Offlinemodus die Liste geht noch weiter. Beim Erstellen, Erinnern und Tippen Passwörter sind in der Regel umständlich für Endnutzer, insbesondere auf Mobilgeräten. was dazu führt, dass sie dasselbe Passwort auf verschiedenen Websites wiederverwenden. Das ist natürlich stellt ein Sicherheitsrisiko dar.

Die neueste Version von Chrome (51) unterstützt die Credential Management API. Es ist ein zur Einhaltung von Standards beim W3C, das Entwickelnden programmatischen Zugriff auf Anmeldedaten-Manager eines Browsers und erleichtert Nutzern die Anmeldung.

Was ist die Credential Management API?

Mit der Credential Management API können Entwickler Passwörter speichern und abrufen. Anmeldedaten und föderierte Anmeldedaten. Außerdem bietet der Dienst drei Funktionen:

navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()

Mit diesen einfachen APIs können Entwickler leistungsstarke Aufgaben ausführen:

Ermöglichen Sie Nutzern, sich mit nur einem Tippen anzumelden.
Merken Sie sich das föderierte Konto, mit dem der Nutzer sich angemeldet hat.
Nutzer wieder anmelden, wenn eine Sitzung abläuft.

Bei der Implementierung von Chrome werden Anmeldedaten im Passwort von Chrome gespeichert Administrator. Wenn Nutzer in Chrome angemeldet sind, können sie die Passwörter der Nutzer synchronisieren. geräteübergreifend. Diese synchronisierten Passwörter können auch mit Android-Apps geteilt werden. mit integrierter Smart Lock for Passwords API für Android für ein nahtloses plattformübergreifendes Erlebnis.

Credential Management API in Ihre Website einbinden

Wie Sie die Credential Management API für Ihre Website verwenden können, kann variieren je nach Architektur. Handelt es sich um eine einseitige App? Ist es ein Erbe Architektur mit Seitenübergängen? Befindet sich das Anmeldeformular nur oben Seite? Befinden sich die Anmeldeschaltflächen überall? Können Nutzer Ihre Website mit relevanten Informationen ohne Anmeldung auf deiner Website? Funktioniert Föderation in Pop-up-Fenstern? Oder tut es das? Interaktion über mehrere Seiten hinweg erfordern?

Es ist fast unmöglich, all diese Fälle abzudecken. Sehen wir uns einer typischen Single-Page-App.

Auf der oberen Seite befindet sich ein Anmeldeformular.
Durch Tippen auf „Anmelden“ gelangen Nutzer zu einem Anmeldeformular.
Sowohl das Registrierungs- als auch das Anmeldeformular verfügen über die typischen Optionen ID/Passwort Anmeldedaten und Föderation, z.B. über Google Log-in und Facebook Log-in.

Mit der Credential Management API können Sie Folgendes hinzufügen: Funktionen hinzufügen, zum Beispiel:

Kontoauswahl bei der Anmeldung anzeigen:Es wird eine native Benutzeroberfläche für die Kontoauswahl angezeigt. Ein Nutzer tippt auf „Anmelden“.
Anmeldedaten speichern: Biete nach der erfolgreichen Anmeldung an, die Anmeldedaten zur späteren Verwendung an den Passwortmanager des Browsers senden.
Automatische erneute Anmeldung des Nutzers zulassen:Der Nutzer kann sich wieder anmelden, wenn Sitzung abgelaufen ist.
Automatische Anmeldung vermitteln:Wenn sich ein Nutzer abmeldet, deaktivieren Sie die automatische Anmeldung für den nächsten Besuch der Nutzenden.

Sie können diese Funktionen auf einer Demowebsite mit dem Beispielcode ausprobieren.

Kontoauswahl bei der Anmeldung anzeigen

Nach dem Tippen auf die Schaltfläche „Anmelden“ durch einen Nutzer Schaltfläche und Navigation zu einem Anmeldeformular kann verwenden navigator.credentials.get() um Anmeldedaten zu erhalten. In Chrome wird eine Benutzeroberfläche für die Kontoauswahl angezeigt, kann der Nutzer ein Konto auswählen.

Eine Benutzeroberfläche für die Kontoauswahl wird angezeigt, über die der Nutzer ein Konto für die Anmeldung auswählen kann.

Objekt für Passwort-Anmeldedaten abrufen

Verwenden Sie password: true, um Passwort-Anmeldedaten als Kontooptionen anzuzeigen.

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

Mit Anmeldedaten mit einem Passwort anmelden

Sobald der Benutzer eine Kontoauswahl getroffen hat, erhält die Auflösungsfunktion ein Anmeldedaten für das 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

Mit föderierten Anmeldedaten anmelden

Um einem Nutzer föderierte Konten anzuzeigen, fügen Sie federated hinzu. Dabei wird ein Array verwendet. von Identitätsanbietern zu den get()-Optionen hinzufügen.

Mehrere Konten sind im Passwortmanager gespeichert. — </ph> Mehrere Konten sind im Passwortmanager gespeichert

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

Sie können das Attribut type des Berechtigungsnachweisobjekts prüfen, um festzustellen, ob es sich um PasswordCredential handelt. (type == 'password') oder FederatedCredential (type == 'federated'). Wenn der Berechtigungsnachweis ein FederatedCredential, 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

Flussdiagramm zur Verwaltung von Anmeldedaten.

Anmeldedaten speichern

Wenn sich ein Nutzer über ein Formular auf Ihrer Website anmeldet, navigator.credentials.store() zum Speichern der Anmeldedaten. Der Nutzer wird aufgefordert, sie zu speichern. Je nach Für den Typ der Anmeldedaten verwenden Sie new PasswordCredential(). oder new FederatedCredential() um ein Anmeldedatenobjekt zu erstellen, das Sie speichern möchten.

Chrome fragt die Nutzer, ob sie die Anmeldedaten (oder einen Föderationsanbieter) speichern möchten. — </ph> Chrome fragt Nutzer, ob sie die Anmeldedaten (oder einen Föderationsanbieter) speichern möchten

Passwort-Anmeldedaten aus einem Formularelement erstellen und speichern

Im folgenden Code werden autocomplete-Attribute verwendet, um Karte des Formulars an PasswordCredential Objektparameter.

HTML-Datei 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
});

Zulassen, dass Nutzer sich automatisch wieder anmelden

Wenn ein Nutzer Ihre Website verlässt und später zurückkehrt, Sitzung abgelaufen ist. Sie sollten den Nutzer nicht jedes Mal auffordern, sein Passwort einzugeben und kommen Sie zurück. Erlauben Sie dem Nutzer, sich automatisch wieder anzumelden.

</ph> Wenn ein Nutzer automatisch angemeldet wird, wird eine Benachrichtigung angezeigt.

Berechtigungsobjekt 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 ähnlich aussehen, wie Sie bereits unter "Kontoauswahl anzeigen" beim Anmelden“ . Der einzige Unterschied besteht darin, unmediated: true

Dadurch wird die Funktion sofort aufgelöst und Sie erhalten die Anmeldedaten für automatisch angemeldet werden. Es gibt einige Bedingungen:

Der Nutzer hat die automatische Anmeldefunktion in einer freundlichen Begrüßung bestätigt.
Der Nutzer hat sich zuvor über die 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, sind Sie dafür verantwortlich, dass der Nutzer nicht automatisch wieder angemeldet wird. Um sicherzustellen, bietet die Credential Management API einen Mechanismus, der als Vermittlung bezeichnet wird. Sie können den Vermittlungsmodus aktivieren, indem Sie navigator.credentials.requireUserMediation() Wenn der Vermittlungsstatus des Nutzers für den Ursprung aktiviert ist, verwenden Sie unmediated: true mit navigator.credentials.get(), wird diese Funktion mit undefined lösen können.

Automatische Anmeldung vermitteln

navigator.credentials.requireUserMediation();

Flussdiagramm für die automatische Anmeldung

FAQ

Kann JavaScript auf der Website die Rohdaten Passwort ändern? Nein. Sie können Passwörter nur im Rahmen von PasswordCredential abrufen. in irgendeiner Weise präsentiert werden kann.

Ist es möglich, mit Anmeldedaten drei Ziffern für eine ID zu speichern Management API? Derzeit nicht. Ihr Feedback zur Spezifikation sehr geschätzt.

Kann ich die Credential Management API in einem iFrame verwenden? Die API ist auf Kontexte der obersten Ebene beschränkt. Anrufe an .get() oder .store() in einem iFrame sofort und ohne Wirkung aufgelöst wird.

Kann ich meine Chrome-Erweiterung für die Passwortverwaltung in die Anmeldedaten Management API? Sie können navigator.credentials überschreiben und mit Ihrer Chrome-Erweiterung verknüpfen, um Anmeldedaten für get() oder store()

Ressourcen

Weitere Informationen zur Credential Management API findest du im Integrationsleitfaden.