Pour connecter les utilisateurs, récupérez les identifiants à partir du gestionnaire de mots de passe du navigateur et utilisez-les pour connecter automatiquement les utilisateurs. Si vous possédez plusieurs comptes, permettez-leur de le sélectionner d'un simple geste à l'aide du sélecteur de compte.
Connexion automatique
La connexion automatique peut se produire n'importe où sur votre site Web, pas seulement sur la page d'accueil, mais aussi sur d'autres pages d'informations détaillées. Cette fonctionnalité 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 des informations d'identification
- Authentifiez l'utilisateur.
- Mettez à jour l'UI ou accédez à la page personnalisée.
Obtenir des informations d'identification
Pour obtenir des informations d'identification, appelez navigator.credentials.get().
Spécifiez le type d'identifiants à demander en lui attribuant un password ou un federated.
Utilisez toujours mediation: 'silent' pour les connexions automatiques. Vous pourrez ainsi facilement ignorer le processus si l'utilisateur:
- Aucun identifiant n'a été stocké.
- Plusieurs identifiants sont stockés.
- est déconnecté ;
Avant d'obtenir des identifiants, 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() se résout avec un objet d'identification ou null.
Pour déterminer s'il s'agit d'un PasswordCredential ou d'un FederatedCredential, examinez simplement la propriété .type de l'objet, qui sera password ou federated.
Si .type est défini sur federated, la propriété .provider est une chaîne représentant le fournisseur d'identité.
Authentifier l'utilisateur
Une fois que vous disposez des identifiants, exécutez 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. ignorer le processus de connexion automatique ;
Mettre à jour l'UI
Si l'authentification réussit, mettez à jour l'UI ou redirigez 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, 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 doit s'afficher:
}).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');
});
}
}
Connexion via le sélecteur de compte
Si un utilisateur nécessite une médiation ou possède plusieurs comptes, utilisez le sélecteur de compte pour lui permettre de se connecter, en ignorant le formulaire de connexion standard, par exemple:
La procédure de connexion via le sélecteur de compte est la même que pour la connexion automatique, avec un appel supplémentaire permettant d'afficher le sélecteur de compte dans le cadre de l'obtention des informations d'identification:
- Obtenir les informations d'identification et afficher le sélecteur de compte
- Authentifiez l'utilisateur.
- Mettez à jour l'UI ou accédez à une page personnalisée.
Obtenir des informations sur les identifiants et afficher le sélecteur de compte
Affichez 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". Appelez navigator.credentials.get(), puis ajoutez mediation: 'optional' ou mediation: 'required' pour afficher le sélecteur de compte.
Lorsque mediation est défini sur required, un sélecteur de compte s'affiche toujours pour permettre à l'utilisateur de se connecter.
Cette option permet aux utilisateurs possédant plusieurs comptes de passer facilement de l'un à l'autre.
Lorsque mediation est défini sur optional, un sélecteur de compte est explicitement présenté à l'utilisateur pour qu'il se connecte après un appel navigator.credentials.preventSilentAccess().
Cela permet généralement de s'assurer que la connexion automatique ne se produit pas une fois que l'utilisateur choisit 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 a sélectionné un compte, la promesse se résout avec les identifiants.
Si les utilisateurs annulent le sélecteur de compte ou si aucun identifiant n'est 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
Nous vous conseillons de revenir à un formulaire de connexion pour l'une des raisons suivantes:
- Aucun identifiant n'est stocké.
- L'utilisateur a fermé 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 seul geste 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 à l'aide d'une identité tierce.
- Stockez les informations d'identité.
- Mettez à jour l'UI 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écutez le flux d'authentification par fournisseur d'identité spécifique avec FederatedCredential.
Par exemple, si le fournisseur est Google, utilisez la 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 reposent sur des protocoles standards tels qu'OpenID Connect ou OAuth. Pour savoir comment s'authentifier avec des comptes fédérés, consultez la documentation de chaque fournisseur d'identité fédérée. Voici quelques exemples courants:
Stocker les informations d'identité
Une fois l'authentification effectuée, vous pouvez stocker les informations d'identité.
Les informations que vous stockez ici sont les id du fournisseur d'identité et une chaîne de fournisseur qui le représente (name et iconURL sont facultatifs).
Pour en savoir plus sur ces informations, consultez la spécification concernant la gestion des identifiants.
Pour stocker les détails du compte fédéré, instanciez un nouvel objet FederatedCredential avec l'identifiant de l'utilisateur et celui du fournisseur.
Appelez ensuite navigator.credentials.store() pour stocker les informations d'identité.
Une fois la fédération réussie, instanciez un 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. (La procédure d'arrêt des sessions vous revient entièrement.)
Désactiver la connexion automatique pour les prochaines visites
Appelez navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Ainsi, la connexion automatique n'aura pas lieu avant la prochaine activation de la connexion automatique par l'utilisateur. Pour réactiver la connexion automatique, un utilisateur peut choisir de se connecter intentionnellement en sélectionnant le compte avec lequel il souhaite se connecter à partir du sélecteur de compte. L'utilisateur est alors toujours reconnecté jusqu'à ce qu'il se déconnecte explicitement.