Mostrare il pulsante Accedi con Google

Aggiungi un pulsante Accedi con Google al tuo sito per consentire agli utenti di registrarsi o accedere alla tua app web. Utilizza HTML o JavaScript per eseguire il rendering del pulsante e gli attributi per personalizzare la forma, le dimensioni, il testo e il tema del pulsante.

Pulsante di accesso personalizzato.

Dopo che un utente ha selezionato un Account Google e fornito il suo consenso, Google condivide il profilo dell'utente utilizzando un token JWT (JSON Web Token). Per una panoramica dei passaggi coinvolti durante l'accesso e l'esperienza utente, consulta Come funziona. Informazioni sul pulsante personalizzato esamina le diverse condizioni e stati che influiscono sul modo in cui il pulsante viene mostrato agli utenti.

Prerequisiti

Segui i passaggi descritti in Configurazione per configurare la schermata per il consenso OAuth, ottenere un ID client e caricare la libreria client.

Rendering dei pulsanti

Per visualizzare il pulsante Accedi con Google, puoi scegliere HTML o JavaScript per eseguire il rendering del pulsante nella pagina di accesso:

HTML

Mostra il pulsante di accesso utilizzando HTML e restituisce il JWT all'endpoint di accesso della tua piattaforma.

<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 elemento con una classe g_id_signin viene visualizzato come pulsante Accedi con Google. Il pulsante viene personalizzato in base ai parametri forniti negli attributi dei dati.

Per visualizzare un pulsante Accedi con Google e One Tap di Google One nella stessa pagina, rimuovi data-auto_prompt="false". Questa opzione è consigliata per ridurre le difficoltà e migliorare i tassi di accesso.

Per l'elenco completo degli attributi dei dati, consulta la pagina di riferimento g_id_signin.

JavaScript

Esegui il rendering del pulsante di accesso utilizzando JavaScript, restituendo il JWT al gestore di callback JavaScript del browser.

<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'elemento specificato come primo parametro di renderButton viene visualizzato come pulsante Accedi con Google. In questo esempio, buttonDiv viene utilizzato per visualizzare il pulsante sulla pagina. Il pulsante viene personalizzato utilizzando gli attributi specificati nel secondo parametro di renderButton.

Per ridurre al minimo le difficoltà degli utenti, viene chiamato google.accounts.id.prompt() per visualizzare One Tap come seconda alternativa all'utilizzo del pulsante per la registrazione o l'accesso.

La libreria GIS analizza il documento HTML per individuare gli elementi con un attributo ID impostato su g_id_onload o gli attributi della classe contenenti g_id_signin. Se viene trovato un elemento corrispondente, il pulsante viene visualizzato utilizzando HTML, indipendentemente dal fatto che sia stato visualizzato anche in JavaScript. Per evitare di visualizzare il pulsante due volte, eventualmente con parametri in conflitto, non includere elementi HTML corrispondenti a questi nomi nelle tue pagine HTML.

Lingua dei pulsanti

La lingua del pulsante viene determinata automaticamente in base alla lingua predefinita del browser o alla preferenza dell'utente della sessione Google. Puoi anche scegliere la lingua manualmente aggiungendo il parametro hl e il codice lingua alla direttiva src al momento del caricamento della libreria e il parametro facoltativo data-locale o locale data-locale in HTML o locale in JavaScript.

HTML

Il seguente snippet di codice mostra come visualizzare la lingua del pulsante in francese aggiungendo il parametro hl all'URL della libreria client e impostando l'attributo data-locale su francese:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Il seguente snippet di codice mostra come visualizzare la lingua del pulsante in francese aggiungendo il parametro hl all'URL della libreria client e chiamando il metodo google.accounts.id.renderButton con il parametro locale impostato su French:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Gestione delle credenziali

Una volta ottenuto il consenso dell'utente, Google restituisce una credenziale JWT (JSON Web Token) nota come token ID al browser dell'utente o direttamente a un endpoint di accesso in hosting sulla tua piattaforma.

La posizione in cui scegli di ricevere il JWT dipende dal fatto che tu visualizzi il pulsante utilizzando HTML o JavaScript e se viene utilizzata la modalità UX popup o di reindirizzamento.

L'utilizzo della modalità UX popup esegue il flusso dell'esperienza utente di accesso in una finestra popup. In genere, si tratta di un'esperienza meno invadente per gli utenti ed è la modalità UX predefinita.

Quando viene visualizzato il pulsante utilizzando:

HTML

Puoi impostare:

  • data-callback per restituire il JWT al gestore del callback oppure
  • data-login_uri affinché Google invii il JWT direttamente al tuo endpoint di accesso utilizzando una richiesta POST.

Se sono impostati entrambi i valori, data-callback ha la precedenza su data-login_uri. L'impostazione di entrambi i valori può essere utile quando si utilizza un gestore callback per il debug.

JavaScript

Devi specificare un callback, la modalità popup non supporta i reindirizzamenti durante il rendering del pulsante in JavaScript. Se impostato, login_uri viene ignorato.

Per saperne di più sulla decodifica del JWT all'interno del gestore di callback JS, consulta Gestire la risposta delle credenziali restituite.

Modalità di reindirizzamento

L'utilizzo della modalità UX redirect esegue il flusso UX di accesso utilizzando il reindirizzamento della pagina completa del browser dell'utente e Google restituisce il JWT direttamente al tuo endpoint di accesso utilizzando una richiesta POST. In genere, si tratta di un'esperienza più invasiva per gli utenti, ma è considerata il metodo di accesso più sicuro.

Quando viene visualizzato il pulsante utilizzando:

  • In HTML, imposta facoltativamente data-login_uri sull'URI del tuo endpoint di accesso.
  • JavaScript imposta facoltativamente login_uri sull'URI del tuo endpoint di accesso.

Se non fornisci un valore, Google restituisce il JWT all'URI della pagina corrente.

L'URI dell'endpoint di accesso

Utilizza HTTPS e un URI assoluto quando imposti data-login_uri o login_uri. Ad esempio: https://example.com/path.

HTTP è consentito solo quando si utilizza localhost durante lo sviluppo: http://localhost/path.

Consulta la sezione Utilizzare origini JavaScript e URI di reindirizzamento sicuri per una descrizione completa dei requisiti e delle regole di convalida di Google.