Aggiungi un pulsante Accedi con Google al tuo sito per consentire agli utenti di registrarsi o accedi alla tua app web. Utilizza HTML o JavaScript per eseguire il rendering del pulsante e per 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 JWT (JSON Web Token). Per una panoramica della procedura durante l'accesso e l'esperienza utente, consulta Come funziona. Informazioni sul pulsante personalizzato esamina le diverse condizioni e stati che influiscono sulla modalità di visualizzazione del pulsante agli utenti.
Prerequisiti
Completa le operazioni seguenti prima di aggiungere il pulsante alla pagina di accesso:
- Segui i passaggi descritti in Configurazione per configurare il tuo consenso OAuth. Schermata e per ottenere un ID client.
- Carica la libreria client.
Rendering dei pulsanti
Per visualizzare il pulsante Accedi con Google, puoi scegliere tra HTML o JavaScript per eseguire il rendering del pulsante nella pagina di accesso:
HTML
Esegui il rendering del pulsante di accesso utilizzando HTML, restituendo il JWT al codice endpoint di accesso.
<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 One Tap di Google One nella stessa pagina,
rimuovi data-auto_prompt="false"
. Questa procedura è consigliata per ridurre l'attrito e
migliorare la percentuale di accesso.
Per l'elenco completo degli attributi dei dati, consulta la pagina di riferimento g_id_signin
.
JavaScript
Esegui il rendering del 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 per renderButton
viene visualizzato come
Pulsante Accedi con Google. In questo esempio, buttonDiv
viene utilizzato per eseguire il rendering
il pulsante sulla pagina. Il pulsante viene personalizzato utilizzando gli attributi
specificati nel secondo parametro di renderButton
.
Per ridurre al minimo le difficoltà degli 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 una corrispondenza
, il rendering del pulsante viene eseguito utilizzando HTML, indipendentemente dal fatto che tu abbia
anche il rendering del pulsante in JavaScript. Per evitare di visualizzare il pulsante
due volte, eventualmente con parametri in conflitto, non includere elementi HTML
corrispondenti a questi nomi nelle tue pagine HTML.
Lingua pulsante
La lingua dei pulsanti viene determinata automaticamente dall'impostazione predefinita del browser
lingua o la preferenza dell'utente della sessione Google. Puoi anche scegliere la lingua manualmente aggiungendo il parametro hl
e il codice lingua alla direttiva src al momento del caricamento della libreria e il parametro facoltativo data-locale o locale data-locale in HTML o 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 il
Attributo data-locale
in 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
Metodo google.accounts.id.renderButton
con il parametro locale
impostato su
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 aver dato il consenso dell'utente, Google restituisce una credenziale JSON Web Token (JWT) noto come token ID al browser dell'utente o direttamente ospitato dalla tua piattaforma.
Dove scegli di ricevere il JWT dipende dal fatto che tu esegua il rendering del pulsante utilizzando HTML o JavaScript e, se viene utilizzata la modalità UX popup o di reindirizzamento.
Modalità popup
La modalità UX di popup
esegue il flusso UX di accesso in una finestra popup. Questo è
generalmente meno invasiva per gli utenti ed è la modalità UX predefinita.
Quando viene visualizzato il pulsante utilizzando:
HTML
Puoi impostare:
data-callback
per restituire il JWT al gestore del callback oppuredata-login_uri
affinché Google invii 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 si utilizza un gestore di callback per il debug.
JavaScript
Devi specificare un callback
; la modalità popup non supporta i reindirizzamenti
quando invii il pulsante in JavaScript. Se impostato, login_uri
viene ignorato.
Per saperne di più sulla decodifica del JWT all'interno del gestore del callback JS, consulta Gestire la risposta delle credenziali restituite.
Modalità di reindirizzamento
La modalità UX di redirect
esegue il flusso UX di accesso utilizzando la pagina intera
del browser dell'utente e Google restituisce il JWT direttamente al tuo
endpoint di accesso utilizzando una richiesta POST.
In genere, si tratta di un'esperienza più invasiva per gli utenti, ma è considerata il metodo di accesso più sicuro.
Quando esegui il rendering del pulsante utilizzando:
- In HTML, imposta facoltativamente
data-login_uri
sull'URI del tuo endpoint di accesso. - JavaScript imposta facoltativamente
login_uri
sull'URI del tuo 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
.
Consulta la sezione Utilizzare origini JavaScript e URI di reindirizzamento sicuri per una descrizione completa dei requisiti e delle regole di convalida di Google.