Riferimento Accedi con Google JavaScript API

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.

Avviso: il metodo google.accounts.id.initialize deve essere chiamato una sola volta, anche se utilizzi sia il tocco singolo che il pulsante nella stessa pagina web.

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

Nota: con l'API JavaScript, la risposta di Google One Tap e il pulsante Accedi con Google popup possono essere restituiti solo alla funzione JavaScript callback. Prova l'API HTML se la risposta deve essere inviata automaticamente a login_uri.

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 e https://*.co.uk non sono validi. Come indicato sopra, "https://*.example.com" corrisponderà a example.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 domini example1.com, example2.com e sottodomini di example2.com
• I domini con caratteri jolly devono iniziare con uno schema https:// sicuro. "*.example.com" verrà considerato non valido.

Nota: a differenza dell'API HTML, una stringa con URI separati da virgole non è valida per il campo allowed_parent_origin. Utilizza un oggetto array JavaScript.

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.

  Avviso: quando ti trovi in un momento ignorato, non provare i prossimi provider di identità.

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>

Nota: non riceverai notifiche per i momenti visualizzati, ignorati o ignorati dell'interfaccia utente del gestore delle credenziali nativo. Non ne abbiamo alcun controllo.

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: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason
isSkippedMoment()	Questa notifica è per un momento saltato?
getSkippedReason()	Il motivo dettagliato del momento saltato. Di seguito sono riportati i valori possibili: auto_cancel user_cancel tap_outside issuing_failed
isDismissedMoment()	Questa notifica è per un momento ignorato?
getDismissedReason()	Il motivo dettagliato del rifiuto. Di seguito sono riportati i valori possibili: credential_returned cancel_called flow_restarted
getMomentType()	Restituire una stringa per il tipo di momento. Di seguito sono riportati i valori possibili: display skipped dismissed

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": "[e-mail]", // 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 e hd è 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);
  });

Punto chiave: la chiamata a questo metodo revoca tutti gli ambiti OAuth2 precedentemente concessi dalla libreria client di Accedi con Google.

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.