Riferimento API HTML di Accedi con Google

Questa pagina di riferimento descrive l'API degli attributi dei dati HTML di Accedi con Google, utilizzata per visualizzare il pulsante Accedi con Google o la richiesta One Tap sulle pagine web.

Elemento con ID "g_id_onload"

Puoi inserire gli attributi dei dati di Accedi con Google in qualsiasi elemento visibile o invisibile, ad esempio <div> e <span>. L'unico requisito è che l'ID elemento sia impostato su g_id_onload. Non inserire questo ID su più elementi.

Attributi dei dati

La tabella seguente elenca gli attributi dei dati con le relative descrizioni:

Attributo
data-client_id L'ID client della tua applicazione
data-color_scheme La combinazione di colori applicata alla richiesta One Tap.
data-auto_prompt Visualizza Google One Tap.
data-auto_select Abilita la selezione automatica su Google One Tap.
data-login_uri L'URL dell'endpoint di accesso
data-callback Il nome della funzione del gestore di token ID JavaScript
data-native_login_uri L'URL dell'endpoint del gestore delle credenziali della password
data-native_callback Il nome della funzione del gestore delle credenziali della password JavaScript
data-native_id_param Il nome del parametro per il valore credential.id
data-native_password_param Il nome del parametro per il valore credential.password
data-cancel_on_tap_outside Controlla se annullare la richiesta se l'utente fa clic al di fuori della richiesta.
data-prompt_parent_id L'ID DOM dell'elemento contenitore della richiesta One Tap
data-skip_prompt_cookie Salta One Tap se il cookie specificato ha un valore non vuoto.
data-nonce Una stringa casuale per i token ID
data-essential_claims Claim aggiuntivi da includere nel token ID restituito da Google.
data-context Il titolo e le parole nel prompt di One Tap
data-moment_callback Il nome della funzione del listener di notifiche di stato della UI del prompt
data-state_cookie_domain Se devi chiamare One Tap nel dominio principale e nei relativi sottodomini, passa il dominio principale a questo attributo in modo che venga utilizzato un singolo cookie condiviso.
data-ux_mode Flusso UX del pulsante Accedi con Google
data-allowed_parent_origin Le origini autorizzate a incorporare l'iframe intermedio. Se questo attributo è presente, One Tap viene eseguito in modalità iframe intermedio.
data-intermediate_iframe_close_callback Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap.
data-itp_support Abilita la UX One Tap aggiornata sui browser ITP.
data-login_hint Salta la selezione dell'account fornendo un suggerimento per l'utente.
data-hd Limita la selezione dell'account in base al dominio.
data-use_fedcm_for_prompt Consenti al browser di controllare le richieste di accesso degli utenti e di mediare il flusso di accesso tra il tuo sito web e Google.
data-use_fedcm_for_button Questo campo determina se l'UX del pulsante FedCM deve essere utilizzata su Chrome (desktop M125+ e Android M128+). Il valore predefinito è false.
data-button_auto_select Se attivare l'opzione di selezione automatica per il flusso del pulsante FedCM. Se questa opzione è attiva, gli utenti di ritorno con una sessione Google attiva verranno automaticamente autenticati, ignorando la richiesta del selettore account. Il valore predefinito è false.

Tipi di attributi

Le sezioni seguenti contengono dettagli su ogni tipo di attributo e un esempio.

data-client_id

Questo attributo è l'ID client della tua app, che viene trovato e creato nella console Google Cloud. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Sì data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-color_scheme

Questo campo indica la combinazione di colori applicata alla richiesta One Tap. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo. Il valore predefinito è la combinazione di colori predefinita di sistema degli utenti. data-color_scheme="dark"

La tabella seguente elenca le combinazioni di colori disponibili e le relative descrizioni.

Combinazione di colori
default Applica la combinazione di colori predefinita del sistema dell'utente, a seconda della combinazione di colori preferita dall'utente (chiara o scura).
light Applica una combinazione di colori chiari.
dark Applica una combinazione di colori scuri.

