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 du code HTML ou JavaScript pour afficher le bouton et les attributs afin de 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 autorisation, Google partage le profil utilisateur à l'aide d'un jeton Web JSON (JWT). Pour en savoir plus sur les étapes de connexion et l'expérience utilisateur, consultez la section Fonctionnement. L'article Comprendre le bouton personnalisé passe en revue les différents états et conditions affectant l'affichage du bouton auprès des utilisateurs.

Conditions préalables

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

Rendu du bouton

Vous pouvez choisir HTML ou JavaScript pour afficher le bouton "Se connecter avec Google" sur votre page de connexion:

HTML

Affichez le bouton de connexion au format HTML et renvoyez le jeton 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 comportant une classe g_id_signin s'affiche sous la forme d'un bouton "Se connecter avec Google". Le bouton est personnalisé en fonction des 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". Cela est recommandé 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 référence sur g_id_signin.

JavaScript

Afficher 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é en tant que premier paramètre de renderButton s'affiche sous la forme d'un bouton "Se connecter avec Google". Dans cet exemple, buttonDiv permet d'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é à utiliser One Tap comme deuxième alternative à l'utilisation du bouton pour s'inscrire ou se connecter.

La bibliothèque SIG analyse le document HTML à la recherche d'éléments avec un attribut d'ID 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é en HTML, que vous l'ayez également affiché en JavaScript. Pour éviter d'afficher le bouton deux fois, n'incluez pas d'éléments HTML correspondant à ces noms dans vos pages HTML si vous utilisez des paramètres contradictoires.

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 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 local 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 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 l'autorisation de l'utilisateur accordée, Google renvoie un identifiant de jeton Web JSON (JWT, JSON Web Token), appelé jeton d'ID, soit au navigateur de l'utilisateur, soit 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 l'affichage du bouton en HTML ou JavaScript, et de l'utilisation du mode d'expérience utilisateur de redirection ou de pop-up.

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

Lors de l'affichage du bouton avec:

HTML

Vous pouvez définir soit:

  • data-callback pour renvoyer le jeton 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. Il peut être utile de définir les deux valeurs 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 ce champ est défini, login_uri est ignoré.

Pour savoir comment décoder le jeton JWT dans votre gestionnaire de rappel JS, consultez la section Gérer la réponse d'identification renvoyée.

Mode redirection

Le mode UX redirect exécute le flux de connexion en utilisant la redirection complète sur la page du navigateur de l'utilisateur, et Google renvoie le jeton JWT directement au point de terminaison de connexion à l'aide d'une requête POST. Bien que cette expérience soit généralement plus intrusive pour les utilisateurs, elle est considérée comme la méthode de connexion la plus sécurisée.

Lors de l'affichage du bouton avec:

  • HTML (facultatif) définissez data-login_uri sur l'URI du point de terminaison de votre connexion.
  • JavaScript (facultatif) : définissez login_uri sur l'URI du point de terminaison de votre 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. Exemple : https://example.com/path.

HTTP n'est autorisé que si vous utilisez 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 la page Utiliser des origines JavaScript sécurisées et des URI de redirection.