Neueste Updates zur Credential Management API

Eiji Kitamura

Einige der hier beschriebenen Updates werden in der Google I/O-Session erklärt. Sichere und nahtlose Anmeldung: Interaktionen aufrechterhalten:

Chrome 57

Mit Chrome 57 wurde diese wichtige Änderung Credential Management API

Anmeldedaten können von einer anderen Subdomain freigegeben werden

Chrome kann jetzt Anmeldedaten, die in einer anderen Subdomain gespeichert sind, mithilfe der Credential Management API Wenn beispielsweise ein Passwort in login.example.com gespeichert ist, Ein Skript in www.example.com kann dies als eines der Kontoelemente im Dialogfeld zur Kontoauswahl anzeigen.

Sie müssen das Passwort explizit mit navigator.credentials.store() speichern, sodass Nutzer, die auf das Dialogfeld tippen, wird das Passwort übergeben und in den aktuellen Ursprung kopiert.

Nach dem Speichern steht das Passwort als Anmeldedaten zur Verfügung am gleichen Ursprung (www.example.com) ab.

Im folgenden Screenshot sind unter login.aliexpress.com gespeicherte Anmeldedaten ist für m.aliexpress.com sichtbar und kann vom Nutzer ausgewählt werden:

<ph type="x-smartling-placeholder">
</ph> Kontoauswahl mit Anmeldedaten für die ausgewählte Subdomain

Chrome 60

Mit Chrome 60 wurden einige wichtige Änderungen an der Credential Management API:

Funktionserkennung erfordert Maßnahmen

Um zu sehen, ob die Credential Management API für den Zugriff föderierte Anmeldedaten sind verfügbar. Prüfen Sie, ob window.PasswordCredential oder window.FederatedCredential ist verfügbar.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

PasswordCredential-Objekt enthält jetzt ein Passwort

Die Credential Management API verfolgte beim Umgang mit Passwörtern einen konservativen Ansatz. Passwörter wurden vor JavaScript verborgen, sodass Entwickler um das PasswordCredential-Objekt direkt an ihren Server zu senden. zur Validierung über eine Erweiterung der fetch() API.

Dieser Ansatz führte jedoch mit einer Reihe von Einschränkungen. Wir haben Feedback erhalten, dass Entwickler die API aus folgenden Gründen nicht verwenden konnten:

  • Das Passwort wurde als Teil eines JSON-Objekts gesendet.

  • Der Hashwert des Passworts wurde an den Server gesendet.

Nach der Durchführung einer Sicherheitsanalyse und der Erkenntnis, dass das Verbergen von Passwörtern erkannt wurde nicht alle Angriffsvektoren so effektiv verhinderte, wie wir es uns erhofft hatten. haben wir uns entschlossen, eine Änderung vorzunehmen.

Die Credential Management API enthält jetzt ein unformatiertes Passwort in einem zurückgegebenen Berechtigungsnachweisobjekt, sodass Sie als Klartext darauf zugreifen können. Sie können vorhandene Methoden verwenden, um Anmeldedaten an Ihren Server zu senden:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(passwordCred => {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
    } else {

    // Fallback to sign-in form
    }
}).then(res => {
    if (res.status === 200) {
    return res.json();
    } else {
    throw 'Auth failed';
    }
}).then(profile => {
    console.log('Auth succeeded', profile);
});

Der benutzerdefinierte Abruf wird bald eingestellt

So stellen Sie fest, ob Sie eine benutzerdefinierte fetch()-Funktion verwenden: Prüfe, ob ein PasswordCredential- oder ein FederatedCredential-Objekt verwendet wird als Wert der Eigenschaft credentials. Beispiel:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

Mit einer regulären fetch()-Funktion, wie im vorherigen Codebeispiel gezeigt, oder die Verwendung eines XMLHttpRequest wird empfohlen.

Bis Chrome 60 navigator.credentials.get() hat eine optionale unmediated-Property akzeptiert mit einem booleschen Flag aus. Beispiel:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).then(c => {

    // Sign-in
});

Durch die Einstellung unmediated: true wird verhindert, dass im Browser die Kontoauswahl angezeigt wird wenn ein Berechtigungsnachweis übergeben wird.

Das Flag wird jetzt als Vermittlung erweitert. Die Nutzervermittlung kann in folgenden Fällen erfolgen:

  • Ein Nutzer muss ein Konto für die Anmeldung auswählen.

  • Ein Nutzer möchte sich explizit anmelden. nach navigator.credentials.requireUseMediation() Anruf.

Wählen Sie für den Wert mediation eine der folgenden Optionen aus:

mediation Wert Im Vergleich zum booleschen Flag Verhalten
silent Ist gleich unmediated: true Anmeldedaten wurden bestanden, ohne dass eine Kontoauswahl angezeigt wird.
optional Ist gleich unmediated: false In folgenden Fällen wird eine Kontoauswahl angezeigt. preventSilentAccess() wurde bereits aufgerufen.
required Neue Option Kontoauswahl immer anzeigen. Nützlich, wenn Sie einem Nutzer erlauben möchten, ein Konto zu wechseln über das native Dialogfeld zur Kontoauswahl.

In diesem Beispiel die Anmeldedaten ohne Anzeige einer Kontoauswahl übergeben werden, Das Äquivalent zum vorherigen Flag unmediated: true:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(c => {

    // Sign-in
});

requireUserMediation() in preventSilentAccess() umbenannt

Passend zur neuen mediation-Property, die im get()-Aufruf angeboten wird, Die Methode navigator.credentials.requireUserMediation() wurde in navigator.credentials.preventSilentAccess().

Durch die umbenannte Methode können keine Anmeldedaten weitergegeben werden, ohne dass die Kontoauswahl angezeigt wird. (manchmal ohne Nutzervermittlung aufgerufen). Dies ist nützlich, wenn sich ein Nutzer von einer Website abmeldet oder und nicht beim nächsten Besuch automatisch wieder angemeldet werden möchte.

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

Anmeldedatenobjekte asynchron mit der neuen Methode navigator.credentials.create() erstellen

Sie haben jetzt die Möglichkeit, Anmeldedatenobjekte asynchron zu erstellen mit der neuen Methode navigator.credentials.create(). Im Folgenden finden Sie einen Vergleich zwischen dem synchronen und dem asynchronen Ansatz.

PasswordCredential-Objekt erstellen

Synchronisierungsansatz
let c = new PasswordCredential(form);
Asynchroner Ansatz (neu)
let c = await navigator.credentials.create({
    password: form
});

oder

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

FederatedCredential-Objekt erstellen

Synchronisierungsansatz
let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});
Asynchroner Ansatz (neu)
let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

Migrationsanleitung

Du hast die Credential Management API bereits implementiert? Eine entsprechende Anleitung finden Sie hier. können Sie ein Upgrade auf die neue Version durchführen.