Pulsante Accedi con Google per il web

Pulsante Accedi con Google per il web

Informazioni su questo codelab

subjectUltimo aggiornamento: apr 28, 2025
account_circleScritto da: Brian Daugherty

1. Panoramica

In questo codelab, creeremo una semplice pagina web per l'accesso degli utenti. Utilizzerai la libreria JavaScript dei Servizi di identità Google per visualizzare e personalizzare il pulsante Accedi con Google.

Un pulsante Accedi con Google.

  • Come aggiungere un pulsante Accedi con Google a una pagina web
  • Come configurare un'applicazione web OAuth 2.0
  • Come decodificare un token ID
  • Come personalizzare il pulsante Accedi con Google
  1. Un editor di testo e uno spazio in cui ospitare una pagina web, gli ambienti che tratteremo in questo codelab:
    • in esecuzione localmente in un terminale sulla tua macchina
    • utilizzando una piattaforma come Glitch.
    Scegli l'ambiente con cui ti senti più a tuo agio.
  2. Un progetto Google Cloud. Puoi usare il progetto esistente o crearne uno nuovo. Gli account e i progetti della piattaforma Google Cloud sono senza costi.
  3. Conoscenza di base di HTML, CSS, JavaScript e Chrome DevTools (o equivalente).

E ora iniziamo.

2. Crea la tua pagina di accesso

Aggiungi questo esempio di codice in un file denominato index.html. Puoi farlo sul tuo computer, utilizzando il tuo editor di testo preferito o su una piattaforma come Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Questo codice è una combinazione di HTML e JavaScript e svolge una serie di operazioni:

  • configura questa libreria di Servizi di identità Google con g_id_onload,
  • mostra un pulsante Accedi con Google utilizzando g_id_signin,
  • aggiunge un gestore della funzione di callback JavaScript denominato handleCredentialResponse per ricevere le credenziali di accesso dell'utente da Google
  • una funzione decodeJWT per convertire la credenziale JSON Web Token (JWT) in un semplice file JSON.

Potrebbe esserci qualcosa che non va con data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Per ora ignoralo, torneremo sull'argomento tra un po'.

3. Pubblica la tua pagina web

Parleremo di due ambienti per la pubblicazione di index.html nel browser:

  • un server web localmente sulla tua macchina
  • una piattaforma remota come Glitch.

Scegli quello con cui ti senti più a tuo agio. Dopo la configurazione, utilizzeremo l'URL per configurare un client web OAuth.

In locale dal tuo computer

Assicurati che Python3 sia installato sul tuo sistema. La configurazione varia in base al sistema operativo e alla piattaforma, inizia con la configurazione e l'utilizzo di Python se devi installare Python sulla tua macchina.

Avvia il server web Python nella directory contenente index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Un server web è ora in ascolto delle connessioni sulla porta 8000 e può pubblicare la tua pagina di accesso. L'URL è

http://localhost:8000

Tramite una piattaforma remota

Se hai scelto di modificare e ospitare la pagina di accesso utilizzando Glitch (o un metodo equivalente), dovresti essere in grado di aprire index.html in un riquadro di anteprima o in una nuova scheda del browser.

In genere, l'URL da utilizzare è il nome del progetto che inserisci al momento della configurazione del progetto glich.com. Ad esempio, se il progetto glitch è denominato gis-example, l'URL sarà https://gis-example.glitch.me. Naturalmente avrai scelto un nome di progetto diverso e non potrai riutilizzarlo. L'URL è

https://<var>your-project-name</var>.glitch.me

Carica la pagina

Aspetta un attimo...

Innanzitutto, dobbiamo creare un client web OAuth 2.0 e configurarlo.

Copia o prendi nota dell'URL, verrà utilizzato nel passaggio successivo.

4. Configurare un client web OAuth

