Connexion et déconnexion automatiques

Cette page explique comment implémenter des fonctionnalités liées à la façon dont les utilisateurs se connectent ou se déconnectent avec Google One-Tap.

Connecter automatiquement les utilisateurs

Google One Tap est compatible avec la connexion automatique, qui offre une expérience utilisateur fluide en supprimant les étapes manuelles que les utilisateurs doivent suivre lorsqu'ils reviennent sur votre site. Les utilisateurs n'ont pas besoin de se souvenir du compte Google qu'ils ont sélectionné lors de leur dernière visite, ce qui réduit le risque de création de comptes en double inutiles sur votre plate-forme.

La connexion automatique est destinée à compléter notre bouton "Se connecter avec Google" et nos boîtes de dialogue One Tap. Il est conçu pour être utilisé sur l'ensemble de votre site, avec une inscription manuelle ou un changement de compte qui ne se produisent qu'après que l'utilisateur s'est déconnecté de votre site.

Pour que la connexion automatique ait lieu, les conditions suivantes doivent être remplies :

  • les utilisateurs doivent d'abord être connectés à leur compte Google ;
  • ont déjà donné leur consentement pour partager le profil de leur compte avec votre application ;
  • lors de l'utilisation de FedCM, n'a effectué qu'une seule tentative de connexion au cours des 10 dernières minutes. La connexion en un clic s'affiche lorsque des tentatives de connexion répétées ont lieu pendant cette période.
  • Lorsque les utilisateurs utilisent FedCM, Chrome leur demande de reconfirmer qu'ils souhaitent se connecter au site Web avec leur compte Google dans chaque instance Chrome, même s'ils ont approuvé le site Web avant le déploiement de FedCM. Ce changement peut avoir un impact sur le taux de conversion de votre site existant utilisant One Tap. Dans la mise à jour M121 de Chrome, l'amélioration de la connexion automatique atténue le problème de baisse du taux de conversion.

Pour les pages sur lesquelles la connexion automatique est activée, si ces conditions sont remplies, l'identifiant de jeton de l'utilisateur est automatiquement renvoyé sans aucune interaction de l'utilisateur. Si ces conditions ne sont pas remplies, l'utilisateur est redirigé par défaut vers le flux One Tap pour la connexion ou le consentement, même si la connexion automatique est activée sur la page. Si un utilisateur possède plusieurs comptes Google et qu'il visite votre site, il doit d'abord se connecter à un seul compte Google et avoir donné son consentement pour ce compte.

Vous pouvez mesurer le taux de réussite de la connexion automatique à l'aide de la valeur auto dans le champ select_by de l'objet d'identifiant renvoyé.

Pour activer la connexion automatique, ajoutez data-auto_select="true" à votre code, comme indiqué dans l'extrait suivant :

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-auto_select="true">
</div>

Se déconnecter

Lorsqu'un utilisateur se déconnecte de votre site Web, il peut être redirigé vers une page où une invite Google One Tap s'affiche automatiquement. Pour cette configuration, la sélection automatique doit être interdite. Sinon, l'utilisateur est automatiquement reconnecté, ce qui entraîne une boucle sans fin dans l'expérience utilisateur.

Utiliser FedCM

Pour améliorer l'expérience utilisateur, une période de silence de 10 minutes est observée entre chaque tentative de connexion automatique. Pendant cette période, l'invite S'identifier d'un seul geste s'affiche à la place. Les utilisateurs doivent cliquer explicitement sur "S'identifier en un clic" pour se connecter.

Sans FedCM

Pour interdire la sélection automatique après la déconnexion d'un utilisateur, ajoutez le nom de classe g_id_signout à tous vos liens et boutons de déconnexion. Consultez l'extrait de code suivant :

<div class="g_id_signout">Sign Out</div>

L'extrait de code JavaScript suivant peut également être utilisé pour se déconnecter :

const button = document.getElementById('signout_button');
button.onclick = () => {
  google.accounts.id.disableAutoSelect();
}

Pour éviter une boucle sans fin dans l'expérience utilisateur, l'état de déconnexion de l'utilisateur est stocké dans un cookie nommé g_state, qui est défini par la bibliothèque Google Identity Services. Par défaut, le domaine du cookie est défini sur le domaine de la page actuelle. Si l'authentification en un clic s'affiche sur le domaine parent et les sous-domaines, le cookie d'état doit être visible sur tous vos domaines. Utilisez l'attribut data-state_cookie_domain pour définir le domaine du cookie g_state sur votre domaine parent. Par exemple, ajoutez data-state_cookie_domain="example.com" à l'élément g_id_onload pour un domaine parent example.com et un sous-domaine nommé webapp.example.com.

Si vous disposez d'un service qui surveille tous les cookies utilisés dans votre domaine, vous devez l'informer du cookie g_state.

Si vous ne souhaitez pas charger la bibliothèque cliente sur vos pages post-connexion, utilisez ces solutions pour éviter une boucle sans fin de l'expérience utilisateur après la déconnexion :

  • Lors de la déconnexion, redirigez les utilisateurs vers une page (par exemple, https://example.com/logged_out) où l'authentification One Tap n'est pas affichée ou où la connexion automatique est toujours désactivée.
  • Ajoutez un paramètre à l'URL lors de la déconnexion. Par exemple : logged_out=1. Lorsque vous affichez One Tap avec l'API JavaScript, vérifiez le paramètre d'URL et désactivez la connexion automatique si elle est présente.

Principaux parcours utilisateur

Page de connexion automatique

Utiliser FedCM

Pop-up de connexion automatique FedCM

Les utilisateurs peuvent fermer l'invite S'identifier en un clic en cliquant sur le bouton X. Pour des raisons d'accessibilité, un jeton d'identité est partagé avec votre site Web même si les utilisateurs cliquent sur le bouton X.

Pour améliorer l'expérience utilisateur, une période de silence de 10 minutes est observée entre chaque tentative de connexion automatique. Pendant cette période, l'invite S'identifier d'un seul geste s'affiche à la place. Les utilisateurs doivent cliquer explicitement sur "S'identifier en un clic" pour se connecter.

Sans FedCM

Exemple de pop-up de connexion automatique.

Si les utilisateurs ne cliquent pas sur le bouton Annuler dans les cinq secondes, un jeton d'identité est partagé avec votre site Web.

Lorsque la connexion est annulée, la page du sélecteur de compte ou la page de l'utilisateur connu s'affiche en fonction du nombre de sessions Google actives.

  • Plusieurs sessions Google

Exemple de page du sélecteur de compte

  • Sessions Google uniques

Page de l&#39;utilisateur connu avec authentification en un clic