UX du bouton "Se connecter avec Google"

Cette page décrit l'expérience utilisateur (UX) du bouton "Se connecter avec Google".

Rendu des boutons

Un bouton personnalisé affiche les informations de profil de la première session Google qui approuve votre site Web. Une session Google approuvée correspond à un compte sur votre site Web qui s'est déjà connecté à l'aide de la fonctionnalité Se connecter avec Google.

Si un bouton personnalisé s'affiche, l'utilisateur sait ce qui suit :

• Au moins une session Google est active.
• Un compte correspondant existe sur votre site Web.

Un bouton personnalisé indique rapidement aux utilisateurs l'état de la session, à la fois du côté de Google et sur votre site Web, avant qu'ils ne cliquent sur le bouton. Cela est particulièrement utile pour les utilisateurs finaux qui ne visitent votre site Web qu'occasionnellement. Il peut oublier si un compte a été créé ou non, et de quelle manière. Un bouton personnalisé leur rappelle qu'ils ont déjà utilisé Se connecter avec Google. Cela permet d'éviter la création de comptes en double inutiles sur votre site Web.

Pour indiquer l'état de la session, le bouton personnalisé s'affiche de la manière suivante :

• Une seule session : une seule session est disponible côté Google. Cette session approuve le client et un compte correspondant existe sur votre site Web.

  

• Sessions multiples : plusieurs sessions sont actives côté Google. Ces sessions approuvent le client. L'approbation est indiquée par la flèche de liste à côté du compte affiché. Au moins une session correspond à un compte sur votre site Web.

  

• Aucune session : aucune session n'est disponible côté Google ou aucune des sessions n'a encore approuvé le client.

  

Le bouton personnalisé s'affiche automatiquement lorsque l'état de la session est approprié, sauf si les paramètres de votre bouton ne permettent pas son affichage. Le bouton personnalisé ne s'affiche pas dans les cas suivants :

• L'attribut data-type est défini sur icon.
• L'attribut data-size est défini sur medium ou small.
• L'attribut data-width est défini sur un nombre inférieur à 200 px.
• Le cookie tiers est bloqué et la version FedCM du bouton n'est pas activée.

Le nom ou l'adresse e-mail sont tronqués lorsqu'ils sont trop longs pour être affichés dans le bouton.

Gestionnaire d'identifiants fédérés (FedCM)

L'initiative Privacy Sandbox pour le Web introduit des changements importants dans les services Google Identity et la connexion des utilisateurs. Il affecte le bouton personnalisé "Se connecter avec Google". Bien que le flux de connexion ne soit pas affecté par le bouton, vos utilisateurs réguliers ne verront pas le bouton personnalisé si les cookies tiers sont bloqués.

Avec le flux de boutons de l'API Federated Credentials Management (FedCM), les utilisateurs peuvent voir le bouton personnalisé "Se connecter avec Google" sur votre site. Par défaut, FedCM est désactivé, mais vous pouvez l'activer en modifiant un attribut (HTML/JavaScript). Voici les avantages du bouton FedCM :

• Expérience améliorée pour les utilisateurs connus : le processus de connexion des utilisateurs connus est simplifié, car ils peuvent reconnaître leurs comptes existants. Il a été prouvé que cette meilleure reconnaissance permet d'obtenir un taux de clics (CTR) plus élevé. De plus, contrairement au flux de boutons sans FedCM activé, le flux de boutons FedCM est compatible avec la fonctionnalité de sélection automatique. Les utilisateurs qui ont une session Google active sont automatiquement connectés après avoir cliqué sur le bouton, ce qui leur évite d'avoir à choisir un compte.

• Intégration améliorée des fonctionnalités : nous avons intégré les fonctionnalités One Tap et de connexion automatique, ce qui permet à toutes les fonctionnalités Se connecter avec Google de la gestion des identifiants fédérés (FedCM) d'une même partie de confiance (RP) de fonctionner de concert. Les gestes de l'utilisateur dans le flux du bouton FedCM seront enregistrés et respectés par Chrome pour effectuer la reconfirmation unique du flux de connexion automatique One Tap. Cela garantit une expérience fluide pour toutes les fonctionnalités.

Principaux parcours utilisateur

Les parcours utilisateur varient en fonction des états suivants.

• État de la session sur les sites Web Google. Les termes suivants sont utilisés pour indiquer différents états de session Google au début du parcours utilisateur.

  • Has-Google-session : au moins une session active sur les sites Web de Google.
  • No-Google-session : aucune session active sur les sites Web Google.

• Indique si le compte Google sélectionné a approuvé votre site Web au début du parcours utilisateur. Les termes suivants sont utilisés pour indiquer différents états d'approbation.

  • Nouvel utilisateur : le compte sélectionné n'a pas approuvé votre site Web.
  • Utilisateur connu : le compte sélectionné a déjà approuvé votre site Web.

Parcours utilisateur "Has-Google-session"

Parcours utilisateur connu avec une session Google

Has-Google-session avec parcours utilisateur de sélection automatique des utilisateurs connus

Parcours des nouveaux utilisateurs sans session Google

Parcours utilisateur connu sans session Google

Principaux parcours utilisateur pour les comptes Family Link

Les parcours utilisateur clés généraux de la section précédente s'appliquent toujours. L'image ci-dessous montre le flux supplémentaire qui s'affiche pour le compte Google de l'enfant lors de la connexion.

Informations supplémentaires sur le flux du bouton FedCM

• Ajoutez l'attribut allow="identity-credentials-get" au frame parent si votre application Web appelle l'API Button à partir d'iFrames multi-origines. Pour en savoir plus, consultez l'étape 7.

• Configurez correctement la stratégie de sécurité du contenu (CSP) de votre site. Pour en savoir plus, consultez l'étape 8.

• L'état du délai de récupération et les paramètres de connexion tierce dans Chrome n'ont aucun impact sur le flux du bouton FedCM. L'état (comme indiqué dans les captures d'écran suivantes) n'affecte que l'expérience utilisateur One Tap.