Afficher le bouton "Se connecter avec Google"

Ajoutez un bouton Se connecter avec Google à votre site pour permettre aux utilisateurs de s'inscrire ou vous connecter à votre application Web. Utilisez du code HTML ou JavaScript pour afficher le bouton. 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é permet d'examiner les différentes conditions et états affectant la façon dont le bouton s'affiche pour les utilisateurs.

Prérequis

Avant d'ajouter le bouton à votre page de connexion, procédez comme suit :

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, procédez comme suit : 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é dans le deuxième paramètre à 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 au lieu d'utiliser le bouton de connexion ou d'enregistrement.

La bibliothèque GIS analyse le document HTML à la recherche d'éléments dont l'attribut ID est défini sur g_id_onload ou d'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é en JavaScript. Pour éviter d'afficher le bouton deux fois, les paramètres éventuellement en conflit n'incluent 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 les préférences de l'utilisateur de la session Google. Vous pouvez également choisir langue manuellement en ajoutant le paramètre hl et le code de langue à src lors du chargement de la bibliothèque et en ajoutant le paramètre facultatif data-locale ou paramètre régional 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 data-locale pour 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 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 de l'utilisateur obtenu, Google renvoie un identifiant de jeton Web JSON (JWT). (appelé "jeton d'ID") dans le navigateur de l'utilisateur ou directement à une page hébergé par votre plate-forme.

L'emplacement où vous choisissez de recevoir le jeton JWT dépend de l'affichage du bouton à l'aide de HTML ou JavaScript et si le mode UX de redirection ou pop-up est utilisé.

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

Lors de l'affichage du bouton, utilisez:

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 connexion à l'aide d'une requête POST.

Si les deux valeurs sont définies, data-callback prévaut 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'accepte pas 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.

Lors de l'affichage du bouton, utilisez:

  • HTML peut éventuellement définir data-login_uri sur l'URI du point de terminaison de la connexion.
  • JavaScript peut éventuellement définir login_uri sur l'URI du 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 lors de l'utilisation de "localhost" pendant le 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 et des URI de redirection sécurisés.