data-auto_prompt

Questo attributo determina se visualizzare o meno One Tap. Il valore predefinito è true. Google One Tap non viene visualizzato quando questo valore è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-auto_prompt="true"

data-auto_select

Questo attributo determina se restituire o meno un token ID automaticamente, senza alcuna interazione dell'utente, se una sola sessione Google ha approvato la tua app. Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-auto_select="true"

data-login_uri

Questo attributo è l'URI dell'endpoint di accesso.

Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0, che hai configurato nella piattaforma Google Auth e deve essere conforme alle nostre regole di convalida degli URI di reindirizzamento.

Questo attributo può essere omesso se la pagina corrente è la pagina di accesso, nel qual caso la credenziale viene pubblicata su questa pagina per impostazione predefinita.

La risposta della credenziale del token ID viene pubblicata nell'endpoint di accesso quando non è definita alcuna funzione di callback e un utente fa clic sui pulsanti Accedi con Google o One Tap oppure viene eseguito l'accesso automatico.

L'endpoint di accesso deve gestire le richieste POST contenenti un parametro credential con un valore del token ID nel corpo.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Facoltativo Esempio
URL Per impostazione predefinita, l'URI della pagina corrente o il valore specificato.
Ignorato quando sono impostati data-ux_mode="popup" e data-callback.		 data-login_uri="https://www.example.com/login"

data-callback

Questo attributo è il nome della funzione JavaScript che gestisce il token ID restituito. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Obbligatorio se data-login_uri non è impostato. data-callback="handleToken"

È possibile utilizzare uno degli attributi data-login_uri e data-callback. Dipende dalle seguenti configurazioni dei componenti e della modalità UX:

  • L'attributo data-login_uri è obbligatorio per la modalità UX redirect del pulsante Accedi con Google, che ignora l'attributo data-callback.

  • Uno di questi due attributi deve essere impostato per Google One Tap e per la modalità UX popup del pulsante Accedi con Google. Se vengono impostati entrambi, l'attributo data-callback ha la precedenza.

Le funzioni JavaScript all'interno di uno spazio dei nomi non sono supportate dall'API HTML. Utilizza invece una funzione JavaScript globale senza uno spazio dei nomi. Ad esempio, utilizza mylibCallback anziché mylib.callback.

Alla funzione di callback viene passato un oggetto CredentialResponse come parametro. Per i dettagli sui possibili valori di risposta, consulta CredentialResponse.

data-native_login_uri

Questo attributo è l'URL dell'endpoint del gestore delle credenziali della password. Se imposti l'attributo data-native_login_uri o l'attributo data-native_callback, la libreria JavaScript utilizza il Gestore delle credenziali integrato quando non è presente una sessione Google. Non è consentito impostare entrambi gli attributi data-native_callback e data-native_login_uri. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-login_uri="https://www.example.com/password_login"

data-native_callback

Questo attributo è il nome della funzione JavaScript che gestisce la credenziale della password restituita dal Gestore delle credenziali integrato del browser. Se imposti l'attributo data-native_login_uri o l'attributo data-native_callback, la libreria JavaScript utilizza il Gestore delle credenziali integrato quando non è presente una sessione Google. Non puoi impostare sia data-native_callback che data-native_login_uri. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-native_callback="handlePasswordCredential"

Le funzioni JavaScript all'interno di uno spazio dei nomi non sono supportate dall'API HTML. Utilizza invece una funzione JavaScript globale senza uno spazio dei nomi. Ad esempio, utilizza mylibCallback anziché mylib.callback.

data-native_id_param

Quando invii la credenziale della password all'endpoint del gestore delle credenziali della password, puoi specificare il nome del parametro per il campo credential.id. Il nome predefinito è email. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
URL Facoltativo data-native_id_param="user_id"

