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 pour personnaliser la forme, la taille, le texte et le thème du bouton.

Bouton de connexion personnalisé.

Une fois qu'un utilisateur a sélectionné un compte Google et donné son consentement, Google partage le profil utilisateur à 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. Comprendre le bouton personnalisé décrit 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 la section Configuration pour configurer votre écran de consentement OAuth, obtenir un ID client et charger la bibliothèque cliente.

Rendu des boutons

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

HTML

Affichez le bouton de connexion à l'aide du code 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 page de documentation de référence sur g_id_signin.

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 réduire les frictions pour l'utilisateur, google.accounts.id.prompt() est appelé pour afficher le bouton "One Tap" comme deuxième option à la place du bouton d'inscription ou de connexion.

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

Langue des boutons

La langue du bouton est automatiquement déterminée par la langue par défaut du navigateur ou par les préférences de l'utilisateur de la session Google. Vous pouvez également choisir la langue manuellement en ajoutant le paramètre hl et le code de langue à la directive src lors du chargement de la bibliothèque, et en ajoutant le paramètre facultatif data-locale ou locale data-locale en HTML ou locale en 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 "French" :

<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

<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 de l'utilisateur obtenu, Google renvoie des identifiants de jeton Web JSON (JWT) appelés jetons d'ID au navigateur de l'utilisateur ou directement à un point de terminaison de connexion hébergé par votre plate-forme.

L'emplacement où vous choisissez de recevoir le jeton JWT dépend de la méthode utilisée pour afficher le bouton (HTML ou JavaScript) et du mode d'expérience utilisateur (fenêtre pop-up ou redirection).

Le mode UX popup exécute le flux d'expérience utilisateur de connexion dans une fenêtre pop-up. Il s'agit généralement d'une expérience moins intrusive pour les utilisateurs. Il s'agit du mode d'expérience utilisateur 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 jeton 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 lors du rendu du bouton en JavaScript. Si défini, login_uri est ignoré.

Pour en savoir plus sur le décodage du JWT dans votre gestionnaire de rappel JS, consultez la section Gérer la réponse des identifiants renvoyés.

Mode de redirection

L'utilisation du mode d'expérience utilisateur redirect effectue le flux d'expérience utilisateur de connexion à l'aide d'une redirection de page complète du navigateur de l'utilisateur, et Google renvoie le jeton 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:

  • Dans le code HTML, vous pouvez définir data-login_uri sur l'URI de votre point de terminaison de connexion.
  • JavaScript peut définir login_uri sur l'URI de votre point de terminaison de connexion.

Si vous ne fournissez pas de valeur, Google renvoie le jeton 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 pendant le développement : http://localhost/path.

Consultez Utiliser des origines JavaScript et des URI de redirection sécurisés pour obtenir une description complète des exigences et des règles de validation de Google.