Per eseguire l'accesso degli utenti, recupera le credenziali dalla password del browser e utilizzarli per far accedere automaticamente gli utenti. Per gli utenti con più account, possono selezionare l'account con un solo tocco utilizzando il Selettore account.
Accesso automatico
L'accesso automatico può avvenire ovunque sul sito web. non solo la pagina superiore, ma anche altre pagine foglia. Ciò è utile quando gli utenti raggiungono varie pagine del sito web, tramite un motore di ricerca.
Per attivare l'accesso automatico:
- Recupera le informazioni sulle credenziali.
- Autenticare l'utente.
- Aggiorna l'UI o vai alla pagina personalizzata.
Recupera informazioni sulle credenziali
Per ottenere le informazioni sulle credenziali, richiama
navigator.credentials.get()
Specifica il tipo di credenziali da richiedere
assegnandogli un valore password o federated.
Usa sempre mediation: 'silent' per gli accessi automatici
Puoi quindi ignorare facilmente la procedura se l'utente:
- Non ha credenziali memorizzate.
- Ha più credenziali memorizzate.
- Non abbia eseguito l'accesso.
Prima di ottenere una credenziale, non dimenticare di controllare se l'utente ha già eseguito l'accesso:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
La promessa restituita da navigator.credentials.get() viene risolta
con un oggetto credenziali o null.
Per determinare se si tratta di un PasswordCredential o di un FederatedCredential,
esamina semplicemente la proprietà .type dell'oggetto
che sarà password o federated.
Se .type è federated,
La proprietà .provider è una stringa che rappresenta il provider di identità.
Autentica utente
Una volta ottenuta la credenziale,
eseguire un flusso di autenticazione in base al tipo di credenziale,
password o federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Una volta risolta la promessa, verifica di aver ricevuto un oggetto credenziali. In caso contrario, significa che l'accesso automatico non può essere eseguito. Ignora silenziosamente la procedura di accesso automatico.
Aggiorna UI
Se l'autenticazione ha esito positivo, aggiorna l'interfaccia utente o inoltra l'utente alla pagina personalizzata:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Non dimenticare di mostrare il messaggio di errore relativo all'autenticazione
Per evitare confusione, Gli utenti visualizzeranno un avviso blu con il messaggio "Accesso" al momento di ottenere l'oggetto credenziali:
Suggerimento importante: se riesci a ottenere un oggetto credenziali ma non riesci ad autenticare l'utente, dovresti visualizzare un messaggio di errore:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Esempio di codice completo
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
showError('Sign-in Failed');
});
}
}
Accesso tramite Selettore account
Se un utente richiede la mediazione o ha più account, utilizzare il selettore account per consentire all'utente di accedere, saltando il normale modulo di accesso, ad esempio:
I passaggi per accedere tramite il Selettore account sono gli stessi di accesso automatico, con una chiamata aggiuntiva per mostrare il Selettore account nell'ambito del recupero delle informazioni sulle credenziali:
- Recupera le informazioni delle credenziali e mostra il selettore account.
- Autentica l'utente.
- Aggiorna l'UI o passa a una pagina personalizzata.
Ottieni informazioni sulle credenziali e mostra Selettore account
Mostrare un selettore account in risposta a un'azione definita da un utente
Ad esempio, quando l'utente tocca il pulsante . Chiama
navigator.credentials.get(),
e aggiungi mediation: 'optional' o mediation: 'required' per mostrare il selettore account.
Se il criterio mediation è impostato su required, all'utente viene sempre mostrato un Selettore account per accedere.
Questa opzione consente agli utenti con più account di passare facilmente da un account all'altro.
Quando il valore del campo mediation è optional,
all'utente viene mostrato esplicitamente un selettore account per eseguire l'accesso dopo
navigator.credentials.preventSilentAccess()
chiamata.
Generalmente, per garantire che non venga eseguito l'accesso automatico
dopo che l'utente ha deciso di uscire o di annullare la registrazione.
Esempio di visualizzazione di mediation: 'optional':
var signin = document.querySelector('#signin');
signin.addEventListener('click', e => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials.get({
password: true,
federated: {
providers: [
'https://accounts.google.com'
]
},
mediation: 'optional'
}).then(c => {
Dopo che l'utente ha selezionato un account,
la promessa si risolve con la credenziale.
Se gli utenti annullano il Selettore account,
o non sono archiviate le credenziali,
la promessa si risolve con null.
In questo caso, torna all'esperienza del modulo di accesso.
Non dimenticare di ricorrere al modulo di accesso
Dovresti ricorrere a un modulo di accesso per uno dei seguenti motivi:
- Nessuna credenziale memorizzata.
- L'utente ha ignorato il Selettore account senza selezionare un account.
- L'API non è disponibile.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Esempio di codice completo
var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'optional',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
})
.catch((error) => {
location.href = '/signin';
});
}
});
Accesso federato
L'accesso federato consente agli utenti di accedere con un tocco e senza dover ricordare dati di accesso aggiuntivi per il tuo sito web.
Per implementare l'accesso federato:
- Autentica l'utente con un'identità di terze parti.
- Archivia le informazioni sull'identità.
- Aggiorna l'interfaccia utente o passa a una pagina personalizzata (come per l'accesso automatico).
Autentica l'utente con l'identità di terze parti
Quando un utente tocca un pulsante di accesso federato,
di eseguire il flusso di autenticazione del provider di identità specifico
FederatedCredential
Ad esempio, se il fornitore è Google, utilizza la Libreria JavaScript di Accedi con Google:
navigator.credentials
.get({
password: true,
mediation: 'optional',
federated: {
providers: ['https://account.google.com'],
},
})
.then(function (cred) {
if (cred) {
// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();
// Is this user already signed in?
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
// Same user as in the credential object?
if (googleUser.getBasicProfile().getEmail() === cred.id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || '',
});
}
});
Accedi con Google genera un token ID come prova dell'autenticazione.
In generale, gli accessi federati si basano su protocolli standard come OpenID Connect oppure OAuth. Per scoprire come eseguire l'autenticazione con gli account federati, fare riferimento ai rispettivi provider di identità federati documenti. Gli esempi più comuni includono:
Archiviare informazioni sull'identità
Una volta completata l'autenticazione, puoi memorizzare le informazioni sull'identità.
Le informazioni che archivierai qui sono il id del provider di identità
e una stringa del provider che rappresenta il provider di identità
(name e iconURL sono facoltativi).
Scopri di più su queste informazioni nel
Specifiche per la gestione delle credenziali.
Per archiviare i dettagli dell'account federato, crea un'istanza
FederatedCredential
con l'identificatore dell'utente e del provider.
Quindi richiama
navigator.credentials.store()
per archiviare le informazioni sull'identità.
Dopo il successo della federazione,
Crea un'istanza di un FederatedCredential in modo sincrono o asincrono:
Esempio di approccio sincrono:
// Create credential object synchronously.
var cred = new FederatedCredential({
id: id, // id in IdP
provider: 'https://account.google.com', // A string representing IdP
name: name, // name in IdP
iconURL: iconUrl, // Profile image url
});
Esempio di approccio asincrono:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Quindi, memorizza l'oggetto credenziali:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Esci
Disconnetti i tuoi utenti quando viene toccato il relativo pulsante. Termina prima la sessione, quindi disattiva l'accesso automatico per le visite future. (La modalità di interruzione delle sessioni dipende completamente da te.)
Disattiva l'accesso automatico per le visite future
Chiama
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
In questo modo, l'accesso automatico non verrà eseguito fino alla successiva attivazione da parte dell'utente. Per riprendere l'accesso automatico, un utente può scegliere di accedere intenzionalmente scegliendo l'account con cui vuole accedere dal Selettore account. Successivamente, l'utente accederà nuovamente fino a quando non esce esplicitamente.