data-native_password_param

Quando invii la credenziale della password all'endpoint del gestore delle credenziali della password, puoi specificare il nome del parametro per il valore credential.password. Il nome predefinito è password. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
URL Facoltativo data-native_password_param="pwd"

data-cancel_on_tap_outside

Questo attributo imposta se annullare o meno la richiesta One Tap se l'utente fa clic al di fuori della richiesta. Il valore predefinito è true. Per disattivarlo, imposta il valore su false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-cancel_on_tap_outside="false"

data-prompt_parent_id

Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostato, il prompt di One Tap viene visualizzato nell'angolo in alto a destra della finestra. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-prompt_parent_id="parent_id"

Utilizza un cookie per controllare la visualizzazione della richiesta One Tap. Se il cookie specificato da questo attributo ha un valore non vuoto, la richiesta non viene visualizzata. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-skip_prompt_cookie="SID"

data-nonce

Questo attributo è una stringa casuale utilizzata dal token ID per impedire attacchi di tipo replay. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-nonce="biaqbm70g23"

La lunghezza del nonce è limitata alla dimensione massima del JWT supportata dal tuo ambiente e ai vincoli di dimensione HTTP dei singoli browser e server.

data-essential_claims

Questo attributo è una stringa utilizzata per richiedere l'inclusione di claim aggiuntivi nel token ID restituito da Google. Per un elenco completo delle attestazioni accettate da Google, consulta l'articolo sulle attestazioni supportate.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-essential_claims="auth_time, amr"

contesto-dati

Questo campo modifica il testo del titolo e dei messaggi mostrati nel prompt One Tap, ma non ha alcun effetto sui browser ITP. Il valore predefinito è signin.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-context="use"

La tabella seguente elenca tutti i contesti disponibili e le relative descrizioni:

Contesto
signin "Accedi a"
signup "Registrati a"
use "Usa"

data-moment_callback

Questo attributo è il nome della funzione del listener di notifica dello stato della UI del prompt. Per saperne di più, consulta il tipo di dati PromptMomentNotification.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-moment_callback="logMomentNotification"

Le funzioni JavaScript all'interno di uno spazio dei nomi non sono supportate dall'API HTML. Utilizza invece una funzione JavaScript globale senza uno spazio dei nomi. Ad esempio, utilizza mylibCallback anziché mylib.callback.

Se devi visualizzare One Tap in un dominio principale e nei relativi sottodomini, passa il dominio principale a questo attributo in modo che venga utilizzato un singolo cookie di stato condiviso. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-state_cookie_domain="example.com"

data-ux_mode

Questo attributo imposta il flusso UX utilizzato dal pulsante Google Accedi con Google. Il valore predefinito è popup. Questo attributo non ha alcun impatto sull'esperienza utente di One Tap. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-ux_mode="redirect"

La tabella seguente elenca le modalità UX disponibili e le relative descrizioni.

Modalità UX
popup Esegue il flusso UX di accesso in una finestra popup.
redirect Esegue il flusso UX di accesso tramite un reindirizzamento a pagina intera.

data-allowed_parent_origin

Le origini autorizzate a incorporare l'iframe intermedio. Se questo attributo è presente, One Tap viene eseguito in modalità iframe intermedio. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa o array di stringhe Facoltativo data-allowed_parent_origin="https://example.com"

La tabella seguente elenca i tipi di valori supportati e le relative descrizioni.

Tipi di valori
string Un singolo URI di dominio. "https://example.com"
string array Un elenco di URI di dominio separati da virgole. "https://news.example.com,https://local.example.com"

Se il valore dell'attributo data-allowed_parent_origin non è valido, l'inizializzazione di One Tap della modalità iframe intermedia non andrà a buon fine e si interromperà.

