Pour offrir une expérience utilisateur sophistiquée, il est important d'aider les utilisateurs à s'authentifier sur votre site Web. Les utilisateurs authentifiés peuvent interagir les uns avec les autres à l'aide d'un profil dédié, synchroniser des données sur plusieurs appareils ou traiter des données hors connexion. La liste est longue. Toutefois, créer, mémoriser et saisir des mots de passe peut s'avérer fastidieux pour les utilisateurs finaux, en particulier sur les écrans mobiles, ce qui les conduit à réutiliser les mêmes mots de passe sur différents sites. Il s'agit bien entendu d'un risque pour la sécurité.
La dernière version de Chrome (51) est compatible avec l'API Credential Management. Il s'agit d'une proposition de normes du W3C qui donne aux développeurs un accès programmatique au gestionnaire d'identifiants d'un navigateur et aide les utilisateurs à se connecter plus facilement.
Qu'est-ce que l'API Credential Management ?
L'API Credential Management permet aux développeurs de stocker et de récupérer les identifiants de mot de passe et les identifiants fédérés. Elle fournit trois fonctions:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Grâce à ces API simples, les développeurs peuvent effectuer des opérations performantes, par exemple:
- Permettez aux utilisateurs de se connecter d'un simple geste.
- Souvenez-vous du compte fédéré avec lequel l'utilisateur s'est connecté.
- Reconnecter les utilisateurs à l'expiration d'une session
Dans l'implémentation de Chrome, les identifiants sont stockés dans le gestionnaire de mots de passe de Chrome. Si les utilisateurs sont connectés à Chrome, ils peuvent synchroniser leurs mots de passe sur tous leurs appareils. Ces mots de passe synchronisés peuvent également être partagés avec les applications Android qui ont intégré l'API Smart Lock pour les mots de passe pour Android pour une expérience multiplate-forme fluide.
Intégrer l'API Credential Management à votre site
La manière dont vous utilisez l'API Credential Management avec votre site Web peut varier en fonction de son architecture. S'agit-il d'une application monopage ? S'agit-il d'une ancienne architecture avec des transitions de pages ? Le formulaire de connexion se trouve-t-il uniquement en haut de la page ? Les boutons de connexion sont-ils situés partout ? Les utilisateurs peuvent-ils parcourir votre site web de manière significative sans se connecter ? La fédération fonctionne-t-elle dans les fenêtres pop-up ? Ou nécessite-t-il une interaction sur plusieurs pages ?
Il est presque impossible de couvrir tous ces cas, mais examinons une application typique d'une seule page.
- La page supérieure est un formulaire d'inscription.
- En appuyant sur le bouton "Connexion", les utilisateurs accéderont à un formulaire de connexion.
- Les formulaires d'inscription et de connexion offrent les options habituelles d'identification et de fédération par identifiant/mot de passe, par exemple avec Google Sign-In et Facebook Sign-In.
L'API Credential Management vous permet d'ajouter au site les fonctionnalités suivantes, par exemple:
- Afficher un sélecteur de compte lors de la connexion:affiche une UI native du sélecteur de compte lorsqu'un utilisateur appuie sur "Se connecter".
- Stocker les identifiants:une fois la connexion réussie, proposez de stocker les informations d'identification dans le gestionnaire de mots de passe du navigateur afin de les utiliser ultérieurement.
- Permettre à l'utilisateur de se reconnecter automatiquement:permettez à l'utilisateur de se reconnecter si une session a expiré.
- Connexion automatique par médiation:lorsqu'un utilisateur se déconnecte, désactivez la connexion automatique pour sa prochaine visite.
Vous pouvez découvrir ces fonctionnalités intégrées sur un site de démonstration avec son exemple de code.
Afficher le sélecteur de compte lors de la connexion
Lorsqu'un utilisateur appuie sur un bouton "Se connecter" et qu'il accède à un formulaire de connexion, vous pouvez utiliser navigator.credentials.get() pour obtenir des informations d'identification. Chrome affiche une UI de sélection de compte dans laquelle l'utilisateur peut choisir un compte.
Obtenir un objet d'identification du mot de passe
Pour afficher les identifiants du mot de passe dans les options du compte, utilisez password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Utiliser des identifiants de mot de passe pour se connecter
Une fois que l'utilisateur a sélectionné un compte, la fonction de résolution reçoit des identifiants de mot de passe. Vous pouvez l'envoyer au serveur à l'aide de 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
Utiliser des identifiants fédérés pour se connecter
Pour afficher les comptes fédérés à un utilisateur, ajoutez federated, qui accepte un tableau de fournisseurs d'identité, aux options 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
...
Vous pouvez examiner la propriété type de l'objet d'identification pour voir s'il s'agit de PasswordCredential (type == 'password') ou FederatedCredential (type == 'federated'). Si l'identifiant est un FederatedCredential, vous pouvez appeler l'API appropriée à l'aide des informations qu'elle contient.
});
} 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
Stocker les identifiants
Lorsqu'un utilisateur se connecte à votre site Web à l'aide d'un formulaire, vous pouvez stocker les identifiants à l'aide de navigator.credentials.store(). L'utilisateur sera invité à le stocker ou non. Selon le type d'identifiant, utilisez new
PasswordCredential() ou new
FederatedCredential() pour créer un objet d'identifiant que vous souhaitez stocker.
Créer et stocker des identifiants de mot de passe à partir d'un élément de formulaire
Le code suivant utilise des attributs autocomplete pour mapper automatiquement les éléments du formulaire aux paramètres d'objet 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
});
Créer et stocker des identifiants fédérés
// 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
});
Autoriser l'utilisateur à se reconnecter automatiquement
Lorsqu'un utilisateur quitte votre site Web et y revient plus tard, il est possible que la session ait expiré. Ne demandez pas à l'utilisateur de saisir son mot de passe chaque fois qu'il revient. Autorisez l'utilisateur à se reconnecter automatiquement.
Obtenir un objet d'identification
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
...
}
});
Le code doit ressembler à ce que vous avez vu dans la section "Afficher le sélecteur de compte lors de la connexion". La seule différence est que vous allez définir unmediated: true.
La fonction est immédiatement résolue et vous disposez des identifiants nécessaires pour connecter automatiquement l'utilisateur. Il existe quelques conditions:
- L'utilisateur a accepté la fonctionnalité de connexion automatique par un message de bienvenue.
- L'utilisateur s'est déjà connecté au site Web à l'aide de l'API Credential Management.
- L'utilisateur n'a stocké qu'un seul identifiant pour votre origine.
- L'utilisateur ne s'est pas déconnecté explicitement lors de la session précédente.
Si l'une de ces conditions n'est pas remplie, la fonction sera refusée.
Utiliser la connexion automatique
Lorsqu'un utilisateur se déconnecte de votre site Web, il est de votre responsabilité de vous assurer qu'il ne sera pas automatiquement reconnecté. Pour ce faire, l'API Credential Management fournit un mécanisme appelé médiation.
Vous pouvez activer le mode de médiation en appelant navigator.credentials.requireUserMediation().
Tant que l'état de médiation de l'utilisateur pour l'origine est activé, en utilisant unmediated: true avec navigator.credentials.get(), cette fonction est résolue avec undefined.
Médiation de la connexion automatique
navigator.credentials.requireUserMediation();
Questions fréquentes
Est-il possible que JavaScript sur le site Web récupère un mot de passe brut ?
Non. Vous ne pouvez obtenir les mots de passe que via PasswordCredential, et ceux-ci ne sont exposés en aucun cas.
Est-il possible de stocker trois jeux de chiffres pour un identifiant à l'aide de l'API Credential Management ? Pas pour le moment. Vos commentaires sur la spécification seront les bienvenus.
Puis-je utiliser l'API Credential Management dans un iFrame ?
L'API est limitée aux contextes de niveau supérieur. Les appels à .get() ou .store() dans un iFrame sont résolus immédiatement et sans effet.
Puis-je intégrer mon extension Chrome de gestion des mots de passe à l'API Credential Management ?
Vous pouvez ignorer navigator.credentials et l'associer à votre extension Chrome avec les identifiants get() ou store().
Ressources
Pour en savoir plus sur l'API Credential Management, consultez le guide d'intégration.