Questa pagina di riferimento descrive l'API degli attributi di dati HTML di Accedi con Google. Puoi utilizzare l'API per visualizzare il prompt One Tap o il pulsante Accedi con Google sulle tue 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 in 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-auto_prompt |
Visualizza il tocco di Google One. |
data-auto_select |
Attiva la selezione automatica su Google One Tap. |
data-login_uri |
L'URL dell'endpoint di accesso |
data-callback |
Nome della funzione di gestione del token ID JavaScript |
data-native_login_uri |
L'URL dell'endpoint del gestore delle credenziali 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 del prompt One Tap |
data-skip_prompt_cookie |
Ignora One Tap se il cookie specificato ha un valore non vuoto. |
data-nonce |
Una stringa casuale per i token ID |
data-context |
Il titolo e le parole nel prompt One Tap |
data-moment_callback |
Il nome della funzione del listener di notifica dello stato della UI del prompt |
data-state_cookie_domain |
Se devi chiamare One Tap nel dominio principale e nei relativi sottodomini, trasferisci il dominio principale a questo attributo in modo che venga utilizzato un singolo cookie condiviso. |
data-ux_mode |
Flusso dell'esperienza utente del pulsante Accedi con Google |
data-allowed_parent_origin |
Le origini autorizzate a incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedia se questo attributo è presente. |
data-intermediate_iframe_close_callback |
Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap. |
data-itp_support |
Consente di eseguire l'upgrade dell'esperienza utente One Tap sui browser ITP. |
data-login_hint |
Salta la selezione dell'account fornendo un suggerimento per l'utente. |
data-hd |
Limita la selezione degli 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'esperienza utente 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 Selezione automatica
per il flusso del pulsante FedCM. Se abilitata, gli utenti di ritorno con una
sessione Google attiva accederanno automaticamente, bypassando la
richiesta di selezione dell'account. Il valore predefinito è false . |
Tipi di attributi
Le sezioni seguenti contengono dettagli sul tipo di ciascun 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-auto_prompt
Questo attributo determina se visualizzare One Tap o meno. 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 automaticamente un token ID,
senza alcuna interazione dell'utente, se solo una 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 le credenziali vengono pubblicate in questa pagina per impostazione predefinita.
La risposta delle credenziali 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.
Il tuo 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" |
Potrebbe essere utilizzato uno degli attributi data-login_uri
e data-callback
. Dipende
dalle seguenti configurazioni di componenti e modalità UX:
L'attributo
data-login_uri
è obbligatorio per la modalità UX del pulsanteredirect
Accedi con Google, che ignora l'attributodata-callback
.Uno di questi due attributi deve essere impostato per la modalità UX di One Tap di Google e del pulsante Accedi con Google
popup
. Se entrambi sono impostati, l'attributodata-callback
ha una priorità più elevata.
Le funzioni JavaScript all'interno di uno spazio dei nomi non sono supportate dall'API HTML.
Utilizza invece una funzione JavaScript globale senza spazio dei nomi. Ad esempio, utilizza
mylibCallback
invece di mylib.callback
.
data-native_login_uri
Questo attributo è l'URL dell'endpoint del gestore delle credenziali password. Se imposti l'attributo data-native_login_uri
o l'attributo data-native_callback
, la libreria JavaScript torna al gestore delle credenziali integrato quando non è presente una sessione Google. Non puoi impostare entrambi gli attributi
data-native_callback
e data-native_login_uri
. Per ulteriori informazioni, consulta la seguente tabella:
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 le credenziali
della password restituite 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 è consentito impostare sia
data-native_callback
che data-native_login_uri
. Per ulteriori informazioni, consulta la seguente tabella:
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 spazio dei nomi. Ad esempio, utilizza
mylibCallback
invece di mylib.callback
.
data-native_id_param
Quando invii la credenziale password all'endpoint del gestore delle credenziali 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 password all'endpoint del gestore delle credenziali password, puoi specificare il nome del parametro per il valore credential.password
. Il nome predefinito è password
. Per ulteriori informazioni, consulta la seguente tabella:
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 all'esterno del prompt. 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 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" |
data-skip_prompt_cookie
Utilizza un cookie per controllare la visualizzazione della richiesta One Tap. Se il cookie specificato da questo attributo ha un valore non vuoto, il prompt non viene visualizzato. 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 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 di singoli browser e server.
data-context
Questo campo modifica il testo del titolo e dei messaggi visualizzati nel prompt
One Tap, senza alcun effetto per i 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 |
"Iscriviti 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 spazio dei nomi. Ad esempio, utilizza
mylibCallback
invece di mylib.callback
.
data-state_cookie_domain
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 con 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 dell'esperienza utente utilizzato dal pulsante Accedi con Google. Il valore predefinito è popup
. Questo attributo non ha alcun impatto sull'esperienza utente 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. One Tap viene eseguito in modalità iframe intermedia se questo attributo è presente. Per ulteriori informazioni, consulta la seguente tabella:
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 URI di un singolo dominio. | "https://example.com" |
string array |
Un elenco di URI di domini 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 a mente 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
ehttps://
.co.uk
non sono validi perché"https://.example.com"
corrisponde aexample.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 dominiexample1.com
,example2.com
e ai sottodomini diexample2.com
- I domini con caratteri jolly devono iniziare con uno schema https:// sicuro, quindi
"*.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. e ha effetto solo sull'iframe intermedio,
anziché sull'iframe One Tap. L'interfaccia utente One Tap viene rimossa prima che venga richiamata la richiamata.
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 spazio dei nomi. Ad esempio, utilizza
mylibCallback
invece di mylib.callback
.
data-itp_support
Questo campo determina se l'
esperienza utente One Tap aggiornata
deve essere attivata sui browser che supportano la prevenzione del tracciamento intelligente
(ITP). Il valore predefinito è false
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
booleano | Facoltativo | data-itp_support="true" |
data-login_hint
Se la tua applicazione sa in anticipo quale utente deve accedere, può fornire un suggerimento per l'accesso a Google. In caso di esito positivo, la selezione dell'account viene ignorata. I valori accettati sono: un indirizzo email o un token ID campo sub.
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 questo campo per fornire un suggerimento per il nome di dominio a Google. In caso di esito positivo, gli account utente
visualizzati durante la selezione dell'account sono limitati al dominio fornito.
Un valore 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 i prompt 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 Eseguire la migrazione a FedCM.
Tipo | Obbligatorio | Esempio |
---|---|---|
booleano | Facoltativo | data-use_fedcm_for_prompt="true" |
data-use_fedcm_for_button
Questo campo determina se l'esperienza utente del pulsante FedCM deve essere utilizzata su Chrome (M125+ per computer
e M128+ per Android). Il valore predefinito è false
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
booleano | Facoltativo | data-use_fedcm_for_button="true" |
data-button_auto_select
Questo campo determina se attivare l'opzione Selezione automatica per il flusso del pulsante FedCM. Se attivata, gli utenti di ritorno con una sessione Google attiva
accederanno automaticamente, ignorando la richiesta di selezione dell'account. Il valore predefinito
è false
. Devi attivare esplicitamente l'accesso automatico con il pulsante durante l'avvio dell'attivazione. Per ulteriori informazioni, consulta la seguente tabella:
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 nella 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 |
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 ciascun attributo e un esempio.
data-type
Il tipo di pulsante. Il valore predefinito è standard
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Sì | data-type="icon" |
La tabella seguente elenca tutti i tipi di pulsante disponibili e le relative descrizioni:
Tipo | |
---|---|
standard |
![]() ![]() |
icon |
![]() |
data-theme
Il tema del pulsante. Il valore predefinito è outline
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | data-theme="filled_blue" |
La tabella seguente elenca i temi disponibili e le relative descrizioni:
Tema | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
data-size
Le dimensioni del pulsante. Il valore predefinito è large
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | data-size="small" |
La tabella seguente elenca le dimensioni dei pulsanti disponibili e le relative descrizioni.
Dimensioni | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
data-text
Il testo del pulsante. Il valore predefinito è signin_with
. Non ci sono differenze
visive per il testo dei pulsanti con icone che hanno 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 |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
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 |
![]() ![]() ![]() icon , è uguale a square .
|
pill |
![]() ![]() ![]() icon , è uguale a circle .
|
circle |
![]() ![]() ![]() standard , è uguale a pill .
|
square |
![]() ![]() ![]() standard , è uguale 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 seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | data-logo_alignment="center" |
La tabella seguente elenca gli allineamenti disponibili e le relative descrizioni:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
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
le impostazioni dell'Account Google o del browser degli utenti. Aggiungi il parametro hl
e
il codice lingua alla direttiva src durante il caricamento della libreria, ad esempio:
gsi/client?hl=<iso-639-code>
.
Se non è impostata, viene utilizzata la lingua predefinita del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero visualizzare versioni diverse dei pulsanti localizzati e, 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 Sign in with Google button clicked... viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.
data-state
Facoltativo: poiché nella stessa pagina possono essere visualizzati più pulsanti Accedi con Google, puoi assegnare a ciascun 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
Gli endpoint lato server devono gestire le seguenti richieste HTTP POST
.
L'endpoint del gestore del token ID
L'endpoint del gestore del token ID elabora il token ID. In base allo stato dell'account corrispondente, puoi accedere all'account dell'utente e indirizzarlo a una pagina di registrazione o a una pagina di collegamento dell'account per ulteriori informazioni.
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 | select_by |
Modalità di accesso dell'utente. |
Parametro di richiesta | state |
Questo parametro viene definito solo quando l'utente fa clic su un pulsante Accedi con Google
per accedere e viene specificato l'attributo state del pulsante. |
credenziale
Quando 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 GSuite email address "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's creation time "exp": 1596477600, // Unix timestamp of the assertion's expiration time "jti": "abc161803398874def" }
Il campo sub
è un identificatore univoco globale dell'Account Google. Utilizza
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 ed è autorevole per questo. Nei casi in cui Google è
autorevole, viene confermato che l'utente è il proprietario legittimo dell'account.
Casi in cui Google è autorevole:
email
ha un suffisso@gmail.com
, si tratta di un account Gmail.email_verified
è true ehd
è impostato, si tratta di un account Google Workspace.
Gli utenti possono registrarsi per gli Account Google senza utilizzare Gmail o Google Workspace.
Quando email
non contiene un suffisso @gmail.com
e hd
è assente, Google
non è autorevole e per verificare l'utente sono consigliati la password o altri metodi di verifica. email_verified
può essere vera anche perché 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 il tempo di scadenza per la verifica del token sul lato server. È di un'ora
per il token ID ottenuto da Accedi con Google. 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 dei tuoi utenti.
g_csrf_token
Un token di stato anti-contraffazione. Questo è un token Cross-site request forgery (CSRF)
creato dalla libreria gsi/client
. Un valore casuale è 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.
select_by
La seguente tabella elenca i possibili valori per il campo select_by
. Il
tipo di pulsante utilizzato insieme allo stato della sessione e del consenso viene utilizzato per impostare il
valore.
L'utente ha premuto il pulsante One Tap o Accedi con Google oppure ha utilizzato la procedura di accesso automatico senza contatto.
È stata trovata una sessione esistente oppure l'utente ha selezionato e ha eseguito l'accesso a un Account Google per stabilire una nuova sessione.
Prima di condividere le credenziali del token ID con la tua app, l'utente
- ha premuto il pulsante Conferma per concedere il consenso alla condivisione delle credenziali, oppure
- aveva precedentemente concesso il consenso e utilizzato Seleziona un account per scegliere un Account Google.
Il valore di questo campo è impostato su uno di questi tipi:
Valore | Descrizione |
---|---|
auto |
Accesso automatico di un utente con una sessione esistente che aveva precedentemente concesso il consenso a condividere le credenziali. Si applica solo ai browser non supportati da FedCM. |
user |
Un utente con una sessione esistente che aveva precedentemente concesso il consenso ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali. Si applica solo ai browser non supportati da FedCM. |
fedcm |
Un utente ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali utilizzando FedCM. Si applica solo ai browser supportati da FedCM. |
fedcm_auto |
Accesso automatico di un utente con una sessione esistente che aveva precedentemente concesso il consenso a condividere le credenziali utilizzando FedCM One Tap. Si applica solo ai browser supportati da FedCM. |
user_1tap |
Un utente con una sessione esistente ha premuto il pulsante "Continua come" di One Tap per concedere il consenso e condividere le credenziali. Si applica solo a Chrome v75 e versioni successive. |
user_2tap |
Un utente senza una sessione esistente ha premuto il pulsante "Continua come" di One Tap per selezionare un account e poi ha premuto il pulsante Conferma in una finestra popup per concedere il consenso e condividere le credenziali. Si applica ai browser non basati su Chromium. |
btn |
Un utente con una sessione esistente che ha precedentemente concesso il consenso ha premuto il pulsante Accedi con Google e ha selezionato un Account Google da "Scegli un account" per condividere le credenziali. |
btn_confirm |
Un utente con una sessione esistente ha premuto il pulsante Accedi con Google e il pulsante Conferma per concedere il consenso e condividere le credenziali. |
btn_add_session |
Un utente senza una sessione esistente che ha precedentemente concesso il consenso ha premuto il pulsante Accedi con Google per selezionare un Account Google e condividere le credenziali. |
btn_confirm_add_session |
Un utente senza una sessione esistente ha prima premuto il pulsante Accedi con Google per selezionare un Account Google e poi ha premuto il pulsante Conferma per dare il consenso e condividere le credenziali. |
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 su cui è stato fatto clic è
specificato. Il valore di questo campo è lo stesso specificato nell'attributo
data-state
del pulsante.
Poiché è possibile eseguire il rendering di più pulsanti Accedi con Google nella stessa pagina, puoi
assegnare a ogni pulsante una stringa univoca. Pertanto, 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 con password elabora le credenziali con 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. |