Sono supportati anche i prefissi con caratteri jolly. Ad esempio, "https://*.example.com" corrisponde a example.com e ai relativi sottodomini a tutti i livelli (ad es. news.example.com, login.news.example.com). Aspetti da tenere presente quando utilizzi i caratteri jolly:

  • Le stringhe di pattern non possono essere composte solo da un carattere jolly e da un dominio di primo livello. Ad esempio, https://.com e https://.co.uk non sono validi perché "https://.example.com" corrisponde a example.com e a tutti i relativi sottodomini. Utilizza un elenco separato da virgole per rappresentare due domini diversi. Ad esempio, "https://example1.com,https://.example2.com" corrisponde ai domini example1.com, example2.com e ai sottodomini di example2.com
  • I domini con caratteri jolly devono iniziare con uno schema https:// sicuro, pertanto "*.example.com" è considerato non valido.

data-intermediate_iframe_close_callback

Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap toccando il pulsante "X" nell'interfaccia utente di One Tap. Il comportamento predefinito prevede la rimozione immediata dell'iframe intermedio dal DOM.

Il campo data-intermediate_iframe_close_callback ha effetto solo in modalità iframe intermedio. Inoltre, influisce solo sull'iframe intermedio, anziché sull'iframe di One Tap. La UI di One Tap viene rimossa prima che venga richiamato il callback.

Tipo Obbligatorio Esempio
funzione Facoltativo data-intermediate_iframe_close_callback="logBeforeClose"

Le funzioni JavaScript all'interno di uno spazio dei nomi non sono supportate dall'API HTML. Utilizza invece una funzione JavaScript globale senza uno spazio dei nomi. Ad esempio, utilizza mylibCallback anziché mylib.callback.

data-itp_support

Questo campo determina se la UX One Tap di cui è stato eseguito l'upgrade deve essere attivata nei browser che supportano Intelligent Tracking Prevention (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-itp_support="false"

data-login_hint

Se la tua applicazione sa in anticipo quale utente deve accedere, può fornire un suggerimento per l'accesso a Google. Se l'operazione va a buon fine, la selezione dell'account viene saltata. I valori accettati sono: un indirizzo email o un campo sub del token ID.

Per saperne di più, consulta la documentazione di OpenID Connect per login_hint.

Tipo Obbligatorio Esempio
Stringa. Può essere un indirizzo email o il valore del campo sub del token ID. Facoltativo data-login_hint="elisa.beckett@gmail.com"

data-hd

Quando un utente ha più account e deve accedere solo con il proprio account Workspace, utilizza questa opzione per fornire un suggerimento per il nome di dominio a Google. Se l'operazione va a buon fine, gli account utente visualizzati durante la selezione dell'account sono limitati al dominio fornito. Un valore con carattere jolly: * offre all'utente solo account Workspace ed esclude gli account consumer (user@gmail.com) durante la selezione dell'account.

Per saperne di più, consulta la documentazione di OpenID Connect per hd.

Tipo Obbligatorio Esempio
Stringa. Un nome di dominio completo o *. Facoltativo data-hd="*"

data-use_fedcm_for_prompt

Consenti al browser di controllare le richieste di accesso degli utenti e di mediare il flusso di accesso tra il tuo sito web e Google. Il valore predefinito è false. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.

Tipo Obbligatorio Esempio
booleano Deprecato data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

Questo campo determina se utilizzare la UX del pulsante FedCM su Chrome (desktop M125+ e Android M128+). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-use_fedcm_for_button="true"

data-button_auto_select

Questo campo determina se attivare l'opzione di selezione automatica per il flusso del pulsante FedCM. Se abilitata, gli utenti di ritorno con una sessione Google attiva verranno automaticamente autenticati, bypassando il prompt del selettore dell'account. Il valore predefinito è false. Devi attivare esplicitamente l'accesso automatico con pulsante durante il lancio dell'attivazione. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo data-button_auto_select="true"

Elemento con classe "g_id_signin"

Se aggiungi g_id_signin all'attributo class di un elemento, l'elemento viene visualizzato come pulsante Accedi con Google.