Configuriamo OAuth in modo che le persone possano effettivamente accedere.

  • Fai clic su questo link per creare un client web OAuth 2.0. Se necessario, puoi utilizzare una procedura guidata per creare e configurare un nuovo progetto Google Cloud.
  • Seleziona Applicazione web dal menu a discesa Tipo di applicazione.
  • Premi il pulsante Aggiungi URI in Origini JavaScript autorizzate
  • Inserisci l'URL che ospita index.html indicato nel Passaggio 3: pubblica la pagina web.

    Ospitato sul tuo computer locale

    Origine locale ospitata sulla tua macchina

    Ospitato su una piattaforma remota

    Usare una piattaforma di hosting remota
  • Premi Crea
  • Copia il nuovo ID client.

Un'ultima cosa

Dobbiamo tornare indietro e aggiornare index.html per utilizzare il nuovo ID client. Nell'editor, sostituisci PUT_YOUR_WEB_CLIENT_ID_HERE con il tuo nuovo ID client. Un ID client è simile al seguente esempio: 1234567890-abc123def456.apps.googleusercontent.com.

Accedi!

5. Accedi

Innanzitutto, apri la console per gli sviluppatori del browser. Eventuali errori e la credenziale del token ID JWT restituito da Google verranno registrati qui.

Premi il pulsante Accedi con Google.

Le fasi successive possono variare leggermente:

  • Se hai eseguito l'accesso a più di un Account Google, ti verrà chiesto di selezionare quale account utilizzerai per accedere a questa app web.
  • Se è la prima volta che accedi a questa app web, viene visualizzata una richiesta di consenso.

Dopo aver selezionato un account e aver dato il tuo consenso, Google risponde con un JWT. La funzione di callback handleCredentialResponse in esecuzione nel browser riceve il JWT.

In questo codelab decodificheremo e stampiamo i contenuti JWT. In un'app web di produzione, verificherai e userai il JWT decodificato per fare qualcosa di più significativo, ad esempio creare un nuovo account sulla tua piattaforma di backend o stabilire una nuova sessione per l'utente.

6. Ispeziona token ID JWT

Il JWT codificato viene registrato nella console per gli sviluppatori. Dopo la decodifica del JWT, anche alcuni campi di token ID di uso comune vengono registrati nella console.

Puoi utilizzare strumenti online come jwt.io per decodificare il JWT.

In alternativa, puoi utilizzare jq nel tuo terminale per decodificare e visualizzare il JWT (potrebbe essere necessario utilizzare il gestore di pacchetti per installare jq). Innanzitutto, incolla la stringa JWT codificata tra le virgolette:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

e poi utilizzare questo comando per decodificarlo

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Alcune chiavi e valori come email, nome e immagine dovrebbero essere abbastanza facili da capire. Altri valori vengono utilizzati per verificare il JWT prima di utilizzarlo. Ottenere le informazioni degli utenti dal token ID offre maggiori informazioni sul significato di tutti i campi.

7. Personalizza il pulsante

Puoi inserire un pulsante di accesso predefinito in una pagina in questo modo:

    <div class="g_id_signin"></div>

e vedrai questo pulsante

Un pulsante Accedi con Google.

Potresti però voler cambiare il colore, le dimensioni o il testo in modo che corrispondano al tema del sito.

Cambia il colore del pulsante in blu con la dicitura Registrati con Google.

Apri index.html, individua l'elemento g_id_signin e aggiungi gli attributi data-theme="filled_blue" e data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Dopo aver salvato e ricaricato la pagina, vedrai un pulsante blu con il nuovo testo.

Un pulsante Registrati con Google.

Puoi personalizzare ulteriormente il pulsante, consulta Attributi dei dati visivi per l'elenco completo delle opzioni.

8. Risorse aggiuntive

Complimenti!

Hai aggiunto un pulsante Accedi con Google a una pagina web, configurato un client web OAuth 2.0, decodificato un token ID JWT e hai imparato a personalizzare l'aspetto del pulsante.

Questi link possono aiutarti con i passaggi successivi:

Domande frequenti

bug_report Segnala un errore