Pulsante Accedi con Google per il web

1. Panoramica

In questo codelab, creeremo una 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.

Obiettivi didattici

  • 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

Che cosa ti serve

  1. Un editor di testo e un luogo in cui ospitare una pagina web, ambienti che tratteremo in questo Codelab:
    • eseguito localmente in un terminale sulla tua macchina oppure
    • utilizzando una piattaforma come Glitch.
    Scegli l'ambiente con cui hai più dimestichezza.
  2. Un progetto Google Cloud. Puoi utilizzare il progetto esistente o crearne uno nuovo. Un account e un progetto Google Cloud Platform 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 codice di esempio a un file denominato index.html. Puoi farlo sulla tua macchina 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 è un mix di HTML e JavaScript e svolge diverse funzioni:

  • configura la libreria Google Identity Services utilizzando g_id_onload,
  • mostra un pulsante Accedi con Google che utilizza g_id_signin,
  • aggiunge un gestore di funzioni di callback JavaScript denominato handleCredentialResponse per ricevere le credenziali di accesso dell'utente da Google e
  • una funzione decodeJWT per convertire la credenziale JSON Web Token (JWT) in JSON semplice.

Potrebbe sembrare che ci sia qualcosa che non va con data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Per ora ignoralo, ci torneremo tra poco.

3. Pubblicare la pagina web

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

  • esecuzione di un server web in locale 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.

Localmente dal tuo computer

Assicurati che Python3 sia installato sul tuo sistema. La configurazione varia in base al sistema operativo e alla piattaforma. Inizia con Configurazione e utilizzo di Python se devi installare Python sul tuo computer.

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/) ...

Ora un server web è in ascolto delle connessioni sulla porta 8000 e pronto a pubblicare la pagina di accesso. L'URL è

http://localhost:8000

Da una piattaforma di sviluppo web

Se hai scelto di modificare e ospitare la pagina di accesso utilizzando Glitch (o un 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 che utilizzerai è il nome del progetto che hai inserito durante la configurazione del progetto glich.com. Ad esempio, se il tuo progetto Glitch si chiama gis-example, l'URL è https://gis-example.glitch.me. Ovviamente, avrai scelto un nome di progetto diverso e non potrai riutilizzare questo. L'URL è

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

Caricare la pagina

Aspetta un secondo…

Per prima cosa, dobbiamo creare e configurare un client web OAuth 2.0.

Copia o prendi nota dell'URL, che 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, una procedura guidata ti aiuterà a 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 dal passaggio 3: pubblica la pagina web.

    Ospitato sulla tua macchina locale

    Origine locale ospitata sulla tua macchina

    Ospitata su una piattaforma remota

    Utilizzare 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 nuovo ID client. Un ID client è simile al seguente esempio: 1234567890-abc123def456.apps.googleusercontent.com.

Accediamo.

5. Accedi

Innanzitutto, apri la console per sviluppatori del browser. Qui verranno registrati eventuali errori e la credenziale del token ID JWT restituita da Google.

Premi il pulsante Accedi con Google.

I passaggi successivi possono variare leggermente:

  • Se al momento hai eseguito l'accesso a più di un Account Google, ti verrà chiesto di selezionare quello che 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 facoltativamente un account e dato il tuo consenso, Google risponde con un JWT. La funzione di callback handleCredentialResponse in esecuzione nel browser riceve il JWT.

In questo Codelab decodifichiamo e stampiamo i contenuti del JWT. In un'app web di produzione, verificherai e utilizzerai 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. Ispezionare il token ID JWT

Il JWT codificato viene registrato in Play Console. Dopo la decodifica del JWT, nella console vengono registrati anche alcuni campi del token ID utilizzati di frequente.

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

In alternativa, puoi utilizzare jq nel 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 doppie:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

e poi utilizza 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 alcuni valori, come email, nome e immagine, dovrebbero essere abbastanza facili da capire. Gli altri valori vengono utilizzati per verificare il JWT prima di utilizzarlo. Ottenere informazioni sull'utente dal token ID spiega meglio il significato di tutti i campi.

7. Personalizzare il pulsante

Per inserire un pulsante di accesso predefinito in una pagina:

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

e vedrai questo pulsante.

Un pulsante Accedi con Google.

Tuttavia, potresti voler modificare il colore, le dimensioni o il testo in modo che corrispondano al tema del tuo sito.

Cambiamo il colore del pulsante in blu e facciamo in modo che il testo sia 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 gli attributi dei dati visivi per l'elenco completo delle opzioni e prova il nostro generatore di codice HTML.

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 imparato a personalizzare l'aspetto del pulsante.

Questi link possono aiutarti con i passaggi successivi:

Domande frequenti