Questa pagina di riferimento descrive l'API Sign-In JavaScript. Puoi utilizzare questa API per visualizzare la richiesta One Tap o il pulsante Accedi con Google sulle tue pagine web.
Metodo: google.accounts.id.initialize
Il metodo google.accounts.id.initialize
inizializza il client Accedi con Google in base all'oggetto di configurazione. Vedi il seguente codice di esempio del metodo:
google.accounts.id.initialize(IdConfiguration)
Il seguente esempio di codice implementa il metodo google.accounts.id.initialize
con una funzione onload
:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
Il metodo google.accounts.id.initialize
crea un'istanza del client Accedi con Google che può essere utilizzata implicitamente da tutti i moduli nella stessa pagina web.
- Devi chiamare il metodo
google.accounts.id.initialize
una sola volta anche se utilizzi più moduli (ad esempio One Tap, Pulsante personalizzato, revoca e così via) nella stessa pagina web. - Se chiami il metodo
google.accounts.id.initialize
più volte, vengono memorizzate e utilizzate solo le configurazioni dell'ultima chiamata.
Di fatto, reimposti le configurazioni ogni volta che chiami il metodo google.accounts.id.initialize
e tutti i metodi successivi nella stessa pagina web utilizzano immediatamente le nuove configurazioni.
Tipo di dati: IdConfiguration
Nella tabella seguente sono elencati i campi e le descrizioni del tipo di dati IdConfiguration
:
Tecnico | |
---|---|
client_id |
L'ID client della tua applicazione |
auto_select |
Attiva la selezione automatica. |
callback |
La funzione JavaScript che gestisce i token ID. Google One Tap e
il pulsante Accedi con Google popup La modalità UX utilizza questo
attributo. |
login_uri |
L'URL dell'endpoint di accesso. Il pulsante Accedi con Google
redirect La modalità UX utilizza questo attributo. |
native_callback |
La funzione JavaScript che gestisce le credenziali della password. |
cancel_on_tap_outside |
Annulla la richiesta se l'utente fa clic all'esterno della richiesta. |
prompt_parent_id |
L'ID DOM dell'elemento contenitore del prompt One Tap |
nonce |
Una stringa casuale per i token ID. |
context |
Il titolo e le parole nel prompt One Tap |
state_cookie_domain |
Se devi chiamare One Tap nel dominio principale e nei relativi sottodomini, trasferisci il dominio principale a questo campo in modo che venga utilizzato un singolo cookie condiviso. |
ux_mode |
Flusso UX del pulsante Accedi con Google |
allowed_parent_origin |
Le origini autorizzate a incorporare l'iframe intermedio. Se questo campo è presente, viene eseguito un One Tap in modalità iframe intermedio. |
intermediate_iframe_close_callback |
Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap. |
itp_support |
Consente di attivare l'UX One Tap aggiornata sui browser ITP. |
login_hint |
Salta la selezione dell'account fornendo un suggerimento utente. |
hd |
Limita la selezione degli account in base al dominio. |
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. |
client_id
Questo campo è l'ID client dell'applicazione, disponibile e creato nella console Google Cloud. Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Sì | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Questo campo determina se un token ID viene restituito automaticamente senza alcuna interazione dell'utente quando esiste una sola sessione Google che ha già approvato l'app. Il valore predefinito è false
. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | auto_select: true |
callback
Questo campo è la funzione JavaScript che gestisce il token ID restituito dal prompt One Tap o dalla finestra popup. Questo attributo è obbligatorio se viene utilizzata la modalità UX
Google One Tap o il pulsante Accedi con Google popup
. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Obbligatorio per One Tap e per la modalità UX di popup |
callback: handleResponse |
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 console Google Cloud e deve essere conforme alle nostre regole di convalida dell'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 alle credenziali del token ID viene pubblicata nell'endpoint di accesso quando un utente fa clic sul pulsante Accedi con Google e viene utilizzata la modalità UX di reindirizzamento.
Per saperne di più, consulta la tabella seguente:
Tipo | Facoltativo | Esempio |
---|---|---|
URL | Il valore predefinito è l'URI della pagina corrente o il valore specificato. Utilizzato solo quando è impostato ux_mode: "redirect" . |
login_uri="https://www.example.com/login" |
L'endpoint di accesso deve gestire le richieste POST contenenti una chiave credential
con un valore del token ID nel corpo.
Di seguito è riportata una richiesta di esempio all'endpoint di accesso:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
native_callback
Questo campo è il nome della funzione JavaScript che gestisce le credenziali della password restituite dal gestore delle credenziali nativo del browser. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Facoltativo | native_callback: handleResponse |
cancel_on_tap_outside
Questo campo consente di specificare se annullare o meno la richiesta One Tap se un utente fa clic all'esterno della richiesta. Il valore predefinito è true
. Puoi disabilitarlo se imposti
il valore su false
. Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | cancel_on_tap_outside: false |
prompt_parent_id
Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostata, nell'angolo in alto a destra della finestra viene visualizzata la richiesta One Tap. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | prompt_parent_id: 'parent_id' |
nonce
Questo campo è una stringa casuale utilizzata dal token ID per impedire attacchi di ripetizione. Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | nonce: "biaqbm70g23" |
La lunghezza del nonce è limitata alle dimensioni massime di JWT supportate dal tuo ambiente e ai vincoli delle dimensioni HTTP dei singoli browser e server.
context
Questo campo modifica il testo del titolo e dei messaggi nel prompt One Tap. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | context: "use" |
Nella seguente tabella sono elencati tutti i contesti disponibili e le relative descrizioni:
Il contesto | |
---|---|
signin |
"Accedi con Google" |
signup |
"Registrati con Google" |
use |
"Utilizza con Google" |
state_cookie_domain
Se devi visualizzare One Tap nel dominio principale e nei relativi sottodomini, trasferisci il dominio principale a questo campo in modo che venga utilizzato un singolo cookie di stato condiviso. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | state_cookie_domain: "example.com" |
ux_mode
Usa questo campo per impostare il flusso UX utilizzato dal pulsante Accedi con Google. Il valore predefinito è popup
. Questo attributo non ha alcun impatto sull'esperienza utente di OneTap. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | ux_mode: "redirect" |
Nella tabella seguente sono elencate le modalità UX disponibili e le relative descrizioni.
Modalità UX | |
---|---|
popup |
Esegue il flusso UX dell'accesso in una finestra popup. |
redirect |
Esegue il flusso UX dell'accesso mediante un reindirizzamento a una pagina intera. |
allowed_parent_origin
Le origini autorizzate a incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedio se è presente questo campo. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa o array di stringhe | Facoltativo | allowed_parent_origin: "https://example.com" |
Nella tabella seguente sono elencati i tipi di valori supportati e le relative descrizioni.
Tipi di valore | ||
---|---|---|
string |
Un URI di dominio singolo. | "https://example.com" |
string array |
Un array di URI di dominio. | ["https://news.example.com", "https://local.example.com"] |
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 si utilizzano
caratteri jolly:
- Le stringhe pattern non possono essere composte solo da un carattere jolly e un dominio di primo livello. Ad esempio,
https://.com
ehttps://
.co.uk
non sono validi. Come indicato sopra,"https://.example.com"
corrisponde aexample.com
e ai relativi sottodomini. Puoi anche utilizzare un array 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, pertanto
"*.example.com"
viene considerato non valido.
Se il valore del campo allowed_parent_origin
non è valido, l'inizializzazione One Tap della modalità iframe intermedia non andrà a buon fine e verrà interrotta.
intermediate_iframe_close_callback
Sostituisce il comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap toccando il pulsante "X" nell'interfaccia utente One Tap. Il comportamento predefinito prevede la rimozione immediata dell'iframe intermedio dal DOM.
Il campo intermediate_iframe_close_callback
viene applicato solo in modalità iframe intermedia. Inoltre, ha impatto solo sull'iframe intermedio,
anziché sull'iframe One Tap. L'UI di One Tap viene rimossa prima che venga richiamato il callback.
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Facoltativo | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Questo campo determina se
l'esperienza utente One Tap aggiornata
deve essere abilitata sui browser che supportano la prevenzione del tracciamento intelligente
(ITP). Il valore predefinito è false
. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | itp_support: true |
login_hint
Se l'applicazione sa in anticipo quale utente deve eseguire l'accesso, 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 valore del campo sub del token ID.
Per ulteriori informazioni, consulta il campo login_hint nella documentazione di OpenID Connect.
Tipo | Obbligatorio | Esempio |
---|---|---|
Stringa, un indirizzo email o il valore di un campo sub del token ID. |
Facoltativo | login_hint: 'elisa.beckett@gmail.com' |
hd
Se un utente ha più account e deve accedere solo con il proprio account Workspace, usa questo metodo per fornire a Google un suggerimento per il nome di dominio. Se l'operazione va a buon fine, gli account utente visualizzati durante la selezione dell'account sono limitati al dominio fornito.
Un valore jolly: *
offre solo account Workspace all'utente ed esclude gli account consumer (utente@gmail.com) durante la selezione dell'account.
Per ulteriori informazioni, vedi il campo hd nella documentazione di OpenID Connect.
Tipo | Obbligatorio | Esempio |
---|---|---|
Stringa. Un nome di dominio completo o *. | Facoltativo | hd: '*' |
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 ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM.
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | use_fedcm_for_prompt: true |
Metodo: google.accounts.id.prompt
Il metodo google.accounts.id.prompt
mostra la richiesta One Tap o il Gestore delle credenziali nativo del browser dopo aver richiamato il metodo initialize()
.
Vedi l'esempio di codice seguente del metodo:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalmente, il metodo prompt()
viene richiamato al caricamento pagina. A causa dello stato della sessione e delle impostazioni utente sul lato Google, l'UI dei prompt di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato dell'interfaccia utente per momenti diversi, passa una funzione per ricevere notifiche sullo stato dell'interfaccia utente.
Le notifiche vengono attivate nei seguenti momenti:
- Momento di visualizzazione: questo si verifica dopo la chiamata del metodo
prompt()
. La notifica contiene un valore booleano che indica se l'interfaccia utente viene visualizzata o meno. Momento ignorato:si verifica quando la richiesta One Tap viene chiusa da un annullamento automatico, da un annullamento manuale o quando Google non riesce a rilasciare una credenziale, ad esempio quando la sessione selezionata è stata disconnessa da Google.
In questi casi, ti consigliamo di passare ai provider di identità successivi, se ce ne sono.
Momento ignorato:questo si verifica quando Google recupera una credenziale o un utente vuole interrompere il flusso di recupero delle credenziali. Ad esempio, quando l'utente inizia a inserire nome utente e password nella finestra di dialogo di accesso, puoi chiamare il metodo
google.accounts.id.cancel()
per chiudere la richiesta One Tap e attivare un momento di chiusura.
Il seguente esempio di codice implementa il momento ignorato:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Tipo di dati: PromptMomentNotification
La seguente tabella elenca metodi e descrizioni del
tipo di dati PromptMomentNotification
:
Metodo | |
---|---|
isDisplayMoment() |
Questa notifica ha una funzione di visualizzazione? Nota : quando FedCM è abilitato, questa notifica non viene attivata. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM. |
isDisplayed() |
Questa notifica riguarda un momento di visualizzazione e viene visualizzata la UI? Nota : quando FedCM è abilitato, questa notifica non viene attivata. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM. |
isNotDisplayed() |
Questa notifica riguarda un momento di visualizzazione e la UI non viene visualizzata? Nota : quando FedCM è abilitato, questa notifica non viene attivata. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM. |
getNotDisplayedReason() |
Il motivo dettagliato per cui l'interfaccia utente non viene visualizzata. Di seguito sono riportati i valori possibili:
|
isSkippedMoment() |
Questa notifica è per un momento saltato? |
getSkippedReason() |
Il motivo dettagliato del momento saltato. Di seguito sono riportati i valori possibili:
|
isDismissedMoment() |
Questa notifica è relativa a un momento ignorato? |
getDismissedReason() |
Il motivo dettagliato dell'esclusione. Di seguito sono riportati i possibili valori:
|
getMomentType() |
Restituisce una stringa per il tipo di momento. Di seguito sono riportati i possibili valori:
|
Tipo di dati: CredentialResponse
Quando la funzione callback
viene richiamata, un oggetto CredentialResponse
viene
passato come parametro. Nella tabella seguente sono elencati i campi contenuti nell'oggetto di risposta delle credenziali:
Tecnico | |
---|---|
credential |
Questo campo è il token ID restituito. |
select_by |
Questo campo imposta il modo in cui viene selezionata la credenziale. |
state |
Questo campo viene definito solo quando l'utente fa clic su un pulsante Accedi con Google
per accedere e l'attributo state
del pulsante viene specificato. |
credenziale
Questo campo corrisponde al token ID sotto forma di stringa JWT (JSON Web Token) codificata in base64.
Quando decodificato, il JWT è 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": "Elisa", "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 per l'Account Google. Utilizza solo il campo sub
come identificatore dell'utente, in quanto è univoco tra tutti gli Account Google e non è mai riutilizzato. Non utilizzare l'indirizzo email come identificatore perché
un Account Google può avere più indirizzi email in diversi momenti.
Utilizzando i campi email
, email_verified
e hd
, puoi determinare se Google ospita ed è autorevole per un indirizzo email. Nei casi in cui Google è autorevole, è stato confermato che l'utente è il legittimo proprietario dell'account.
Casi in cui Google è autorevole:
email
ha un suffisso@gmail.com
, quindi questo è un Account Gmail.email_verified
è true ehd
è impostato, questo è un account Google Workspace.
Gli utenti possono registrarsi ad Account Google senza utilizzare Gmail o Google Workspace.
Quando email
non contiene un suffisso @gmail.com
e hd
non è presente, Google non è autorevole e si consiglia di verificare l'utente con metodi di verifica della password o di altri metodi di verifica. Il valore email_verfied
può essere vero 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 da allora.
Il campo exp
mostra la data e l'ora di scadenza necessarie per verificare il token sul lato server. Manca 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 indica che l'utente è disconnesso. La tua app è responsabile della
gestione delle sessioni degli utenti.
select_by
Nella tabella seguente sono elencati i possibili valori per il campo select_by
. Il tipo di pulsante usato insieme allo stato della sessione e del consenso vengono usati per impostare il valore,
L'utente ha premuto il pulsante One Tap o Accedi con Google oppure ha utilizzato la procedura di accesso automatico touchless.
È stata trovata una sessione esistente o l'utente ha selezionato e 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
- hanno premuto il pulsante Conferma per concedere il consenso a condividere le credenziali,
- aveva precedentemente concesso il consenso e usato 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 in precedenza aveva concesso il consenso alla condivisione delle credenziali. Si applica solo ai browser non supportati da FedCM. |
user |
Un utente in una sessione esistente che aveva precedentemente concesso il consenso ha premuto il pulsante "Continua come" One Tap per condividere le credenziali. Si applica solo ai browser non supportati da FedCM. |
fedcm |
Un utente ha premuto il pulsante One Tap "Continua come" per condividere le credenziali tramite FedCM. Si applica solo ai browser supportati FedCM. |
fedcm_auto |
Accesso automatico di un utente con una sessione esistente che in precedenza aveva concesso il consenso a condividere le credenziali tramite FedCM One Tap. Si applica solo ai browser supportati FedCM. |
user_1tap |
Un utente con una sessione esistente ha premuto il pulsante "Continua come" 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" One Tap per selezionare un account, quindi 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 di una sessione esistente che in precedenza aveva 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 aveva 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, quindi il pulsante Conferma per dare il consenso e condividere le credenziali. |
state
Questo campo viene definito solo quando l'utente fa clic su un pulsante Accedi con Google per eseguire l'accesso e l'attributo state
del pulsante selezionato viene specificato. Il
valore di questo campo è lo stesso che hai specificato nell'attributo
state
del pulsante.
Poiché sulla stessa pagina è possibile visualizzare più pulsanti Accedi con Google, puoi assegnare a ogni pulsante una stringa univoca. Di conseguenza, puoi utilizzare questo campo state
per
identificare il pulsante su cui l'utente ha fatto clic per accedere.
Metodo: google.accounts.id.renderButton
Il metodo google.accounts.id.renderButton
esegue il rendering di un pulsante Accedi con Google nelle tue pagine web.
Vedi l'esempio di codice seguente del metodo:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Tipo di dati: GsiButtonConfiguration
Nella tabella seguente sono elencati i campi e le descrizioni del tipo di dati GsiButtonConfiguration
:
Attributo | |
---|---|
type |
Tipo di pulsante: icona o pulsante standard. |
theme |
Il tema del pulsante. Ad esempio, riempito_blu o riempito_nero. |
size |
Le dimensioni del pulsante. ad esempio, piccolo o grande. |
text |
Il testo del pulsante. Ad esempio, "Accedi con Google" o "Registrati con Google". |
shape |
La forma del pulsante. Ad esempio, rettangolare o circolare. |
logo_alignment |
Allineamento del logo di Google: a sinistra o al centro. |
width |
La larghezza del pulsante, in pixel. |
locale |
Se impostata, la lingua del pulsante viene visualizzata. |
click_listener |
Se impostata, questa funzione viene richiamata quando si fa clic sul pulsante Accedi con Google. |
state |
Se impostata, questa stringa restituisce il token ID. |
Tipi di attributi
Le seguenti sezioni contengono dettagli sul tipo di attributo e un esempio.
Tipo
Il tipo di pulsante. Il valore predefinito è standard
.
Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Sì | type: "icon" |
La seguente tabella elenca i tipi di pulsanti disponibili e le relative descrizioni:
Tipo | |
---|---|
standard |
|
icon |
tema
Il tema del pulsante. Il valore predefinito è outline
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | theme: "filled_blue" |
Nella tabella seguente sono elencati i temi disponibili e le relative descrizioni:
Tema | |
---|---|
outline |
|
filled_blue |
|
filled_black |
dimensioni
Le dimensioni del pulsante. Il valore predefinito è large
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | size: "small" |
Nella tabella seguente sono elencate le dimensioni dei pulsanti disponibili e le relative descrizioni:
Dimensioni | |
---|---|
large |
|
medium |
|
small |
testo
Il testo del pulsante. Il valore predefinito è signin_with
. Non ci sono differenze visive per il testo dei pulsanti delle icone con attributi text
diversi.
L'unica eccezione è la lettura del testo ai fini dell'accessibilità dello schermo.
Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | text: "signup_with" |
Nella seguente tabella sono elencati tutti i testi dei pulsanti disponibili e le relative descrizioni:
Testo | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
shape
La forma del pulsante. Il valore predefinito è rectangular
. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | shape: "rectangular" |
Nella tabella seguente sono elencate le forme dei pulsanti disponibili e le relative descrizioni:
Shape | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
L'allineamento del logo di Google. Il valore predefinito è left
. Questo attributo
si applica solo al tipo di pulsante standard
. Per saperne di più, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | logo_alignment: "center" |
Nella tabella seguente sono elencati gli allineamenti disponibili e le relative descrizioni:
logo_alignment | |
---|---|
left |
|
center |
larghezza
La larghezza minima del pulsante, in pixel. La larghezza massima è di 400 pixel.
Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | width: "400" |
locale
Campo facoltativo. Mostra il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti mostra come valore predefinito l'Account Google dell'utente o le impostazioni del browser. 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 sono configurate, vengono utilizzate le impostazioni internazionali predefinite del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero visualizzare versioni diverse dei pulsanti localizzati, anche di dimensioni diverse.
Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | locale: "zh_CN" |
click_listener
Puoi definire una funzione JavaScript da chiamare quando viene fatto clic sul pulsante Accedi con Google utilizzando l'attributo click_listener
.
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
In questo esempio, il messaggio Accedi con Google selezionato... viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.
state
Facoltativo, poiché sulla stessa pagina è possibile visualizzare più pulsanti Accedi con Google, puoi assegnare a ogni pulsante una stringa univoca. La stessa stringa verrebbe restituita insieme al token ID, quindi puoi identificare il pulsante su cui l'utente ha fatto clic per accedere.
Per saperne di più, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | data-state="button 1" |
Tipo di dati: credenziale
Quando viene richiamata la funzione native_callback
, viene passato un oggetto Credential
come parametro. Nella tabella seguente sono elencati i campi contenuti nell'oggetto:
Tecnico | |
---|---|
id |
Identifica l'utente. |
password |
La password |
Metodo: google.accounts.id.disableAutoSelect
Quando l'utente esce dal sito web, devi chiamare il metodo
google.accounts.id.disableAutoSelect
per registrare lo stato nei cookie. Ciò
previene un ciclo morto dell'UX. Vedi il seguente snippet di codice del metodo:
google.accounts.id.disableAutoSelect()
Il seguente esempio di codice implementa il metodo google.accounts.id.disableAutoSelect
con una funzione onSignout()
:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Metodo: google.accounts.id.storeCredential
Questo metodo è un wrapper per il metodo store()
dell'API di gestione delle credenziali nativa del browser. Pertanto, può essere utilizzato solo per archiviare una
credenziale per la password. Vedi l'esempio di codice seguente del metodo:
google.accounts.id.storeCredential(Credential, callback)
Il seguente esempio di codice implementa il metodo google.accounts.id.storeCredential
con una funzione onSignIn()
:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Metodo: google.accounts.id.cancel
Puoi annullare il flusso One Tap rimuovendo la richiesta dal DOM dell'utente interessato. L'operazione di annullamento viene ignorata se è già selezionata una credenziale. Vedi il seguente esempio di codice del metodo:
google.accounts.id.cancel()
Il seguente esempio di codice implementa il metodo google.accounts.id.cancel()
con una funzione onNextButtonClicked()
:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Callback caricamento libreria: onGoogleLibraryLoad
Puoi registrare un callback di onGoogleLibraryLoad
. Viene inviata una notifica dopo il caricamento della libreria JavaScript di Accedi con Google:
window.onGoogleLibraryLoad = () => {
...
};
Questo callback è solo una scorciatoia per il callback window.onload
. Non ci sono differenze nel comportamento.
Il seguente esempio di codice implementa un callback onGoogleLibraryLoad
:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Metodo: google.accounts.id.revoke
Il metodo google.accounts.id.revoke
revoca la concessione OAuth utilizzata per condividere il token ID per l'utente specificato. Vedi il seguente snippet di codice del metodo:
javascript
google.accounts.id.revoke(login_hint, callback)
Parametro | Tipo | Descrizione |
---|---|---|
login_hint |
stringa | L'indirizzo email o l'ID univoco dell'Account Google dell'utente. L'ID è la proprietà sub del payload
credential. |
callback |
funzione | Gestore facoltativo RevocationResponse. |
Il seguente esempio di codice mostra come utilizzare il metodo revoke
con un ID.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Tipo di dati: RevocationResponse
Quando la funzione callback
viene richiamata, un oggetto RevocationResponse
viene
passato come parametro. La seguente tabella elenca i campi contenuti nell'oggetto risposta di revoca:
Tecnico | |
---|---|
successful |
Questo campo è il valore restituito della chiamata al metodo. |
error |
Questo campo facoltativamente contiene un messaggio di risposta di errore dettagliato. |
riuscito
Questo campo è un valore booleano impostato su true se la chiamata al metodo di revoca ha avuto esito positivo o false in caso di errore.
errore
Questo campo è un valore stringa e contiene un messaggio di errore dettagliato. Se la chiamata del metodo di revoca non è riuscita, non viene definito se l'operazione ha esito positivo.