Afficher Google One Tap

Ajoutez une invite One Tap à votre site pour permettre aux utilisateurs de s'inscrire ou de se connecter à votre application Web. Utilisez HTML et JavaScript pour afficher et personnaliser l'invite.

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.

Ajoutez un bouton "Se connecter avec Google" à votre page de connexion.

Affichage de l'invite

Placez un extrait de code sur toutes les pages où vous souhaitez que One Tap s'affiche.

HTML

Affichez l'invite One Tap, en renvoyant les identifiants JWT à un point de terminaison de connexion.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

L'attribut data-login_uri est l'URI du point de terminaison de connexion de votre application Web. Vous pouvez ajouter des attributs de données personnalisés, qui sont envoyés à votre point de terminaison de connexion avec le jeton d'ID émis par Google.

Vous pouvez également utiliser l'attribut data-skip_prompt_cookie et un cookie pour contrôler si l'invite One Tap s'affiche ou non sur les pages HTML statiques où vous ne pouvez pas modifier le contenu. Si le cookie spécifié est défini, l'invite ne s'affiche pas.

Utilisez l'attribut facultatif data-context pour modifier le texte utilisé dans le titre de l'invite. Par exemple, data-context: "signup" remplace "Se connecter à" par "S'inscrire à".

Par défaut, l'invite One Tap se ferme automatiquement si l'utilisateur clique en dehors de l'invite. Vous pouvez désactiver ce comportement si vous définissez l'attribut data-cancel_on_tap_outside sur "false".

Pour obtenir la liste complète des attributs compatibles, consultez la référence g_id_onload.

JavaScript

Affichez l'invite One Tap, en renvoyant les identifiants JWT au gestionnaire de rappel JavaScript du navigateur.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

Pour configurer l'invite One Tap en JavaScript, vous devez d'abord appeler la méthode initialize(). Ensuite, appelez la méthode prompt() pour afficher l'interface utilisateur de l'invite.

Utilisez le champ facultatif context pour modifier le texte utilisé dans le titre de l'invite. Par exemple, context: 'signup' remplace "Se connecter à" par "S'inscrire à".

Par défaut, l'invite One Tap se ferme automatiquement si l'utilisateur clique en dehors de l'invite. Vous pouvez désactiver ce comportement si vous définissez la propriété cancel_on_tap_outside sur "false".

Pour obtenir la liste complète des options de données, consultez la référence idConfiguration.

État de l'invite

Utilisez une fonction de rappel JavaScript pour écouter les notifications d'état de l'interface utilisateur de l'invite.

Les notifications sont envoyées aux moments suivants :

  • Affichage : se produit après l'appel de la méthode prompt(). La notification contient une valeur booléenne indiquant si l'interface utilisateur est affichée ou non.

  • Ignoré : se produit lorsque l'invite One Tap est fermée par une annulation automatique, une annulation manuelle ou lorsque Google ne parvient pas à émettre d'identifiants, par exemple lorsque la session sélectionnée est déconnectée de Google.

    Dans ce cas, nous vous recommandons de passer aux fournisseurs d'identité suivants, le cas échéant.

  • Fermé : se produit lorsque Google récupère des identifiants ou qu'un utilisateur souhaite arrêter le flux de récupération des identifiants. Par exemple, lorsque l'utilisateur commence à saisir son nom d'utilisateur et son mot de passe dans la boîte de dialogue de connexion, vous pouvez appeler la méthode google.accounts.id.cancel() pour fermer l'invite One Tap et déclencher un moment de fermeture.

HTML

Utilisez l'attribut data-moment_callback pour spécifier une fonction de rappel JavaScript. Un gestionnaire de rappel est requis pour recevoir des notifications.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Pour permettre à vos utilisateurs de se connecter ou de s'inscrire, vous pouvez communiquer avec plusieurs fournisseurs d'identité afin de trouver des identifiants disponibles. Vous pouvez consulter l'état de l'interface utilisateur de notre invite afin d'appeler le fournisseur d'identité suivant.

JavaScript

Transmettez votre gestionnaire de rappel en tant que paramètre à google.accounts.id.prompt. Ici, une fonction fléchée est utilisée pour gérer les mises à jour des notifications.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Bouton et invite

Le bouton "Se connecter avec Google" et l'invite One Tap peuvent s'afficher ensemble sur une seule page.

HTML

Affichez le bouton "Se connecter avec Google" et l'invite One Tap en incluant les éléments g_id_onload et g_id_signin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Affichez le bouton "Se connecter avec Google" et l'invite One Tap en appelant simultanément les fonctions renderButton() et prompt().

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

Ne pas couvrir One Tap

Cette section ne s'applique que lorsque FedCM est désactivé. Lorsque FedCM est activé, le navigateur affiche les invites utilisateur au-dessus du contenu de la page.

Pour s'assurer que les utilisateurs finaux voient toutes les informations affichées, Google One Tap ne doit pas être couvert par d'autres contenus. Sinon, des fenêtres pop-up peuvent s'afficher dans certains cas.

Vérifiez la mise en page et les propriétés z-index des éléments pour vous assurer que Google One Tap n'est jamais couvert par d'autres contenus. Le changement de flux UX peut être déclenché même si un seul pixel des bordures est couvert.

Réponse des identifiants

La réponse des identifiants inclut un JWT signé par Google. La réponse est renvoyée au navigateur à l'aide d'une fonction de rappel JavaScript ou à votre plate-forme via une redirection vers un point de terminaison de connexion.

Rappel JS

Utilisez HTML ou JavaScript pour configurer un rappel.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

Par exemple, handleCredentialResponse décode le JWT et affiche certains champs du jeton d'ID dans la console.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

Redirection

Pour renvoyer des identifiants au point de terminaison de connexion de votre plate-forme, ajoutez l'URL à les paramètres d'URI de redirection autorisés de votre client Web OAuth 2.0.

Utilisez HTML ou JavaScript pour configurer un URI de redirection.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});