Integrazione di Google Sign-In nella tua app web

Google Sign-In gestisce il flusso OAuth 2.0 e il ciclo di vita del token, semplificando la tua integrazione con le API di Google. Un utente ha sempre la possibilità di revocare l'accesso a un'applicazione in qualsiasi momento.

Questo documento descrive come completare un'integrazione di Google Sign-In di base.

Crea credenziali di autorizzazione

Qualsiasi applicazione che utilizza OAuth 2.0 per accedere alle API di Google deve disporre di credenziali di autorizzazione che identificano l'applicazione sul server OAuth 2.0 di Google. I passaggi seguenti spiegano come creare le credenziali per il tuo progetto. Le tue applicazioni possono quindi utilizzare le credenziali per accedere alle API che hai abilitato per quel progetto.

  1. Go to the Credentials page.
  2. Fai clic su Crea credenziali> ID client OAuth .
  3. Selezionare il tipo di applicazione dell'applicazione Web .
  4. Assegna un nome al tuo client OAuth 2.0 e fai clic su Crea

Al termine della configurazione, prendere nota dell'ID client che è stato creato. Avrai bisogno dell'ID client per completare i passaggi successivi. (Viene anche creato un segreto client, ma è necessario solo per le operazioni lato server.)

Carica la libreria della piattaforma di Google

Devi includere la libreria della piattaforma di Google nelle tue pagine web che integrano l'accesso con Google.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Specifica l'ID client della tua app

Specifica l'ID client che hai creato per la tua app nella Google Developers Console con il meta elemento google-signin-client_id .

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Aggiungi un pulsante di accesso a Google

Il modo più semplice per aggiungere un pulsante di accesso di Google al tuo sito è utilizzare un pulsante di accesso visualizzato automaticamente. Con solo poche righe di codice, è possibile aggiungere un pulsante che si configura automaticamente per avere il testo, il logo e i colori appropriati per lo stato di accesso dell'utente e gli ambiti richiesti.

Per creare un pulsante di accesso a Google che utilizza le impostazioni predefinite, aggiungi un elemento div con la classe g-signin2 alla tua pagina di accesso:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Di seguito è riportato un esempio del pulsante di accesso predefinito di Google:

Ottieni informazioni sul profilo

Dopo aver eseguito l'accesso a un utente con Google utilizzando gli ambiti predefiniti, puoi accedere all'ID Google, al nome, all'URL del profilo e all'indirizzo email dell'utente.

Per recuperare le informazioni sul profilo per un utente, utilizzare il metodo getBasicProfile() .

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Esci da un utente

Puoi consentire agli utenti di disconnettersi dalla tua app senza uscire da Google aggiungendo un pulsante di disconnessione o un collegamento al tuo sito. Per creare un collegamento di disconnessione, collegare una funzione che chiama il metodo GoogleAuth.signOut() all'evento onclick del collegamento.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>