Utilizzare l'API JavaScript

Obiettivo: se il flusso di accesso predefinito non soddisfa i tuoi requisiti, puoi personalizzarlo in diversi modi. Leggi le seguenti informazioni sulle opzioni di personalizzazione disponibili.

Se preferisci, puoi utilizzare solo il codice JavaScript per attivare la richiesta One Tap o visualizzare il pulsante Accedi con Google.

Per configurare la richiesta One Tap in JavaScript, devi prima chiamare il metodo initialize(). Quindi, chiama il metodo prompt() per visualizzare l'UI della richiesta. Vedi il seguente snippet di codice:

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

Per ricevere notifiche sullo stato dell'interfaccia utente, fornisci una funzione di callback al metodo prompt(). Vedi il seguente snippet di codice:

<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>

Il codice di esempio riportato di seguito mostra come visualizzare sia One Tap sia il pulsante Accedi con Google in 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>