Integrazione dell'opzione Accedi con Google nell'app web

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Accedi con Google gestisce il flusso OAuth 2.0 e il ciclo di vita dei token, semplificando l'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 base di Accedi con Google.

Creare credenziali di autorizzazione

Qualsiasi applicazione che utilizza OAuth 2.0 per accedere alle API di Google deve avere credenziali di autorizzazione che identificano l'applicazione sul server OAuth 2.0 di Google. I passaggi seguenti spiegano come creare credenziali per il tuo progetto. Le 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. Seleziona il tipo di applicazione Applicazione web.
  4. Assegna un nome al client OAuth 2.0 e fai clic su Crea

Una volta completata la configurazione, prendi nota dell'ID client che è stato creato. Avrai bisogno dell'ID client per completare i passaggi successivi. Viene creato anche un client secret, ma è necessario solo per le operazioni lato server.

Carica la libreria di Google Platform

Devi includere la Libreria Google Platform nelle pagine web che integrano Accedi con Google.

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

Specifica l'ID client dell'app

Specifica l'ID client creato per la tua app in Google Developers Console tramite l'elemento meta google-signin-client_id.

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

Aggiungere un pulsante Accedi con Google

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

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

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

Recupera informazioni del profilo

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

Per recuperare le informazioni del profilo di un utente, utilizza 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.
}

Uscire da un utente

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

<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>