Aggiungi al tuo sito un pulsante Accedi con Google per consentire agli utenti di registrarsi o accedere alla tua app web. Utilizza HTML o JavaScript per visualizzare il pulsante e gli attributi e personalizzare forma, dimensioni, testo e tema del pulsante.
Dopo che un utente seleziona un Account Google e dà il proprio consenso, Google condivide il profilo utente utilizzando un token web JSON (JWT). Per una panoramica dei passaggi previsti per l'accesso e l'esperienza utente, consulta la pagina Come funziona. Comprendere il pulsante personalizzato esamina le diverse condizioni e i vari stati che influiscono sulla modalità di visualizzazione del pulsante per gli utenti.
Prerequisiti
Completa quanto segue prima di aggiungere il pulsante alla pagina di accesso:
- Segui i passaggi descritti in Configurazione per configurare la schermata per il consenso OAuth e ottenere un ID client.
- Carica la libreria client.
Rendering del pulsante
Per visualizzare il pulsante Accedi con Google, puoi scegliere HTML o JavaScript per il rendering del pulsante nella tua pagina di accesso:
HTML
Esegui il rendering del pulsante di accesso utilizzando HTML, restituendo il JWT all'endpoint di accesso della tua piattaforma.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
Un elemento con una classe g_id_signin
viene visualizzato come pulsante Accedi con Google.
Il pulsante viene personalizzato in base ai parametri forniti negli attributi dei dati.
Per visualizzare un pulsante Accedi con Google e Google One Tap sulla stessa pagina,
rimuovi data-auto_prompt="false"
. Questa opzione è consigliata per semplificare
e migliorare la frequenza di accesso.
Per l'elenco completo degli attributi dei dati, consulta la pagina di riferimento g_id_signin
JavaScript
Visualizza il pulsante di accesso utilizzando JavaScript, restituendo il JWT al gestore di callback JavaScript del browser.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
L'elemento specificato come primo parametro di renderButton
viene visualizzato come pulsante Accedi con Google. In questo esempio, buttonDiv
viene usato
per il rendering del pulsante sulla pagina. Il pulsante viene personalizzato utilizzando gli attributi
specificati nel secondo parametro su renderButton
.
Per ridurre al minimo l'attrito per gli utenti, viene chiamato google.accounts.id.prompt()
per mostrare
One Tap come seconda alternativa all'utilizzo del pulsante per la registrazione o l'accesso.
La libreria GIS analizza il documento HTML per individuare elementi con un attributo ID impostato su g_id_onload
o attributi di classe contenenti g_id_signin
. Se viene trovato un elemento corrispondente, il pulsante viene visualizzato utilizzando HTML, indipendentemente dal fatto che tu abbia eseguito il rendering anche del pulsante in JavaScript. Per evitare di visualizzare il pulsante due volte, probabilmente con parametri in conflitto non includere elementi HTML che corrispondono a questi nomi nelle tue pagine HTML.
Lingua pulsante
La lingua del pulsante viene determinata automaticamente dalla lingua predefinita del browser o dalle preferenze dell'utente della sessione Google. Puoi anche scegliere la lingua manualmente aggiungendo il parametro hl
e il codice lingua all'istruzione src quando carichi la libreria e aggiungendo il parametro facoltativo data-locale o locale data-locale in HTML oppure locale in JavaScript.
HTML
Il seguente snippet di codice mostra come visualizzare la lingua del pulsante in francese
aggiungendo il parametro hl
all'URL della libreria client e impostando l'attributo
data-locale
sul francese:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
Il seguente snippet di codice mostra come visualizzare la lingua del pulsante in francese
aggiungendo il parametro hl
all'URL della libreria client e chiamando il
metodo google.accounts.id.renderButton
con il parametro locale
impostato sul
francese:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Gestione delle credenziali
Dopo il consenso dell'utente, Google restituisce al browser dell'utente o direttamente a un endpoint di accesso ospitato dalla tua piattaforma una credenziale JSON Web Token (JWT), nota come token ID.
Il punto in cui scegli di ricevere il JWT dipende dal fatto che il pulsante venga visualizzato utilizzando HTML o JavaScript e se viene utilizzata la modalità UX popup o reindirizzamento.
Modalità popup
L'utilizzo della modalità UX di popup
esegue il flusso UX di accesso in una finestra popup. Generalmente, si tratta di un'esperienza meno invasiva per gli utenti ed è la modalità UX predefinita.
Quando esegui il rendering del pulsante con:
HTML
Puoi impostare:
data-callback
per restituire il JWT al gestore di callback oppuredata-login_uri
per consentire a Google di inviare il JWT direttamente al tuo endpoint di accesso utilizzando una richiesta POST.
Se vengono impostati entrambi i valori, data-callback
ha la precedenza su data-login_uri
. L'impostazione di entrambi i valori può essere utile quando utilizzi un gestore di callback per il debug.
JavaScript
Devi specificare un callback
. La modalità popup non supporta i reindirizzamenti durante l'invio del pulsante in JavaScript. Se impostato, login_uri
viene ignorato.
Consulta Gestire la risposta delle credenziali restituita per ulteriori informazioni sulla decodifica del JWT all'interno del gestore di callback JS.
Modalità di reindirizzamento
La modalità UX di redirect
esegue il flusso UX di accesso utilizzando il reindirizzamento a pagina intera del browser dell'utente e Google restituisce il JWT direttamente all'endpoint di accesso utilizzando una richiesta POST.
Generalmente questa è un'esperienza più invasiva per gli utenti, ma è considerata il metodo di accesso più sicuro.
Quando esegui il rendering del pulsante con:
- HTML facoltativamente imposta
data-login_uri
sull'URI dell'endpoint di accesso. - Facoltativamente, JavaScript imposta
login_uri
sull'URI dell'endpoint di accesso.
Se non fornisci un valore, Google restituisce il JWT all'URI della pagina corrente.
URI dell'endpoint di accesso
Utilizza HTTPS e un URI assoluto quando imposti data-login_uri
o login_uri
.
Ad esempio: https://example.com/path
.
HTTP è consentito solo quando si utilizza localhost durante lo sviluppo:
http://localhost/path
.
Per una descrizione completa dei requisiti e delle regole di convalida di Google, consulta la sezione Utilizzo di origini JavaScript sicure e URI di reindirizzamento.