Utiliser l'API JavaScript

Si vous préférez, vous pouvez n'utiliser que du code JavaScript pour déclencher l'invite avec un seul geste ou afficher le bouton Se connecter avec Google.

Pour configurer l'invite "One Tap" en JavaScript, vous devez d'abord appeler la méthode initialize(). Appelez ensuite la méthode prompt() pour afficher l'UI 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'UI de l'invite, 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 à la fois le bouton "Un appui" 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>