Puoi eseguire il rendering di più pulsanti Accedi con Google sulla stessa pagina. Ogni pulsante può avere le proprie impostazioni visive. Le impostazioni sono definite dai seguenti attributi dei dati.

Attributi dei dati visivi

La tabella seguente elenca gli attributi dei dati visivi e le relative descrizioni:

Attributo
data-type Il tipo di pulsante: icona o pulsante standard.
data-theme Il tema del pulsante. Ad esempio, filled_blue o filled_black.
data-size Le dimensioni del pulsante. Ad esempio, piccolo o grande.
data-text Il testo del pulsante. Ad esempio, "Accedi con Google" o "Registrati con Google".
data-shape La forma del pulsante. Ad esempio, rettangolare o circolare.
data-logo_alignment L'allineamento del logo Google: a sinistra o al centro.
data-width La larghezza del pulsante, in pixel.
data-locale Il testo del pulsante viene visualizzato nella lingua impostata in questo attributo.
data-click_listener Se impostata, questa funzione viene chiamata quando viene fatto clic sul pulsante Accedi con Google.
data-state Se impostata, questa stringa viene restituita con il token ID.

Tipi di attributi

Le sezioni seguenti contengono dettagli sul tipo di ogni attributo e un esempio.

tipo di dati

Il tipo di pulsante. Il valore predefinito è standard. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Sì data-type="icon"

La tabella seguente elenca tutti i tipi di pulsanti disponibili e le relative descrizioni:

Tipo
standard
Un pulsante con testo o informazioni personalizzate.
icon
Un pulsante icona senza testo.

data-theme

Il tema del pulsante. Il valore predefinito è outline. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-theme="filled_blue"

La tabella seguente elenca i temi disponibili e le relative descrizioni:

Tema Esempi Specifiche
outline
standard-button-white icon-button-white personalized-button-white
Un tema per i pulsanti standard.
Riempimento: #FFFFFF
Tratto: #747775 | 1px | interno
Carattere: #1F1F1F | Roboto Medium | 14/20
Personalizzato: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue
Un tema con pulsanti blu.
Riempimento: #0B57D0
Tratto: #OB57D0 | 1 px | interno
Carattere: #FFFFFF | Google Sans Medium | 14/20
Personalizzato: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black
Un tema del pulsante con sfondo nero e logo a contrasto.
Riempimento: #202124
Tratto: #OB57D0 | 1 px | interno
Carattere: #FFFFFF | Google Sans Medium | 14/20
Personalizzato: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark
Un tema per i pulsanti con riempimento nero.
Riempimento: #131314
Tratto: #8E918F | 1px | interno
Carattere: #FFFFFF | Google Sans Medium | 14/20
Personalizzato: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13

data-size

Le dimensioni del pulsante. Il valore predefinito è large. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-size="small"

La tabella seguente elenca le dimensioni dei pulsanti disponibili e le relative descrizioni.

Dimensioni
large
Un pulsante standard grande Un pulsante icona grande Un pulsante grande e personalizzato
Un pulsante grande.
medium
Un pulsante standard di medie dimensioni Un pulsante icona di medie dimensioni
Un pulsante di medie dimensioni.
small
Un piccolo pulsante Accedi Un piccolo pulsante icona
Un pulsante piccolo.

data-text

Il testo del pulsante. Il valore predefinito è signin_with. Non esistono differenze visive per il testo dei pulsanti icona con attributi data-text diversi. L'unica eccezione è quando il testo viene letto per l'accessibilità dello schermo.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-text="signup_with"

La tabella seguente elenca i testi dei pulsanti disponibili e le relative descrizioni:

