Questa pagina di riferimento descrive l'API JavaScript di accesso. Puoi utilizzare questa API per visualizzare la richiesta One Tap o il pulsante Accedi con Google nelle 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 esempio di codice 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 client di Accedi con Google che può essere utilizzata implicitamente da tutti i moduli nella stessa pagina web.
- Devi chiamare il metodo
google.accounts.id.initialize
solo una volta, anche se utilizzi più moduli (come One Tap, pulsante Personalizzato, revoca e così via) nella stessa pagina web. - Se chiami il metodo
google.accounts.id.initialize
più volte, verranno ricordate e utilizzate solo le configurazioni nell'ultima chiamata.
Le configurazioni vengono effettivamente reimpostate ogni volta che si chiama il metodo google.accounts.id.initialize
e tutti i metodi successivi nella stessa pagina web utilizzano le nuove configurazioni immediatamente.
Tipo di dati: IdConfiguration
La seguente tabella elenca i campi e le descrizioni del tipo di dati IdConfiguration
:
Campo | |
---|---|
client_id |
ID client della tua applicazione |
auto_select |
Consente di attivare la selezione automatica. |
callback |
La funzione JavaScript che gestisce i token ID. Google One Tap e il pulsante Accedi con Google popup in modalità UX utilizzano questo attributo. |
login_uri |
L'URL del tuo endpoint di accesso. Il pulsante Accedi con Google
redirect modalità UX utilizza questo attributo. |
native_callback |
La funzione JavaScript che gestisce le credenziali delle password. |
cancel_on_tap_outside |
Annulla la richiesta se l'utente fa clic al di fuori 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 nella richiesta One Tap |
state_cookie_domain |
Se devi chiamare One Tap nel dominio principale e nei suoi sottodomini, passa il dominio principale a questo campo in modo da utilizzare un singolo cookie condiviso. |
ux_mode |
Flusso UX del pulsante Accedi con Google |
allowed_parent_origin |
Le origini autorizzate a incorporare l'iframe intermedio. One Tap verrà eseguito in modalità iframe intermedio se questo campo presenta: |
intermediate_iframe_close_callback |
Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap. |
itp_support |
Abilita l'esperienza utente One Tap UX aggiornata sui browser ITP. |
client_id
Questo campo è l'ID client della tua applicazione, che viene trovato e creato in Google Developers Console. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Sì | client_id: "CLIENT_ID.apps.googleusercontent.com" |
selezione_automatica
Questo campo determina se viene restituito automaticamente un token ID senza interazione da parte dell'utente quando c'è solo una sessione Google che ha approvato la tua app in precedenza. Il valore predefinito è false
. Per ulteriori informazioni, consulta la tabella seguente:
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 di Google Tap o del pulsante Accedi con Google.popup
Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Obbligatorio per One Tap e modalità popup UX |
callback: handleResponse |
URI_di_accesso
Questo attributo è l'URI del tuo endpoint di accesso.
Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0 configurato nella console API e deve essere conforme alle regole di convalida dell'URI di reindirizzamento.
Questo attributo può essere omesso se la pagina corrente è la tua pagina di accesso, nel qual caso la credenziale è pubblicata in questa pagina per impostazione predefinita.
La risposta relativa 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 ulteriori informazioni, 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 di token ID nel corpo.
Di seguito è riportato un esempio di richiesta all'endpoint di accesso:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
nativo_callback
Questo campo è il nome della funzione JavaScript che gestisce la credenziale della password restituita dal gestore credenziali nativo del browser. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Facoltativo | native_callback: handleResponse |
annulla_on_tap_outside
Questo campo indica 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 ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | cancel_on_tap_outside: false |
ID_genitore_richiesta
Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostata, viene visualizzato il messaggio One Tap nell'angolo in alto a destra della finestra. Per ulteriori informazioni, 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 gli attacchi di ripetizione. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | nonce: "biaqbm70g23" |
La lunghezza di nonce è limitata alla dimensione massima JWT supportata dal tuo ambiente e ai vincoli di dimensione HTTP per browser e server individuali.
context
Questo campo modifica il testo del titolo e dei messaggi nella richiesta One Tap. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | context: "use" |
La tabella riportata di seguito elenca i contesti disponibili e le relative descrizioni:
Contesto | |
---|---|
signin |
"Accedi con Google" |
signup |
"Registrati con Google" |
use |
"Utilizza con Google" |
dominio_cookie_stato
Se devi mostrare One Tap nel dominio principale e nei relativi sottodomini, passa il dominio principale a questo campo in modo da utilizzare un singolo cookie per lo stato condiviso. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | state_cookie_domain: "example.com" |
modalità_ux
Utilizza 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 OneTap. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | ux_mode: "redirect" |
Nella tabella che segue 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 un flusso UX di accesso tramite un reindirizzamento a pagina intera. |
origine_genitore_consentita
Le origini autorizzate a incorporare l'iframe intermedio. One Tap verrà eseguito in modalità iframe intermedio se questo campo presenta. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa o array di stringhe | Facoltativo | allowed_parent_origin: "https://example.com" |
La seguente tabella 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 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"
corrisponderà a example.com
e ai suoi sottodomini a tutti i livelli (ad es.news.example.com
, login.news.example.com
). Tieni presente quanto segue 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. Come indicato sopra,"https://*.example.com"
corrisponderà aexample.com
e ai relativi sottodomini. Puoi anche utilizzare un array per rappresentare due domini diversi. Ad esempio,["https://example1.com", "https://*.example2.com"]
corrisponderà ai dominiexample1.com
,example2.com
e sottodomini diexample2.com
- I domini con caratteri jolly devono iniziare con uno schema https:// sicuro.
"*.example.com"
verrà considerato non valido.
Se il valore del campo allowed_parent_origin
non è valido, l'inizializzazione di One Tap della modalità iframe intermedio non riuscirà e verrà interrotta.
rich_close_call_callback
Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap toccando il pulsante 'X' nell'interfaccia utente One Tap. Il comportamento predefinito è quello di rimuovere immediatamente l'iframe intermedio dal DOM.
Il campo intermediate_iframe_close_callback
viene applicato solo in modalità iframe intermedio. Ha un 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 |
supporto_itp
Questo campo determina se è necessario abilitare l'
esperienza utente One Tap UX sui browser che supportano la Prevenzione del monitoraggio intelligente (ITP). Il valore predefinito è
false
. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | itp_support: true |
Metodo: google.accounts.id.prompt
Il metodo google.accounts.id.prompt
mostra la richiesta One Tap o il gestore di credenziali nativo del browser dopo aver richiamato il metodo initialize()
.
Vedi il seguente esempio di codice del metodo:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalmente, il metodo prompt()
viene chiamato al caricamento della pagina. A causa dello stato della sessione e delle impostazioni utente sul lato Google, l'interfaccia utente del prompt di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato della UI per diversi momenti, passa una funzione per ricevere notifiche di stato nella UI.
Le notifiche vengono attivate nei seguenti momenti:
- Momento di visualizzazione:questo si verifica dopo la chiamata al metodo
prompt()
. La notifica contiene un valore booleano che indica se l'interfaccia utente viene visualizzata o meno. Momento ignorato: questo si verifica quando la richiesta One Tap viene chiusa da un annullamento automatico, un annullamento manuale o quando Google non emette una credenziale, ad esempio quando la sessione selezionata si è disconnessa da Google.
In questi casi, ti consigliamo di continuare con i prossimi provider di identità, se disponibili.
Momento ignorato: si verifica quando Google recupera correttamente una credenziale o un utente vuole interrompere il flusso di recupero delle credenziali. Ad esempio, quando l'utente inizia a inserire il proprio nome utente e la 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 ignorato.
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 i metodi e le descrizioni del tipo di dati PromptMomentNotification
:
Metodo | |
---|---|
isDisplayMoment() |
Questa notifica è relativa a un momento di visualizzazione? |
isDisplayed() |
Questa notifica è relativa a un momento di visualizzazione e viene mostrata l'UI? |
isNotDisplayed() |
Questa notifica è relativa a un momento di visualizzazione e la UI non viene visualizzata? |
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 è per un momento ignorato? |
getDismissedReason() |
Il motivo dettagliato del rifiuto. Di seguito sono riportati i valori possibili:
|
getMomentType() |
Restituire una stringa per il tipo di momento. Di seguito sono riportati i valori possibili:
|
Tipo di dati: CredentialResponse
Quando viene richiamata la funzione callback
, un oggetto CredentialResponse
viene passato come parametro. La seguente tabella elenca i campi contenuti nell'oggetto di risposta delle credenziali:
Campo | |
---|---|
credential |
Questo campo corrisponde al token ID restituito. |
select_by |
Questo campo imposta la modalità di selezione delle credenziali. |
la credenziale
Questo campo è il token ID come stringa JSON (Token Web Token) con codifica base64.
Quando decodificato, il JWT ha il 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
contiene un identificatore univoco globale per l'Account Google.
Se utilizzi i campi email
, email_verified
e hd
, puoi stabilire se Google ospita ed è autorevole di un indirizzo email. Nei casi in cui Google sia autorevole, l'utente è attualmente noto come proprietario legittimo dell'account.
Casi in cui Google è autorevole:
email
ha un suffisso@gmail.com
, questo è un account Gmail.- Il valore
email_verified
è vero ehd
è impostato. Si tratta di un account Google Workspace.
Gli utenti possono creare Account Google senza utilizzare Gmail o Google Workspace. Se email
non contiene un suffisso @gmail.com
e hd
è assente Google non è autorevole e si consigliano altri metodi di verifica della password o della verifica per verificare l'utente. email_verfied
può essere valido anche quando Google ha verificato inizialmente l'utente quando è stato creato l'Account Google, tuttavia la proprietà dell'account email di terze parti potrebbe essere cambiata da allora.
Il campo exp
mostra la scadenza per verificare il token lato server.
Il token ID ottenuto da Accedi con Google è 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 è stato disconnesso. La tua app è responsabile della
gestione delle sessioni degli utenti.
seleziona_per
La tabella seguente elenca i possibili valori per il campo select_by
. Il tipo di pulsante utilizzato insieme alla sessione e allo stato 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 touchless.
È stata rilevata una sessione esistente oppure 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
- Premi 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 in precedenza ha concesso il consenso per la condivisione delle credenziali. |
user |
Un utente con una sessione esistente che aveva già concesso il consenso ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali. |
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 One Tap "Continua come" 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 con una sessione esistente che in precedenza ha concesso il consenso ha premuto il pulsante Accedi con Google e 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 ha premuto il pulsante Conferma per concedere il consenso e condividere le credenziali. |
btn_add_session |
Un utente senza una sessione esistente che in precedenza ha 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 ha premuto il pulsante Conferma per acconsentire e condividere le credenziali. |
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 il seguente esempio di codice del metodo:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Tipo di dati: GsiButtonConfiguration
La tabella seguente elenca i campi e le descrizioni del tipo di dati GsiButtonConfiguration
:
Attributo | |
---|---|
type |
Il tipo di pulsante: icona o pulsante standard. |
theme |
Il tema del pulsante. Ad esempio, riempimento_blu o riempimento_nero. |
size |
Le dimensioni del pulsante. Ad esempio, piccolo o grande. |
text |
Il testo del pulsante. Ad esempio, "Accedi con Google" o "Accedi con Google". |
shape |
La forma del pulsante. Ad esempio rettangolare o circolare. |
logo_alignment |
Allineamento del logo di Google: sinistra o centro. |
width |
La larghezza del pulsante, in pixel. |
locale |
Se impostato, la lingua del pulsante viene mostrata. |
click_listener |
Se impostata, questa funzione verrà richiamata quando fai clic sul pulsante Accedi con Google. |
Tipi di attributi
Le seguenti sezioni contengono dettagli sul tipo di ogni attributo e un esempio.
digita
Il tipo di pulsante. Il valore predefinito è standard
.
Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Sì | type: "icon" |
Nella tabella che segue sono elencati i tipi di pulsanti disponibili e le relative descrizioni:
Tipo | |
---|---|
standard |
Un pulsante con testo o informazioni personalizzate:
![]() ![]() |
icon |
Un pulsante icona senza testo:
![]() |
tema
Il tema del pulsante. Il valore predefinito è outline
. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | theme: "filled_blue" |
Nella tabella che segue sono elencati i temi disponibili e le relative descrizioni:
Tema | |
---|---|
outline |
Tema standard dei pulsanti:
![]() ![]() ![]() |
filled_blue |
Il tema del pulsante pieno di blu:
![]() ![]() ![]() |
filled_black |
Tema con pulsante pieno di nero:
![]() ![]() ![]() |
dimensioni
Le dimensioni del pulsante. Il valore predefinito è large
. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | size: "small" |
Nella tabella che segue sono elencate le dimensioni dei pulsanti disponibili e le relative descrizioni:
Dimensioni | |
---|---|
large |
Pulsante grande:
![]() ![]() ![]() |
medium |
Un pulsante di medie dimensioni:
![]() ![]() |
small |
Un piccolo pulsante:
![]() ![]() |
testo
Il testo del pulsante. Il valore predefinito è signin_with
. Non esistono differenze visive per il testo dei pulsanti delle icone con attributi 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 | text: "signup_with" |
Nella tabella che segue sono elencati i testi dei pulsanti disponibili e le relative descrizioni:
Testo | |
---|---|
signin_with |
Il testo del pulsante è "Accedi con Google":
![]() ![]() |
signup_with |
Il testo del pulsante è "Accedi con Google":
![]() ![]() |
continue_with |
Il testo del pulsante è "Continua con Google":
![]() ![]() |
signin |
Il testo del pulsante è "Accedi":
![]() ![]() |
shape
La forma del pulsante. Il valore predefinito è rectangular
. Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | shape: "rectangular" |
Nella tabella che segue sono elencate le forme dei pulsanti disponibili e le relative descrizioni:
Shape | |
---|---|
rectangular |
Il pulsante rettangolare. Se utilizzato per il tipo di pulsante icon , corrisponde a square .
![]() ![]() ![]() |
pill |
Pulsante a forma di pillola. Se utilizzato per il tipo di pulsante icon ,
equivale a circle .
![]() ![]() ![]() |
circle |
Il pulsante a forma di cerchio. Se viene utilizzato per il tipo di pulsante standard , equivale a pill .
![]() ![]() ![]() |
square |
Il pulsante quadrato. Se viene utilizzato per il tipo di pulsante standard , equivale a rectangular .
![]() ![]() ![]() |
allineamento_logo
L'allineamento del logo di 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 | logo_alignment: "center" |
Nella tabella che segue sono elencati gli allineamenti disponibili e le relative descrizioni:
allineamento_logo | |
---|---|
left |
Allinea il logo di Google a sinistra.
![]() |
center |
Allinea il centro al logo di Google.
![]() |
width
La larghezza minima del pulsante, in pixel. La larghezza massima è di 400 pixel.
Per ulteriori informazioni, consulta la tabella seguente:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa | Facoltativo | width: 400 |
locale
Campo facoltativo. Mostra il testo del pulsante nelle impostazioni internazionali specificate, altrimenti usa le impostazioni del browser o dell'Account Google dell'utente per impostazione predefinita. 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 è impostato, vengono utilizzate le impostazioni internazionali predefinite del browser o le preferenze dell'utente della sessione Google. Pertanto, utenti diversi potrebbero vedere versioni diverse dei pulsanti localizzati e possibilmente con dimensioni diverse.
Per ulteriori informazioni, 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...") }
Nell'esempio precedente, il messaggio Accedi con Google... viene eseguito nella console quando l'utente fa clic sul pulsante Accedi con Google.
Tipo di dati: credenziale
Quando viene richiamata la funzione native_callback
, un oggetto Credential
viene passato come parametro. La seguente tabella elenca i campi contenuti nell'oggetto:
Campo | |
---|---|
id |
Identifica l'utente. |
password |
Password |
Metodo: google.accounts.id.disableAutoSelect
Quando l'utente si disconnette, devi chiamare il metodo
google.accounts.id.disableAutoSelect
per registrare lo stato nei cookie. In questo modo si evita un loop di inattività 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 è un semplice wrapper per il metodo store()
dell'API nativa di gestione delle credenziali del browser. Pertanto, può essere utilizzata solo per archiviare una credenziale di password. Vedi il seguente esempio di codice 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 di One Tap se rimuovi la richiesta dal DOM del fornitore. 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 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:
google.accounts.id.revoke(hint, callback)
Parametro | Tipo | Descrizione |
---|---|---|
hint |
stringa | L'indirizzo email o l'ID univoco dell'Account Google dell'utente. L'ID è la proprietà sub del payload del credenziale. |
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 viene richiamata la funzione callback
, un oggetto RevocationResponse
viene passato come parametro. La tabella seguente elenca i campi contenuti nell'oggetto risposta di revoca:
Campo | |
---|---|
successful |
Questo campo indica il valore restituito della chiamata metodo. |
error |
Questo campo contiene facoltativamente un messaggio di risposta di errore dettagliato. |
riuscita
Questo campo è un valore booleano impostato su true se la chiamata al metodo di revoca è riuscita o su false in caso di errore.
errore
Questo campo è un valore stringa e contiene un messaggio di errore dettagliato se la chiamata al metodo di revoca non è andata a buon fine, non è definita correttamente.