Fonctionnalités de la fonctionnalité Se connecter avec Google

Voici les principales fonctionnalités de Se connecter avec Google. Vous pouvez utiliser le générateur de code pour générer du code permettant d'intégrer One Tap, la connexion automatique et le bouton Se connecter avec Google à vos pages Web.

Les utilisateurs peuvent désactiver la connexion tierce de manière globale dans les navigateurs compatibles avec FedCM. Lorsque les utilisateurs désactivent cette fonctionnalité, One Tap et la connexion automatique ne sont plus disponibles et ne s'affichent plus.

One Tap

Lorsque les utilisateurs accèdent à votre site Web, si une session Google est active dans le navigateur, Se connecter avec Google peut les inviter à se connecter ou à s'inscrire sur votre site Web avec leur compte Google. D'un simple geste (pour une seule session Google) ou de deux gestes (en cas de plusieurs sessions Google), les utilisateurs peuvent terminer le processus de connexion ou d'inscription fédérée. L'expérience utilisateur One Tap permet d'accéder facilement aux points d'entrée des utilisateurs, car tous les flux d'expérience utilisateur sont effectués dans un iFrame intégré à vos pages Web.

Pop-up One Tap demandant à la fois le consentement et la connexion de l'utilisateur

Les utilisateurs peuvent choisir de désactiver globalement le mode Un Tap. Dans ce cas, le compte Google n'affiche pas le mode Un Tap. Si tous les comptes Google actifs sont désactivés, l'UI One Tap ne s'affiche pas.

Nous vous recommandons d'activer le mode "Un appui" à la fois dans la boîte de dialogue de connexion principale et sur les pages de feuilles. Les développeurs préfèrent le mode Un Tap pour plusieurs raisons:

  • d'augmenter les taux de conversion des utilisateurs ; Découvrez comment certains de nos partenaires ont réussi à utiliser One Tap pour améliorer leurs expériences d'inscription et de connexion dans nos études de cas.
  • permet de se connecter et de s'inscrire sans rediriger les utilisateurs vers une page de connexion et d'inscription dédiée.
  • permet aux utilisateurs de se connecter et de s'inscrire dans le contexte de votre site Web sans avoir à quitter leur parcours actuel.
  • Limitez les comptes en double grâce à des invites personnalisées et à la connexion automatique lors des prochaines visites.

Connexion automatique

Avec One Tap, vous pouvez également activer la connexion automatique annulable, qui permet une expérience utilisateur simplifiée pour les utilisateurs réguliers. Aucun geste de l'utilisateur n'est nécessaire pour que les utilisateurs réguliers se connectent automatiquement à votre site Web. La connexion automatique se déclenche lorsqu'il n'existe qu'un seul compte Google actif ayant déjà donné son autorisation pour partager le profil de son compte avec votre application.

Les utilisateurs peuvent annuler le processus de connexion automatique pendant une courte période, ce qui garantit le contrôle et la transparence. Si les utilisateurs annulent la connexion automatique, Se connecter avec Google mémorise la décision pendant un jour avant de réactiver la connexion automatique. La fonctionnalité annulable permet aux utilisateurs de mieux contrôler le processus de connexion automatique.

Lorsque FedCM est activé, une période d'attente de 10 minutes est appliquée entre les événements de connexion automatique. Si la connexion automatique est déclenchée pendant cette période, les utilisateurs suivent le flux de connexion en un seul geste au lieu du flux de connexion automatique.

La fonctionnalité Se connecter avec Google pour le Web n'est pas compatible avec la connexion silencieuse. Dans ce cas, des identifiants sont renvoyés sans que l'UI ne s'affiche. Les utilisateurs finaux voient toujours une UI, une connexion manuelle ou automatique, lorsqu'un identifiant de connexion est renvoyé de Google à la partie de confiance. Cela améliore la confidentialité et le contrôle des utilisateurs.

Invite de connexion automatique avec Se connecter avec Google One Tap

Vous devez décider d'activer ou non la connexion automatique en fonction de l'expérience utilisateur de votre propre site Web.