Testo
signin_with
Un pulsante standard con l'etichetta &quot;Accedi con Google&quot; Un pulsante icona senza testo visibile
Il testo del pulsante è "Accedi con Google".
signup_with
Un pulsante standard con l'etichetta &quot;Registrati con Google&quot; Un pulsante icona senza testo visibile
Il testo del pulsante è "Registrati con Google".
continue_with
Un pulsante standard con l'etichetta &quot;Continua con Google&quot; Un pulsante icona senza testo visibile
Il testo del pulsante è "Continua con Google".
signin
Un pulsante standard con l'etichetta &quot;Accedi&quot; Un pulsante icona senza testo visibile
Il testo del pulsante è "Accedi".

data-shape

La forma del pulsante. Il valore predefinito è rectangular. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-shape="rectangular"

La tabella seguente elenca le forme dei pulsanti disponibili e le relative descrizioni:

Forma
rectangular
Un pulsante standard rettangolare Un pulsante icona rettangolare Un pulsante personalizzato rettangolare
Il pulsante di forma rettangolare. Se utilizzato per il tipo di pulsante icon, equivale a square.
pill
Un pulsante standard a forma di pillola Un pulsante icona a forma di pillola Un pulsante personalizzato a forma di pillola
Il pulsante a forma di pillola. Se utilizzato per il tipo di pulsante icon, equivale a circle.
circle
Un pulsante standard circolare Un pulsante icona circolare Un pulsante circolare personalizzato
Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante standard, equivale a pill.
square
Un pulsante standard quadrato Un pulsante icona quadrato Un pulsante quadrato personalizzato
Il pulsante quadrato. Se utilizzato per il tipo di pulsante standard, equivale a rectangular.

data-logo_alignment

L'allineamento del logo Google. Il valore predefinito è left. Questo attributo si applica solo al tipo di pulsante standard. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-logo_alignment="center"

La tabella seguente elenca gli allineamenti disponibili e le relative descrizioni:

logo_alignment
left
Un pulsante standard con il logo G a sinistra
Allinea a sinistra il logo Google.
center
Un pulsante standard con il logo G al centro
Allinea al centro il logo Google.

data-width

La larghezza minima del pulsante, in pixel. La larghezza massima disponibile è di 400 pixel.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-width=400

data-locale

Facoltativo. Visualizza il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti utilizza l'Account Google o le impostazioni del browser dell'utente. Aggiungi il parametro hl e il codice lingua all'istruzione src durante il caricamento della libreria, ad esempio: gsi/client?hl=<iso-639-code>.

Se non viene impostata, viene utilizzata l'impostazione internazionale predefinita del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero vedere versioni diverse dei pulsanti localizzati, possibilmente con dimensioni diverse.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-locale="zh_CN"

data-click_listener

Puoi definire una funzione JavaScript da chiamare quando viene fatto clic sul pulsante Accedi con Google utilizzando l'attributo data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

In questo esempio, il messaggio Pulsante Accedi con Google selezionato… viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.

stato-dati

Facoltativo: poiché è possibile eseguire il rendering di più pulsanti Accedi con Google nella stessa pagina, puoi assegnare a ogni pulsante una stringa univoca. La stessa stringa verrà restituita insieme al token ID, in modo da poter identificare il pulsante su cui l'utente ha fatto clic per accedere.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-state="button 1"

Integrazione lato server

I tuoi endpoint lato server devono gestire le seguenti richieste HTTP POST.

L'endpoint del gestore dei token ID

L'endpoint del gestore dei token ID elabora il token ID. In base allo stato dell'account corrispondente, puoi far accedere l'utente e indirizzarlo a una pagina di registrazione o a una pagina di collegamento degli account per ulteriori informazioni. I client DEVONO ignorare i parametri di risposta non riconosciuti.

Esempio di richiesta all'endpoint di accesso:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

La richiesta HTTP POST contiene le seguenti informazioni:

