Connecter des utilisateurs

Eiji Kitamura

Meggin Kearney

Pour connecter les utilisateurs, récupérez les identifiants dans le gestionnaire de mots de passe du navigateur et utilisez-les pour les connecter automatiquement. Pour les utilisateurs disposant de plusieurs comptes, permettez-leur de sélectionner le compte 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. Cela est utile lorsque les utilisateurs accèdent à différentes pages de votre site Web via un moteur de recherche.

Pour activer la connexion automatique :

1. Obtenez des informations sur les identifiants.
2. Authentifier l'utilisateur.
3. Mettez à jour l'UI ou accédez à la page personnalisée.

Obtenir des informations sur les identifiants

Browser Support

• 51
• 18
• 60
• 13

Source

Pour obtenir des informations sur les identifiants, 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, afin de pouvoir facilement ignorer le processus si l'utilisateur :

• Il ne contient aucun identifiant.
• 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'identifiant ou null. Pour déterminer s'il s'agit d'un PasswordCredential ou d'un FederatedCredential, il suffit de regarder la propriété .type de l'objet, qui sera soit password, soit federated.

Si .type est federated, la propriété .provider est une chaîne qui représente le fournisseur d'identité.

Authentifier l'utilisateur

Une fois que vous disposez de l'identifiant, 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'identifiant. Si ce n'est pas le cas, cela signifie que la connexion automatique n'a pas pu s'effectuer. Ignorer silencieusement 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 message toast bleu indiquant "Connexion" au moment de l'obtention de l'objet d'identifiant :

Conseil important : Si vous parvenez à obtenir un objet d'identifiant, mais que vous ne parvenez pas à authentifier l'utilisateur, vous devez afficher un message d'erreur :

        }).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 a besoin d'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 ordinaire, par exemple :

La procédure de connexion via le sélecteur de compte est identique à celle de la connexion automatique, avec un appel supplémentaire pour afficher le sélecteur de compte dans le cadre de l'obtention des informations d'identification :

1. Obtenez les informations d'identification et affichez le sélecteur de compte.
2. Authentifiez l'utilisateur.
3. Mettre à jour l'interface utilisateur ou accéder à 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 lorsqu'il appuie sur le bouton "Se connecter". Appelez navigator.credentials.get() et 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 disposant de plusieurs comptes de passer facilement de l'un à l'autre. Lorsque mediation est défini sur optional, un sélecteur de compte s'affiche explicitement pour permettre à l'utilisateur de se connecter après un appel navigator.credentials.preventSilentAccess(). Cela permet généralement de s'assurer que la connexion automatique n'a pas 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 a sélectionné un compte, la promesse est résolue avec l'identifiant. Si l'utilisateur annule le sélecteur de compte ou si aucun identifiant n'est stocké, la promesse est résolue avec null. Dans ce cas, revenez à l'expérience du formulaire de connexion.

N'oubliez pas de revenir au formulaire de connexion

Vous devez utiliser 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 d'un simple geste, sans avoir à mémoriser d'autres identifiants pour votre site Web.

Pour implémenter la connexion fédérée :

1. Authentifiez l'utilisateur avec une identité tierce.
2. Stocker les informations d'identité.
3. Mettre à jour l'UI ou accéder à 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 du fournisseur d'identité spécifique avec FederatedCredential.

Browser Support

• 51
• 79
• x
• x

Source

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 sont basées sur des protocoles standards tels que OpenID Connect ou OAuth. Pour savoir comment vous authentifier avec des comptes fédérés, consultez la documentation des fournisseurs d'identité fédérée correspondants. Voici quelques exemples populaires :

• Google Sign-In
• Facebook Login
• Connexion avec Twitter
• OAuth GitHub

Stocker des informations d'identité

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 qui représente le fournisseur d'identité (name et iconURL sont facultatifs). Pour en savoir plus sur ces informations, consultez la spécification Credential Management.

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. Ensuite, appelez 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,
  },
});

Ensuite, stockez l'objet d'identifiant :

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Se déconnecter

Déconnectez vos utilisateurs lorsqu'ils appuient sur le bouton de déconnexion. Mettez d'abord fin à la session, puis désactivez la connexion automatique pour les prochaines visites. (La façon dont vous mettez fin à vos sessions dépend entièrement de vous.)

Désactiver la connexion automatique pour les prochaines visites

Appelez navigator.credentials.preventSilentAccess() :

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

La connexion automatique ne sera alors pas effectuée tant que l'utilisateur ne l'aura pas réactivée. Pour reprendre la connexion automatique, un utilisateur peut choisir de se connecter intentionnellement en sélectionnant le compte avec lequel il souhaite se connecter dans le sélecteur de compte. L'utilisateur est ensuite toujours reconnecté jusqu'à ce qu'il se déconnecte explicitement.

Commentaires