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.inizializzazione
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)
L'esempio di codice seguente 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 (ad esempio One Tap, pulsante Personalizzato, revoca e così via) nella stessa pagina web. - Se chiami il metodo
google.accounts.id.initialize
più volte, solo le configurazioni nell'ultima chiamata verranno memorizzate e utilizzate.
Hai effettivamente reimpostato le configurazioni ogni volta che chiami il metodo google.accounts.id.initialize
e tutti i metodi successivi nella stessa pagina web useranno immediatamente le nuove configurazioni.
Tipo di dati: IDConfiguration
Nella tabella seguente sono elencati 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 la modalità UX utilizza 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 della password. |
cancel_on_tap_outside |
Annulla il messaggio se l'utente fa clic al di fuori del messaggio. |
prompt_parent_id |
L'ID DOM dell'elemento contenitore del messaggio 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 relativi sottodomini, passa 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. One Tap verrà eseguito in modalità iframe intermedio se è presente questo campo. |
intermediate_iframe_close_callback |
Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap. |
itp_support |
Consente l'upgrade dell'esperienza utente di One Tap nei 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 seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Sì | client_id: "CLIENT_ID.apps.googleusercontent.com" |
selezione_automatica
Questo campo determina se un token ID viene restituito automaticamente senza interazione da parte dell'utente quando c'è solo una sessione di Google che ha già approvato l'app. Il valore predefinito è false
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | auto_select: true |
callback
Questo campo è la funzione JavaScript che gestisce il token ID restituito dalla richiesta di One Tap o dalla finestra popup. Questo attributo è obbligatorio se Google
One Tap o il pulsante Accedi con Google popup
viene utilizzata la modalità UX.
Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
funzione | Obbligatorio per One Tap e popup modalità UX |
callback: handleResponse |
URI_accesso
Questo attributo è l'URI del tuo endpoint di accesso. Può essere omesso se la pagina corrente è la tua pagina di accesso, nel qual caso le credenziali vengono pubblicate per impostazione predefinita in questa pagina.
La risposta delle 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à reindirizzamento UX.
Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Facoltativo | Esempio |
---|---|---|
URL | Il valore predefinito corrisponde all'URI della pagina corrente o al 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 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 le credenziali della password restituite dal gestore delle credenziali nativo del browser. Consulta la seguente tabella per ulteriori informazioni:
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 disattivarla se imposti il valore su false
. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
boolean | Facoltativo | cancel_on_tap_outside: false |
prompt_parent_id
Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostato, viene visualizzato il messaggio One Tap nell'angolo in alto a destra della finestra. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | prompt_parent_id: 'parent_id' |
nonce
Questo campo è una stringa casuale utilizzata dal token ID per impedire gli attacchi di riproduzione. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | nonce: "biaqbm70g23" |
La lunghezza di Nonce è limitata alle dimensioni massime JWT supportate dal tuo ambiente e dai vincoli alle dimensioni HTTP dei singoli browser e server.
context
Questo campo modifica il testo del titolo e i messaggi nella richiesta One Tap. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | context: "use" |
Nella tabella che segue vengono elencati 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 visualizzare One Tap nel dominio principale e nei relativi sottodomini, passa il dominio principale a questo campo in modo che venga utilizzato un singolo cookie per lo stato condiviso. Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | 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 incide sull'esperienza utente di OneTap. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | ux_mode: "redirect" |
Nella tabella che segue vengono 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 tramite un reindirizzamento completo della pagina. |
origine_principale_consentita
Le origini autorizzate a incorporare l'iframe intermedio. One Tap verrà eseguito in modalità iframe intermedia se questo campo è presente. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
stringa o array di stringhe | Facoltativo | allowed_parent_origin: "https://example.com" |
Nella tabella che segue vengono indicati i tipi di valori supportati e le relative descrizioni.
Tipi di valori | ||
---|---|---|
string |
Un unico 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 relativi sottodomini a tutti i livelli (ad esempio news.example.com
, login.news.example.com
). Tieni presente quanto segue quando si utilizzano 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 intermedia non riesce e viene interrotta.
iframe_close_call_back_
Ignora 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 soltanto in modalità iframe intermedio. E ha impatto solo sull'iframe intermedio, invece che 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_it
Questo campo determina se è necessario attivare l'
One Tap UX sui browser che supportano la Intelligent Tracking Prevention (ITP). Il valore predefinito è false
. Per ulteriori informazioni, consulta la seguente tabella:
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 delle credenziali nativo del browser dopo la chiamata del metodo initialize()
.
Vedi il seguente esempio di codice del metodo:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalmente, il metodo prompt()
viene richiamato al caricamento della pagina. A causa dello stato della sessione e delle impostazioni utente su Google, l'interfaccia utente del prompt di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato dell'interfaccia utente per momenti diversi, passa una funzione per ricevere le notifiche di stato dell'interfaccia utente.
Le notifiche vengono attivate nei seguenti momenti:
- Momento di visualizzazione: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, un annullamento manuale o quando Google non riesce a emettere una credenziale, ad esempio quando la sessione selezionata si è disconnesso 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 saltato:
<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
Nella tabella seguente sono elencati i metodi e le descrizioni del tipo di dati PromptMomentNotification
:
Metodo | |
---|---|
isDisplayMoment() |
Questa notifica è relativa a un momento di visualizzazione? |
isDisplayed() |
Questa notifica è per un momento di visualizzazione e viene visualizzata l'UI? |
isNotDisplayed() |
Questa notifica è per un momento di visualizzazione e l'UI non viene visualizzata? |
getNotDisplayedReason() |
Il motivo dettagliato per cui la UI non viene visualizzata. Di seguito sono riportati i valori possibili:
|
isSkippedMoment() |
Questa notifica è per un momento saltato? |
getSkippedReason() |
Il motivo dettagliato del momento in cui hai saltato l'annuncio. Di seguito sono riportati i valori possibili:
|
isDismissedMoment() |
Questa notifica è per un momento ignorato? |
getDismissedReason() |
Il motivo dettagliato della chiusura. Ecco i valori possibili:
|
getMomentType() |
Restituire una stringa per il tipo di momento. Ecco 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 è il token ID restituito. |
select_by |
Questo campo imposta il modo in cui vengono selezionate le credenziali. |
qualifica
Questo campo è il token ID come stringa JWT (JSON Web Token) con codifica base64.
Se decodificata, 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.
L'utilizzo dei campi email
, email_verified
e hd
consente di determinare se
Google ospita ed è autorevole per 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.email_verified
è impostato su true ehd
è impostato su un account G Suite.
Gli utenti possono creare un Account Google senza utilizzare Gmail o G Suite. Se email
non contiene un suffisso @gmail.com
e hd
è assente, Google non è autorevole e si consigliano metodi di verifica delle password o di altro tipo per verificare l'utente. email_verfied
può essere vero anche quando Google ha verificato l'utente inizialmente quando è stato creato l'Account Google, ma la proprietà dell'account email di terze parti potrebbe essere cambiata da allora.
seleziona_per
Nella tabella seguente sono elencati i possibili valori per il campo select_by
. Il tipo di pulsante utilizzato insieme alla sessione e allo stato del consenso vengono utilizzati 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 oppure l'utente ha selezionato e eseguito l'accesso a un Account Google per stabilire una nuova sessione.
Prima della condivisione delle credenziali del token ID con la tua app, l'utente
- hanno 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 ha precedentemente concesso il consenso a condividere le credenziali. |
user |
Un utente con una sessione esistente che aveva già concesso il consenso ha premuto il pulsante "Tocca 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 "Tocca come" di 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 con una sessione esistente che in precedenza ha dato il proprio 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 ha premuto 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 fatto clic sul 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
permette di visualizzare 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
Nella tabella seguente sono elencati 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: a sinistra o al centro. |
width |
La larghezza del pulsante, espressa in pixel. |
locale |
Se il criterio viene impostato, viene visualizzata la lingua del pulsante. |
click_listener |
Se impostata, questa funzione verrà chiamata quando verrà fatto clic sul pulsante Accedi con Google. |
Tipi di attributi
Le seguenti sezioni contengono i dettagli sul tipo di ogni attributo e un esempio.
digita
Il tipo di pulsante. Il valore predefinito è standard
.
Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Sì | type: "icon" |
Nella tabella che segue vengono elencati i tipi di pulsanti disponibili e le relative descrizioni:
Tipo | |
---|---|
standard |
Un pulsante con testo o informazioni personalizzate:
![]() ![]() |
icon |
Un pulsante a forma di icona senza testo:
![]() |
tema
Il tema del pulsante. Il valore predefinito è outline
. Consulta la seguente tabella per
ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | theme: "filled_blue" |
Nella tabella che segue vengono elencati i temi disponibili e le relative descrizioni:
Tema | |
---|---|
outline |
Un tema di pulsante standard:
![]() ![]() ![]() |
filled_blue |
Un tema del pulsante blu:
![]() ![]() ![]() |
filled_black |
Un tema del pulsante pieno:
![]() ![]() ![]() |
dimensioni
Le dimensioni del pulsante. Il valore predefinito è large
. Consulta la seguente tabella per
ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | size: "small" |
Nella tabella che segue vengono elencate le dimensioni dei pulsanti disponibili e le relative descrizioni:
Dimensioni | |
---|---|
large |
Un pulsante grande:
![]() ![]() ![]() |
medium |
Un pulsante di medie dimensioni:
![]() ![]() |
small |
Un piccolo pulsante:
![]() ![]() |
testo
Il testo del pulsante. Il valore predefinito è signin_with
. Il testo dei pulsanti delle icone con attributi text
diversi non presenta differenze visive.
L'unica eccezione è quando il testo viene letto per l'accessibilità dello schermo.
Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | text: "signup_with" |
Nella tabella che segue vengono 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
. Consulta la seguente tabella per ulteriori informazioni:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | shape: "rectangular" |
Nella tabella che segue vengono elencate le forme dei pulsanti disponibili e le relative descrizioni:
Shape | |
---|---|
rectangular |
Il pulsante di forma rettangolare. Se utilizzato per il tipo di pulsante icon , equivale a square .
![]() ![]() ![]() |
pill |
Il pulsante a forma di pillola. Se utilizzato per il tipo di pulsante icon ,
corrisponde a circle .
![]() ![]() ![]() |
circle |
Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante standard , equivale a pill .
![]() ![]() ![]() |
square |
Il pulsante di forma quadrata. Se utilizzato per il tipo di pulsante standard , equivale a rectangular .
![]() ![]() ![]() |
allineamento_logo
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 |
---|---|---|
string | Facoltativo | logo_alignment: "center" |
Nella tabella che segue vengono elencati gli allineamenti disponibili e le relative descrizioni:
allineamento_logo | |
---|---|
left |
Il logo di Google è allineato a sinistra.
![]() |
center |
Il testo Google è allineato al centro.
![]() |
width
La larghezza minima del pulsante, espressa in pixel. La larghezza massima è di 400 pixel.
Per ulteriori informazioni, consulta la seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | width: 400 |
locale
Le impostazioni internazionali preimpostate del testo del pulsante. 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 seguente tabella:
Tipo | Obbligatorio | Esempio |
---|---|---|
string | Facoltativo | locale: "zh_CN" |
elenco_clic
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 sopra riportato, il messaggio Fai clic sul pulsante Accedi con Google... viene registrato nella console quando viene fatto 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 |
La password |
Metodo: google.accounts.id.disableAutoSelect
Quando l'utente esce dal tuo sito web, devi chiamare il metodo google.accounts.id.disableAutoSelect
per registrare lo stato nei cookie. In questo modo viene impedito un loop UX dell'esperienza utente. Vedi il seguente snippet di codice del metodo:
google.accounts.id.disableAutoSelect()
L'esempio di codice seguente 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 semplice wrapper per il metodo store()
dell'API nativa di gestione delle credenziali del browser. Pertanto, può essere utilizzata solo per memorizzare una credenziale per la password. Vedi il seguente esempio di codice del metodo:
google.accounts.id.storeCredential(Credential, callback)
L'esempio di codice seguente 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 se rimuovi la richiesta dal DOM del fornitore. L'operazione di annullamento viene ignorata se è già selezionata una credenziale. Vedi l'esempio di codice seguente del metodo:
google.accounts.id.cancel()
L'esempio di codice seguente implementa il metodo google.accounts.id.cancel()
con una funzione onNextButtonClicked()
:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
callback di caricamento della libreria: onGoogleLibraryLoad
Puoi registrare un callback di onGoogleLibraryLoad
. Viene avvisato 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 di comportamento.
L'esempio di codice seguente 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 |
string | L'indirizzo email o l'ID univoco dell'Account Google dell'utente. L'ID è la proprietà sub del payload della 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 seguente tabella elenca i campi contenuti nell'oggetto di risposta di revoca:
Campo | |
---|---|
successful |
Questo campo è il valore restituito dalla chiamata al metodo. |
error |
Questo campo contiene facoltativamente un messaggio di risposta di errore dettagliato. |
operazione riuscita
Questo campo è un valore booleano impostato su true se la chiamata al metodo di revoca è riuscita o falso 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 è stata definita correttamente.