Accedi con Google gestisce il flusso OAuth 2.0 e il ciclo di vita del token, semplificare l'integrazione con le API di Google. Un utente ha sempre la possibilità di revoca l'accesso a un applicazione in qualsiasi momento.
Questo documento descrive come completare un'integrazione di base di Accedi con Google.
Crea le 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 nel server OAuth 2.0 di Google. I passaggi seguenti spiegano come e creare le credenziali per il tuo progetto. Le applicazioni possono quindi utilizzare le credenziali per accedere alle API che hai abilitato per il progetto.
- Go to the Credentials page.
- Fai clic su Crea credenziali > ID client OAuth.
- Seleziona il tipo di applicazione Web Application.
- Assegna un nome al client OAuth 2.0 e fai clic su Crea.
Al termine della configurazione, prendi nota dell'ID client creato. Avrai bisogno dell'ID client per completare i passaggi successivi. (Un client secret è inoltre ma è necessario solo per le operazioni lato server.)
Carica la libreria della piattaforma Google
Devi includere la libreria della piattaforma Google nelle tue 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 che hai creato per la tua app in Google Developers Console
con l'elemento meta google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Aggiungi un pulsante Accedi con Google
Il modo più semplice per aggiungere un pulsante Accedi con Google al tuo sito è utilizzare un con il rendering automatico del pulsante di accesso. Con poche righe di codice puoi aggiungere un pulsante che si configura automaticamente in modo da avere il testo appropriato, logo e colori per lo stato dell'accesso dell'utente e gli ambiti che richiedi.
Per creare un pulsante Accedi con Google che utilizzi le impostazioni predefinite, aggiungi un div
con la classe g-signin2 alla pagina di accesso:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Ottieni informazioni sul profilo
Dopo aver eseguito l'accesso di un utente a 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 del profilo di un utente, utilizza la
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.
}
Disconnettere un utente
Per consentire agli utenti di uscire dalla tua app senza disconnettersi da Google,
l'aggiunta di un link o di un pulsante
di disconnessione al tuo sito. Per creare un link di uscita, allega
una funzione che chiama
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>