Utiliser l'API JavaScript

Si vous le souhaitez, vous pouvez n'utiliser que du code JavaScript pour déclencher l'invite One Tap ou afficher le bouton "Se connecter avec Google".

Pour configurer l'invite One Tap dans JavaScript, vous devez d'abord appeler la méthode initialize(). Appelez ensuite la méthode prompt() pour afficher l'interface utilisateur de l'invite. Consultez l'extrait de code suivant:

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

Pour recevoir des notifications d'état de l'interface utilisateur, fournissez une fonction de rappel à la méthode prompt(). Consultez l'extrait de code suivant:

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

L'exemple de code ci-dessous montre comment afficher le bouton One Tap et le bouton Se connecter avec Google en JavaScript.

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