Bouton "Se connecter avec Google"

Contrairement à One Tap, le flux du bouton Se connecter avec Google doit être déclenché par un geste de l'utilisateur. À cette fin, Se connecter avec Google ne fournit que l'API permettant d'afficher un bouton, mais pas l'API permettant de lancer le flux du bouton de manière programmatique. En tant que développeur, il vous suffit d'afficher le bouton Se connecter avec Google sur vos pages Web. Le moment où déclencher le flux d'expérience utilisateur du bouton est géré de manière transparente par la bibliothèque.

Bouton de connexion non personnalisé

En d'autres termes, le bouton "Se connecter avec Google" doit désormais être généré par la bibliothèque JavaScript Google Identity Services. L'API de rendu des boutons vous permet de personnaliser la couleur, la forme, le texte et la taille pour répondre aux exigences de branding de votre site Web, tout en respectant les consignes de Google. Les boutons cohérents sur les sites Web permettent aux utilisateurs de les reconnaître rapidement, de leur faire confiance et de les utiliser.

Les informations du profil utilisateur peuvent également être utilisées pour afficher le bouton. Un bouton personnalisé ne s'affiche que lorsqu'au moins une session Google active a déjà authentifié un utilisateur sur votre site Web. Un bouton personnalisé rappelle aux utilisateurs finaux qu'ils ont déjà utilisé Se connecter avec Google, ce qui permet d'éviter la création inutile de comptes en double sur votre site Web. Cela est particulièrement utile pour les utilisateurs finaux qui ne visitent votre site Web que de temps en temps. Ils peuvent oublier les méthodes de connexion qu'ils ont utilisées.

Bouton de connexion personnalisé

En plus du bouton personnalisé, le bouton Se connecter avec Google est compatible avec les comptes Google avec Family Link et respecte les règles Google Workspace définies par l'administrateur de l'organisation.

Le flux du bouton "Se connecter avec Google" est compatible avec les modes d'expérience utilisateur pop-up et de redirection.

  • Dans l'expérience utilisateur de la fenêtre pop-up, une fois que l'utilisateur a cliqué sur le bouton "Se connecter avec Google", une nouvelle fenêtre pop-up s'ouvre au-dessus de votre page Web. Le flux d'expérience utilisateur du bouton est affiché dans une fenêtre pop-up.
  • Dans l'expérience utilisateur de la redirection, une redirection pleine page se produit après avoir cliqué sur le bouton "Se connecter avec Google". Le flux d'expérience utilisateur du bouton est affiché dans la même fenêtre. Toutefois, les utilisateurs ne voient plus votre page Web lorsque l'expérience utilisateur du bouton s'affiche.

Le consentement de l'utilisateur pour partager un jeton d'ID peut être révoqué. Se connecter avec Google fournit une API permettant de révoquer le consentement de l'utilisateur de manière programmatique.

Contrairement à la méthode revoke() de l'API d'autorisation des services d'identité Google, vous n'avez pas besoin d'un jeton d'accès pour révoquer le consentement de l'utilisateur. Toutefois, vous devez fournir l'adresse e-mail ou l'ID utilisateur Google de la session Google cible. Une session Google active doit également être disponible pour ce compte dans le navigateur.

L'API de révocation révoque le partage du jeton d'ID et tout autre champ d'application d'autorisation si accordé précédemment. C'est toujours le cas, quelle que soit l'API de révocation que vous utilisez.

Générateur de code

Le générateur de code est un outil de développement qui peut vous aider à générer le code d'intégration côté client. Avec l'API HTML Se connecter avec Google, il est possible que vous n'ayez pas besoin de code JavaScript pour l'intégration côté client.

Étape 1: Configuration du générateur de code

Pour les développeurs qui choisissent d'utiliser l'API JavaScript, nous vous recommandons d'utiliser le générateur de code pour concevoir vos boutons de manière interactive. Vous pouvez également générer d'abord le code HTML, puis le copier dans les champs correspondants de l'API JavaScript.