Aggiornamenti più recenti all'API di gestione delle credenziali

Eiji Kitamura

Alcuni degli aggiornamenti descritti qui sono spiegati nella sessione di Google I/O, Accesso sicuro e senza interruzioni: mantenere gli utenti coinvolti:

Chrome 57

Chrome 57 ha introdotto questa importante modifica all'API Credential Management.

Le credenziali possono essere condivise da un sottodominio diverso

Chrome ora può recuperare una credenziale memorizzata in un sottodominio diverso utilizzando l'API Credential Management. Ad esempio, se una password è memorizzata in login.example.com, uno script su www.example.com può mostrarla come uno degli elementi dell'account nella finestra di dialogo del Selettore account.

Devi memorizzare esplicitamente la password utilizzando navigator.credentials.store(), in modo che quando un utente sceglie una credenziale toccando la finestra di dialogo, la password venga passata e copiata nell'origine corrente.

Una volta memorizzata, la password è disponibile come credenziale nella stessa origine www.example.com.

Nel seguente screenshot, le informazioni sulle credenziali memorizzate in login.aliexpress.com sono visibili a m.aliexpress.com e l'utente può sceglierle:

Selettore account che mostra i dettagli di accesso del sottodominio selezionato

Chrome 60

Chrome 60 introduce diverse modifiche importanti all'API Credential Management:

Il rilevamento delle caratteristiche richiede attenzione

Per verificare se l'API Credential Management per l'accesso alle credenziali federate e basate su password è disponibile, controlla se window.PasswordCredential o window.FederatedCredential è disponibile.

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

L'oggetto PasswordCredential ora include la password

L'API Credential Management ha adottato un approccio conservativo alla gestione delle password. Nascondeva le password da JavaScript, richiedendo agli sviluppatori di inviare l'oggetto PasswordCredential direttamente al proprio server per la convalida tramite un'estensione dell'API fetch().

Tuttavia, questo approccio ha introdotto una serie di limitazioni. Abbiamo ricevuto feedback secondo cui gli sviluppatori non potevano utilizzare l'API perché:

  • Dovevano inviare la password come parte di un oggetto JSON.

  • Dovevano inviare il valore hash della password al proprio server.

Dopo aver eseguito un'analisi della sicurezza e aver riconosciuto che nascondere le password da JavaScript non impediva tutti i vettori d'attacco con l'efficacia che speravamo, abbiamo deciso di apportare una modifica.

L'API Credential Management ora include una password non elaborata in un oggetto credenziale restituito, in modo che tu possa accedervi come testo normale. Puoi utilizzare i metodi esistenti per inviare le informazioni sulle credenziali al tuo server:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).the>n(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);
});

Il recupero personalizzato verrà ritirato a breve

Per determinare se utilizzi una funzione fetch() personalizzata, controlla se utilizza un oggetto PasswordCredential o un oggetto FederatedCredential come valore della proprietà credentials, ad esempio:

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

Ti consigliamo di utilizzare una normale funzione fetch(), come mostrato nell'esempio di codice precedente, o un XMLHttpRequest.

Fino a Chrome 60, navigator.credentials.get() accettava una proprietà unmediated facoltativa con un flag booleano. Ad esempio:

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

    // Sign-in
});

L'impostazione unmediated: true impedisce al browser di mostrare il selettore account quando viene passata una credenziale.

Il flag è ora esteso come mediazione. La mediazione degli utenti potrebbe avvenire quando:

  • Un utente deve scegliere un account con cui accedere.

  • Un utente vuole accedere esplicitamente dopo la chiamata navigator.credentials.requireUseMediation().

Scegli una delle seguenti opzioni per il valore mediation:

Valore mediation Rispetto al flag booleano Comportamento
silent È uguale a unmediated: true Credenziale passata senza mostrare un selettore account.
optional È uguale a unmediated: false Mostra un selettore account se preventSilentAccess() è stato chiamato in precedenza.
required Una nuova opzione Mostra sempre un selettore account. Utile quando vuoi consentire a un utente di cambiare account utilizzando la finestra di dialogo nativa del Selettore account.

In questo esempio, la credenziale viene passata senza mostrare un selettore di account, l'equivalente del flag precedente, unmediated: true:

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

    // Sign-in
});

requireUserMediation() rinominato in preventSilentAccess()

Per allinearsi perfettamente alla nuova proprietà mediation offerta nella chiamata get(), il metodo navigator.credentials.requireUserMediation() è stato rinominato in navigator.credentials.preventSilentAccess().

Il metodo rinominato impedisce il passaggio di una credenziale senza mostrare il Selettore account (a volte chiamato senza mediazione dell'utente). Ciò è utile quando un utente esce da un sito web o annulla la registrazione da un sito e non vuole che l'accesso venga eseguito automaticamente alla visita successiva.

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

Crea oggetti di credenziali in modo asincrono con il nuovo metodo navigator.credentials.create()

Ora hai la possibilità di creare oggetti di credenziali in modo asincrono con il nuovo metodo navigator.credentials.create(). Continua a leggere per un confronto tra gli approcci sincrono e asincrono.

Creazione di un oggetto PasswordCredential

Approccio alla sincronizzazione
let c = new PasswordCredential(form);
Approccio asincrono (nuovo)
let c = await navigator.credentials.create({
    password: form
});

oppure:

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

Creazione di un oggetto FederatedCredential

Approccio alla sincronizzazione
let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});
Approccio asincrono (nuovo)
let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

Guida alla migrazione

Hai già un'implementazione dell'API Credential Management? Abbiamo un documento con una guida alla migrazione che puoi seguire per eseguire l'upgrade alla nuova versione.