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 degli attributi per personalizzare la forma, le dimensioni, il testo e il tema del pulsante.

Pulsante di accesso personalizzato.

Dopo che un utente seleziona un Account Google e fornisce il consenso, Google condivide il profilo utente utilizzando un token JWT (JSON Web Token). Per una panoramica dei passaggi coinvolti durante l'accesso e dell'esperienza utente, consulta la sezione Come funziona. La sezione Informazioni sul pulsante personalizzato esamina le diverse condizioni e stati che influiscono sulla visualizzazione del pulsante per gli utenti.

Prerequisiti

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

Rendering del pulsante

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

HTML

Esegui il rendering del pulsante di accesso utilizzando HTML, restituendo 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 sottoposto a rendering 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 Google One Tap sulla stessa pagina, rimuovi data-auto_prompt="false". Questa operazione è consigliata per ridurre i punti di attrito e migliorare le percentuali di accesso.

Per l'elenco completo degli attributi dei dati, consulta la g_id_signinpagina di riferimento

JavaScript

Esegui il rendering del pulsante di accesso utilizzando JavaScript, restituendo il JWT al gestore 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 eseguire il rendering del pulsante sulla pagina. Il pulsante viene personalizzato utilizzando gli attributi specificati nel secondo parametro di renderButton.

Per ridurre al minimo i punti di attrito per gli 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 alla ricerca di elementi con un attributo ID impostato su g_id_onload o attributi di classe contenenti g_id_signin. Se viene trovato un elemento corrispondente, il pulsante viene sottoposto a rendering utilizzando HTML, indipendentemente dal fatto che tu abbia eseguito il rendering del pulsante anche in JavaScript. Per evitare di visualizzare il pulsante due volte, possibilmente con parametri in conflitto, non includere elementi HTML che corrispondono a questi nomi nelle pagine HTML.

Lingua del pulsante

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

HTML

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

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

JavaScript

Lo snippet di codice seguente 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 sul francese:

<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

Dopo che l'utente ha fornito 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 ospitato dalla tua piattaforma.

La scelta di dove ricevere il JWT dipende dal fatto che tu esegua il rendering del pulsante utilizzando HTML o JavaScript e se utilizzi la modalità UX popup o di reindirizzamento.

La modalità UX popup esegue il flusso UX di accesso in una finestra popup. In genere, si tratta di un'esperienza meno intrusiva per gli utenti ed è la modalità UX predefinita.

Quando esegui il rendering del pulsante utilizzando:

HTML

Puoi impostare:

  • data-callback per restituire il JWT al gestore callback oppure
  • data-login_uri per consentire a Google di inviare il JWT direttamente all'endpoint di accesso utilizzando una richiesta POST.

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

JavaScript

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

Per ulteriori informazioni sulla decodifica del JWT all'interno del gestore callback JS, consulta la sezione Gestire la risposta delle credenziali restituite.

Modalità di reindirizzamento

La 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 all'endpoint di accesso utilizzando una richiesta POST. In genere, si tratta di un'esperienza più intrusiva per gli utenti, ma è considerato il metodo di accesso più sicuro.

Quando esegui il rendering del pulsante utilizzando:

  • HTML imposta facoltativamente data-login_uri sull'URI dell'endpoint di accesso.
  • JavaScript imposta facoltativamente login_uri sull'URI dell'endpoint di accesso.

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

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.

Per una descrizione completa dei requisiti e delle regole di convalida di Google, consulta la sezione Utilizzare origini JavaScript sicure e URI di reindirizzamento.