L'API Credential Management est une API de navigateur normalisée qui fournit une interface de programmation entre le site et le navigateur pour une connexion fluide sur tous les appareils.
L'API Credential Management:
- Faciliter la procédure de connexion : les utilisateurs peuvent se reconnecter automatiquement à un site, même si leur session a expiré ou si leurs identifiants ont été enregistrés sur un autre appareil.
- Permet la connexion en un geste avec le sélecteur de compte : les utilisateurs peuvent choisir un compte dans un sélecteur de compte natif.
- Stocke les identifiants : votre application peut stocker une combinaison de nom d'utilisateur et mot de passe, ou même des informations de compte fédéré. Ces identifiants peuvent être synchronisés sur tous les appareils par le navigateur.
Vous voulez la voir en action ? Essayez le Démonstration de l'API Credential Management et consultez code.
Vérifier la compatibilité du navigateur avec l'API Credential Management
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Avant d'utiliser l'API Credential Management, vérifiez si PasswordCredential
ou FederatedCredential
est pris en charge.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
Utilisateur connecté
Pour connecter l'utilisateur, récupérez les identifiants du mot de passe du navigateur et les utiliser pour connecter l’utilisateur.
Exemple :
- Lorsqu'un utilisateur arrive sur votre site
et qu'il n'est pas connecté,
appelez
navigator.credentials.get()
. - Utilisez les identifiants récupérés pour connecter l'utilisateur.
- Mettez à jour l'interface utilisateur pour indiquer que l'utilisateur est connecté.
Pour en savoir plus, consultez Utilisateurs connectés :
Enregistrer ou mettre à jour les identifiants utilisateur
Si l'utilisateur s'est connecté avec un fournisseur d'identité fédérée tel que Google Sign-In, Facebook, GitHub:
- Une fois que l'utilisateur s'est connecté ou a créé un compte, créez le
FederatedCredential
avec l'adresse e-mail de l'utilisateur en tant que l'ID et spécifiez le fournisseur d'identité avecFederatedCredentials.provider
. - Enregistrez l'objet d'identification à l'aide de
navigator.credentials.store()
.
Pour en savoir plus, consultez Utilisateurs connectés :
Si l'utilisateur s'est connecté avec un nom d'utilisateur et un mot de passe:
- Une fois que l'utilisateur s'est connecté ou a créé un compte, créez la
PasswordCredential
avec l'ID utilisateur et le mot de passe. - Enregistrez l'objet d'identification à l'aide de
navigator.credentials.store()
.
Pour en savoir plus, consultez Enregistrer les identifiants issus de Forms
Se déconnecter
Lorsque l'utilisateur se déconnecte, appelez navigator.credentials.preventSilentAccess()
.
pour empêcher l'utilisateur d'être automatiquement reconnecté.
La désactivation de la connexion automatique permet également aux utilisateurs de basculer facilement entre les comptes, par exemple, entre les comptes professionnel et personnel, ou entre les comptes sur appareils partagés, sans avoir à saisir à nouveau leurs informations de connexion.
Pour en savoir plus, consultez Déconnectez-vous.