Afficher le bouton "Se connecter avec Google"

Ajoutez un bouton "Se connecter avec Google" à votre site pour permettre aux utilisateurs de s'inscrire ou de se connecter à votre application Web. Utilisez HTML ou JavaScript pour afficher le bouton et les attributs afin de personnaliser sa forme, sa taille, son texte et son thème.

Bouton de connexion personnalisé.

Une fois qu'un utilisateur a sélectionné un compte Google et donné son consentement, Google partage son profil à l'aide d'un jeton Web JSON (JWT). Pour obtenir un aperçu des étapes impliquées lors de la connexion et de l'expérience utilisateur, consultez Fonctionnement. La section Comprendre le bouton personnalisé présente les différentes conditions et états qui affectent la façon dont le bouton s'affiche pour les utilisateurs.

Prérequis

Suivez les étapes décrites dans Configuration pour configurer votre écran de consentement OAuth Screen, obtenir un ID client et charger la bibliothèque cliente.

Affichage du bouton

Pour afficher le bouton "Se connecter avec Google", vous pouvez choisir d'utiliser HTML ou JavaScript sur votre page de connexion :

HTML

Affichez le bouton de connexion à l'aide de HTML, en renvoyant le JWT au point de terminaison de connexion de votre plate-forme.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

Un élément avec une classe g_id_signin s'affiche sous la forme d'un bouton "Se connecter avec Google". Le bouton est personnalisé par les paramètres fournis dans les attributs de données.

Pour afficher un bouton "Se connecter avec Google" et Google One Tap sur la même page, supprimez data-auto_prompt="false". Nous vous recommandons de le faire pour réduire les frictions et améliorer les taux de connexion.

Pour obtenir la liste complète des attributs de données, consultez la g_id_signin page de référence

JavaScript

Affichez le bouton de connexion à l'aide de JavaScript, en renvoyant le JWT au gestionnaire de rappel JavaScript du navigateur.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

L'élément spécifié comme premier paramètre de renderButton s'affiche sous la forme d'un bouton "Se connecter avec Google". Dans cet exemple, buttonDiv est utilisé pour afficher le bouton sur la page. Le bouton est personnalisé à l'aide des attributs spécifiés dans le deuxième paramètre de renderButton.

Pour minimiser les frictions pour l'utilisateur, google.accounts.id.prompt() est appelé pour afficher One Tap comme deuxième alternative à l'utilisation du bouton pour s'inscrire ou se connecter.

La bibliothèque GIS analyse le document HTML pour les éléments dont l'attribut ID est défini sur g_id_onload ou les attributs de classe contenant g_id_signin. Si un élément correspondant est trouvé, le bouton est affiché à l'aide de HTML, que vous l'ayez également affiché dans JavaScript ou non. Pour éviter d'afficher le bouton deux fois, éventuellement avec des paramètres conflictuels, n'incluez pas d'éléments HTML correspondant à ces noms dans vos pages HTML.

Langue du bouton

La langue du bouton est automatiquement déterminée par la langue par défaut du navigateur ou par la préférence de l'utilisateur de la session Google. Vous pouvez également choisir la langue manuellement en ajoutant le hl paramètre et le code de langue à la src directive lors du chargement de la bibliothèque, et en ajoutant le paramètre facultatif data-locale ou locale data-locale dans HTML ou locale dans JavaScript.

HTML

L'extrait de code suivant montre comment afficher la langue du bouton en français en ajoutant le paramètre hl à l'URL de la bibliothèque cliente et en définissant l'attribut data-locale sur le français :

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

L'extrait de code suivant montre comment afficher la langue du bouton en français en ajoutant le paramètre hl à l'URL de la bibliothèque cliente et en appelant la méthode google.accounts.id.renderButton avec le paramètre locale défini sur le français :

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Gestion des identifiants

Une fois le consentement utilisateur donné, Google renvoie un identifiant de jeton Web JSON (JWT) appelé jeton d'ID au navigateur de l'utilisateur ou directement à un point de terminaison de connexion hébergé par votre plate-forme.

L'endroit où vous choisissez de recevoir le JWT dépend de si vous affichez le bouton à l'aide de HTML ou de JavaScript, et si vous utilisez le mode UX pop-up ou redirection.

Le mode UX popup exécute le flux UX de connexion dans une fenêtre pop-up. Il s'agit généralement d'une expérience moins intrusive pour les utilisateurs. C'est le mode UX par défaut.

Lorsque vous affichez le bouton à l'aide de :

HTML

Vous pouvez définir l'une des options suivantes :

  • data-callback pour renvoyer le JWT à votre gestionnaire de rappel ; ou
  • data-login_uri pour que Google envoie le JWT directement à votre point de terminaison de connexion à l'aide d'une requête POST.

Si les deux valeurs sont définies, data-callback est prioritaire sur data-login_uri. Définir les deux valeurs peut être utile lorsque vous utilisez un gestionnaire de rappel pour le débogage.

JavaScript

Vous devez spécifier un callback. Le mode pop-up n'est pas compatible avec les redirections lorsque vous affichez le bouton dans JavaScript. Si elle est définie, login_uri est ignorée.

Pour en savoir plus sur le décodage du JWT dans votre gestionnaire de rappel JS, consultez Gérer la réponse d'identifiant renvoyée.

Mode redirection

Le mode UX redirect exécute le flux UX de connexion à l'aide d'une redirection pleine page du navigateur de l'utilisateur, et Google renvoie le JWT directement à votre point de terminaison de connexion à l'aide d'une requête POST. Il s'agit généralement d'une expérience plus intrusive pour les utilisateurs, mais elle est considérée comme la méthode de connexion la plus sécurisée.

Lorsque vous affichez le bouton à l'aide de :

  • HTML : définissez éventuellement data-login_uri sur l'URI de votre point de terminaison de connexion.
  • JavaScript : définissez éventuellement login_uri sur l'URI de votre point de terminaison de connexion.

Si vous ne fournissez pas de valeur, Google renvoie le JWT à l'URI de la page actuelle.

URI de votre point de terminaison de connexion

Utilisez HTTPS et un URI absolu lorsque vous définissez data-login_uri ou login_uri. Par exemple, https://example.com/path.

HTTP n'est autorisé que lorsque vous utilisez localhost lors du développement : http://localhost/path.

Pour obtenir une description complète des exigences et des règles de validation de Google, consultez Utiliser des origines JavaScript sécurisées et des URI de redirection.