Pour connecter des utilisateurs, récupérez les identifiants du mot de passe du navigateur gestionnaire et les utiliser pour connecter automatiquement les utilisateurs. Pour les utilisateurs ayant plusieurs comptes, les laisser sélectionner le compte en un seul tapotement à l’aide du sélecteur de compte.
Connexion automatique
La connexion automatique peut se produire n'importe où sur votre site Web. non seulement la page supérieure, mais aussi d'autres pages feuilles. Il est utile lorsque les utilisateurs accèdent à différentes pages de votre site Web, via un moteur de recherche.
Pour activer la connexion automatique:
- Obtenir les informations d'identification
- Authentifiez l'utilisateur.
- Mettez à jour l'UI ou accédez à la page personnalisée.
Obtenir les informations d'identification
Pour obtenir des informations d'identification, appelez
navigator.credentials.get()
Spécifier le type d'identifiants à demander
en lui attribuant un password ou un federated.
Toujours utiliser mediation: 'silent' pour les connexions automatiques
Vous pouvez donc facilement ignorer la procédure si l'utilisateur:
- Aucun identifiant n'est stocké.
- Plusieurs identifiants sont stockés.
- L'utilisateur est déconnecté.
Avant d'obtenir un certificat, n'oubliez pas de vérifier si l'utilisateur est déjà connecté:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
La promesse renvoyée par navigator.credentials.get() résout
avec un objet d'identification ou null.
Pour déterminer s'il s'agit d'un PasswordCredential ou d'un FederatedCredential,
il suffit d'examiner la propriété .type de l'objet,
qui sera password ou federated.
Si .type est federated,
La propriété .provider est une chaîne représentant le fournisseur d'identité.
Authentifier l'utilisateur
Une fois que vous avez les identifiants,
exécuter un flux d'authentification
en fonction du type d'identifiant,
password ou federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Une fois la promesse résolue, vérifiez si vous avez reçu un objet d'identification. Si ce n'est pas le cas, cela signifie que la connexion automatique n'a pas pu être effectuée. Fermez silencieusement le processus de connexion automatique.
Mettre à jour l'UI
Si l'authentification réussit, mettre à jour l'interface utilisateur ou rediriger l'utilisateur vers la page personnalisée:
}).then(profile => {
if (profile) {
updateUI(profile);
}
N'oubliez pas d'afficher le message d'erreur d'authentification
Pour éviter toute confusion chez l'utilisateur, les utilisateurs doivent voir un toast bleu indiquant "Connexion" au moment de l'obtention de l'objet d'identification:
Conseil important: si vous parvenez à obtenir un objet d'identification mais que vous ne parvenez pas à authentifier l'utilisateur, un message d'erreur s'affiche:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Exemple de code complet
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');
});
}
}
Se connecter via le sélecteur de compte
Si un utilisateur a besoin d'une médiation ou possède plusieurs comptes, utilisez le sélecteur de compte pour permettre à l'utilisateur de se connecter, en ignorant la forme de connexion ordinaire, par exemple:
La procédure de connexion à l'aide du sélecteur de compte est la même que dans connexion automatique avec un appel supplémentaire pour afficher le sélecteur de compte lors de l'obtention des informations d'identification:
- Obtenez les informations d'identification et affichez le sélecteur de compte.
- Authentifiez l'utilisateur.
- Mettez à jour l'UI ou accédez à une page personnalisée.
Obtenir des informations d'identification et afficher le sélecteur de compte
afficher un sélecteur de compte en réponse à une action définie de l'utilisateur ;
par exemple, lorsque l'utilisateur appuie sur le bouton "Se connecter" . Appeler
navigator.credentials.get(),
et ajoutez mediation: 'optional' ou mediation: 'required' pour afficher le sélecteur de compte.
Lorsque mediation est défini sur required, l'utilisateur voit toujours un sélecteur de compte pour se connecter.
Cette option permet aux utilisateurs disposant de plusieurs comptes de passer facilement de l'un à l'autre.
Lorsque mediation est défini sur optional,
l'utilisateur voit explicitement un sélecteur de compte se connecter après un
navigator.credentials.preventSilentAccess()
.
Cela permet généralement d'éviter que la connexion automatique n'ait lieu
après que l'utilisateur a choisi
de se déconnecter ou de se désinscrire.
Exemple illustrant 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 => {
Une fois que l'utilisateur
sélectionne un compte,
la promesse est résolue avec l'identifiant.
Si les utilisateurs désactivent
le sélecteur de compte,
ou qu'aucun identifiant ne soit stocké,
la promesse est résolue avec null.
Dans ce cas, utilisez le formulaire de connexion.
N'oubliez pas de revenir au formulaire de connexion
Vous devriez revenir au formulaire de connexion pour l'une des raisons suivantes:
- Aucun identifiant n'est stocké.
- L'utilisateur a ignoré le sélecteur de compte sans sélectionner de compte.
- L'API n'est pas disponible.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Exemple de code complet
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';
});
}
});
Connexion fédérée
La connexion fédérée permet aux utilisateurs de se connecter en un tap et sans avoir à mémoriser d'autres informations de connexion pour votre site Web.
Pour implémenter la connexion fédérée:
- Authentifiez l'utilisateur avec une identité tierce.
- Stockez les informations d'identité.
- Mettez à jour l'interface utilisateur ou accédez à une page personnalisée (comme pour la connexion automatique).
Authentifier l'utilisateur avec une identité tierce
Lorsqu'un utilisateur appuie sur un bouton
de connexion fédérée,
exécuter le flux d'authentification spécifique du fournisseur d'identité
FederatedCredential
Par exemple, si le fournisseur est Google, utilisez la méthode Bibliothèque JavaScript Google Sign-In:
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 || '',
});
}
});
Google Sign-In génère un jeton d'ID comme preuve d'authentification.
En général, les connexions fédérées sont basées sur les protocoles standard tels que OpenID Connect ou OAuth. Pour apprendre à s’authentifier avec des comptes fédérés, se référer aux données de chaque fournisseur d'identité fédérée documents. Voici quelques exemples courants:
Informations sur l'identité du magasin
Une fois l'authentification effectuée, vous pouvez stocker les informations d'identité.
Les informations que vous allez stocker ici sont l'id du fournisseur d'identité
et une chaîne de fournisseur représentant le fournisseur d'identité
(name et iconURL sont facultatifs).
Pour en savoir plus, consultez les
Spécification de la gestion des identifiants
Pour stocker les détails d'un compte fédéré, instanciez
FederatedCredential
avec l'identifiant de l'utilisateur et celui du fournisseur.
Ensuite, invoquez
navigator.credentials.store()
pour stocker les informations d'identité.
Après la réussite de la fédération,
instanciez FederatedCredential de manière synchrone ou asynchrone:
Exemple d'approche synchrone:
// 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
});
Exemple d'approche asynchrone:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Stockez ensuite l'objet d'identification:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Se déconnecter
Déconnectez vos utilisateurs lorsque l'utilisateur appuie sur le bouton de déconnexion. Commencez par mettre fin à la session, puis désactivez la connexion automatique pour vos prochaines visites. (C'est à vous de décider comment mettre fin à une session.)
Désactiver la connexion automatique pour les prochaines visites
Appeler
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Ainsi, la connexion automatique ne se produira pas tant que l'utilisateur ne l'aura pas activée. Pour réactiver la connexion automatique, l'utilisateur peut choisir de se connecter intentionnellement en choisissant le compte auquel il souhaite se connecter dans le sélecteur de compte. Ensuite, l'utilisateur est toujours connecté jusqu'à ce qu'il se déconnecte explicitement.