Formato Nome Descrizione
Cookie g_csrf_token Una stringa casuale che cambia a ogni richiesta all'endpoint di accesso specificato da data-login_uri, deve corrispondere al valore nel parametro di richiesta g_csrf_token.
Parametro di richiesta g_csrf_token Una stringa casuale che cambia a ogni richiesta all'endpoint di accesso specificato da data-login_uri, deve corrispondere al valore del cookie g_csrf_token.
Parametro di richiesta credential Il token ID JWT codificato emesso da Google.
Parametro di richiesta state Questo parametro viene definito solo quando l'utente fa clic su un pulsante Accedi con Google per accedere e l'attributo state del pulsante è specificato.

credenziale

Quando viene decodificato, il token ID è simile al seguente esempio: 

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

I client DEVONO ignorare le attestazioni JWT non riconosciute.

Il campo sub è un identificatore univoco globale per l'Account Google. Utilizza solo il campo sub come identificatore dell'utente, in quanto è univoco per tutti gli Account Google e non viene mai riutilizzato.

Utilizzando i campi email, email_verified e hd puoi determinare se Google ospita un indirizzo email e se è autorevole per questo indirizzo. Nei casi in cui Google è l'autorità, l'utente viene confermato come legittimo proprietario dell'account.

Casi in cui Google è autorevole:

  • email ha un suffisso @gmail.com, si tratta di un account Gmail.
  • email_verified è true e hd è impostato, si tratta di un account Google Workspace.

Gli utenti possono registrarsi per creare Account Google senza utilizzare Gmail o Google Workspace. Quando email non contiene un suffisso @gmail.com e hd è assente, Google non è autorevole e si consiglia di utilizzare la password o altri metodi di verifica per verificare l'utente. email_verified può anche essere true, poiché Google ha inizialmente verificato l'utente al momento della creazione dell'Account Google, ma la proprietà dell'account email di terze parti potrebbe essere cambiata nel frattempo.

Il campo exp mostra la data e l'ora di scadenza per verificare il token sul lato server. Per il token ID ottenuto da Accedi con Google, la durata è di un'ora. Devi verificare il token prima della scadenza. Non utilizzare exp per la gestione delle sessioni. Un token ID scaduto non significa che l'utente è disconnesso. La tua app è responsabile della gestione delle sessioni degli utenti.

g_csrf_token

Un token di stato antifalsificazione. Si tratta di un token di falsificazione di richiesta cross-site (CSRF) creato dalla libreria gsi/client. Un valore casuale viene incluso sia come cookie sia come parametro di richiesta nel corpo del payload POST. Se questi due valori non corrispondono durante l'elaborazione della richiesta sul tuo server, la richiesta deve essere considerata non valida.

stato

Questo parametro viene definito solo quando l'utente fa clic su un pulsante Accedi con Google per accedere e l'attributo data-state del pulsante selezionato è specificato. Il valore di questo campo è lo stesso che hai specificato nell'attributo data-state del pulsante.

Poiché nella stessa pagina possono essere visualizzati più pulsanti Accedi con Google, puoi assegnare a ogni pulsante una stringa univoca. Di conseguenza, puoi utilizzare questo parametro state per identificare il pulsante su cui l'utente ha fatto clic per accedere.

Endpoint del gestore delle credenziali della password

L'endpoint del gestore delle credenziali della password elabora le credenziali della password recuperate dal Gestore delle credenziali integrato.

La richiesta HTTP POST contiene le seguenti informazioni:

Formato Nome Descrizione
Cookie g_csrf_token Una stringa casuale che cambia a ogni richiesta all'endpoint di accesso specificato da data-native_login_uri, deve corrispondere al valore nel parametro di richiesta g_csrf_token.
Parametro di richiesta g_csrf_token Una stringa casuale che cambia a ogni richiesta all'endpoint di accesso specificato da data-native_login_uri, deve corrispondere al valore del cookie g_csrf_token.
Parametro di richiesta email Questo token ID emesso da Google.
Parametro di richiesta password Come viene selezionata la credenziale.