Per offrire un'esperienza utente sofisticata, è importante aiutare gli utenti ad autenticarsi sul tuo sito web. Gli utenti autenticati possono interagire tra loro utilizzando un profilo dedicato, sincronizzare i dati su più dispositivi o elaborare i dati quando sono offline. L'elenco è sempre all'infinito. Tuttavia, creare, ricordare e digitare le password tende a essere complicato per gli utenti finali, in particolare sugli schermi dei dispositivi mobili, che li porta a riutilizzare le stesse password su siti diversi. Questo ovviamente rappresenta un rischio per la sicurezza.
La versione più recente di Chrome (51) supporta l'API Credential Management. È una proposta di monitoraggio degli standard di W3C che offre agli sviluppatori l'accesso programmatico al gestore delle credenziali di un browser e che aiuta gli utenti ad accedere più facilmente.
Che cos'è l'API Credential Management?
L'API Credential Management consente agli sviluppatori di archiviare e recuperare le credenziali delle password e le credenziali federate e fornisce 3 funzioni:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Utilizzando queste semplici API, gli sviluppatori possono fare cose potenti quali:
- Consenti agli utenti di accedere con un solo tocco.
- Ricorda l'account federato con cui l'utente ha utilizzato l'accesso.
- Registrare nuovamente gli utenti alla scadenza di una sessione.
Nell'implementazione di Chrome, le credenziali verranno archiviate nel Gestore delle password di Chrome. Se gli utenti hanno eseguito l'accesso a Chrome, possono sincronizzare le loro password su tutti i dispositivi. Le password sincronizzate possono essere condivise anche con le app per Android con l'API Smart Lock for Passwords per Android per un'esperienza multipiattaforma senza interruzioni.
Integrazione dell'API Credential Management nel tuo sito
Il modo in cui utilizzi l'API Credential Management con il tuo sito web può variare a seconda della sua architettura. Si tratta di un'app su una sola pagina? È un'architettura legacy con transizioni di pagina? Il modulo di accesso si trova solo nella parte superiore della pagina? I pulsanti di accesso si trovano ovunque? Gli utenti possono navigare nel sito web in modo significativo senza effettuare l'accesso? La federazione funziona all'interno delle finestre popup? Oppure richiede interazione su più pagine?
È quasi impossibile gestire tutti questi casi, ma diamo un'occhiata a una tipica app a pagina singola.
- La pagina superiore è un modulo di registrazione.
- Toccando il pulsante "Accedi", gli utenti verranno indirizzati a un modulo di accesso.
- Entrambi i moduli di registrazione e di accesso hanno le opzioni tipiche di credenziali di id/password e federazione, ad esempio tramite Accedi con Google e Facebook.
Utilizzando l'API Credential Management, potrai aggiungere al sito le seguenti funzionalità, ad esempio:
- Mostra un selettore account all'accesso: mostra un'interfaccia utente nativa del selettore account quando un utente tocca "Accedi".
- Memorizza le credenziali: dopo l'accesso, offri di memorizzare le informazioni credenziali nel gestore delle password del browser per utilizzarle in un secondo momento.
- Consenti all'utente di accedere automaticamente: consenti all'utente di accedere di nuovo se una sessione è scaduta.
- Mediare l'accesso automatico:quando l'utente esce dall'account, disattiva l'accesso automatico per la visita successiva.
Puoi sperimentare queste funzionalità implementate in un sito dimostrativo con il suo codice di esempio.
Mostra il Selettore account al momento dell'accesso
Tra il tocco dell'utente su un pulsante "Accedi" e la navigazione a un modulo di accesso, puoi utilizzare navigator.credentials.get() per ottenere informazioni sulle credenziali. Chrome mostrerà un'interfaccia utente di selettore account da cui l'utente può scegliere un account.
Recupero di un oggetto credenziali password
Per mostrare le credenziali della password come opzioni dell'account, utilizza password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Utilizzo di una credenziale della password per accedere
Dopo che l'utente seleziona un account, la funzione di risoluzione riceverà una credenziale per la password. Puoi inviarlo al server utilizzando fetch():
// 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
Utilizzo di una credenziale federata per accedere
Per mostrare a un utente account federati, aggiungi federated, che accetta un array di provider di identità, alle opzioni get().
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
...
Puoi esaminare la proprietà type dell'oggetto credenziali per vedere se è PasswordCredential
(type == 'password') o FederatedCredential (type == 'federated').
Se la credenziale è un
FederatedCredential,
puoi chiamare l'API appropriata utilizzando le informazioni che contiene.
});
} 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
Archivia credenziali
Quando un utente accede al tuo sito web utilizzando un modulo, puoi utilizzare navigator.credentials.store() per archiviare la credenziale. All'utente verrà chiesto di memorizzarlo o meno. A seconda del tipo di credenziale, utilizza new
PasswordCredential() o new
FederatedCredential() per creare un oggetto credenziali che vuoi archiviare.
Creazione e memorizzazione di una credenziale della password da un elemento del modulo
Il codice seguente utilizza gli attributi autocomplete per mappare automaticamente gli elementi del modulo ai parametri dell'oggetto PasswordCredential.
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
});
Creazione e archiviazione di una credenziale federata
// 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
});
Consentire all'utente di accedere di nuovo automaticamente
Quando un utente abbandona il sito web e torna in un secondo momento, è possibile che la sessione sia scaduta. Non disturbare l'utente a digitare la password ogni volta che torna. Consenti all'utente di accedere automaticamente di nuovo.
Recupero di un oggetto credenziali
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
...
}
});
Il codice dovrebbe essere simile a quello che hai visto nella sezione "Mostra il Selettore account quando accedi". L'unica differenza è che imposterai
unmediated: true.
In questo modo la funzione viene risolta immediatamente e ti viene fornita la credenziale per far accedere automaticamente l'utente. Si verificano alcune condizioni:
- L'utente ha accettato la funzionalità di accesso automatico in una cordiale benvenuto.
- L'utente ha già eseguito l'accesso al sito web utilizzando l'API Credential Management.
- L'utente ha una sola credenziale archiviata per la tua origine.
- L'utente non ha esplicitamente eseguito la disconnessione nella sessione precedente.
Se una di queste condizioni non è soddisfatta, la funzione viene rifiutata.
Eseguire la mediazione per l'accesso automatico
Quando un utente esce dal sito web, è tua responsabilità assicurarti che non venga eseguito di nuovo automaticamente l'accesso. Per farlo, l'API Credential Management fornisce un meccanismo chiamato mediazione.
Puoi attivare la modalità di mediazione chiamando
navigator.credentials.requireUserMediation().
Se lo stato di mediazione dell'utente per l'origine è attivo e se utilizzi unmediated: true con navigator.credentials.get(), la funzione verrà risolta con undefined.
Mediazione dell'accesso automatico
navigator.credentials.requireUserMediation();
Domande frequenti
È possibile che JavaScript sul sito web recuperi una password non elaborata?
No. Puoi ottenere le password solo come parte di PasswordCredential e non è possibile visualizzarle in alcun modo.
È possibile archiviare 3 set di cifre per un ID utilizzando l'API Credential Management? Al momento no. Il tuo feedback sulla specifica sarà molto apprezzato.
Posso utilizzare l'API Credential Management all'interno di un iframe?
L'API è limitata ai contesti di primo livello. Le chiamate a .get() o .store()
in un iframe verranno risolte immediatamente senza effetto.
Posso integrare la mia estensione di Chrome per la gestione delle password con l'API Credential Management?
Puoi eseguire l'override di navigator.credentials e collegarlo all'estensione di Chrome alle credenziali get() o store().
Risorse
Per scoprire di più sull'API Credential Management, visita la pagina Guida all'integrazione.