Stiamo ritirando la Libreria JavaScript di Accedi con Google per il Web. La raccolta non sarà più disponibile per il download dopo la data di ritiro il 31 marzo 2023. Utilizza invece i nuovi servizi Google Identity per il Web.
Per impostazione predefinita, ora gli ID client appena creati non possono utilizzare la libreria Platform precedente, mentre gli ID client esistenti non sono interessati. I nuovi ID client creati prima del 29 luglio 2022 possono impostare `plugin_name` per abilitare l'utilizzo della Libreria Google Platform.

Integrazione di Google Sign-In nella tua app web

Google Sign-In gestisce il flusso di OAuth 2.0 e il ciclo di vita dei 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 base per l'accesso con Google.

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. Fare 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 cliente per completare i passaggi successivi. (Viene anche creato un segreto client, ma è necessario solo per le operazioni lato server.)

Carica la libreria della piattaforma Google

Devi includere la Google Platform Library nelle tue pagine web che integrano Google Sign-In.

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

Specifica l'ID cliente 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 a 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 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 utilizzi 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>

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 di 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, allega 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>