Riferimento per l'API JavaScript Accedi con Google

Questa pagina di riferimento descrive l'API JavaScript per l'accesso. Puoi utilizzare questa API per visualizzare il prompt 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 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 ricordate e utilizzate solo le configurazioni dell'ultima chiamata.

In realtà, 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

La tabella seguente elenca i campi e le descrizioni del tipo di dati IdConfiguration:

Campo
client_id L'ID client della tua applicazione
auto_select Attiva la selezione automatica.
callback La funzione JavaScript che gestisce i token ID. One Tap di Google e il pulsante Accedi con Google in modalità UX popup utilizzano questo attributo.
login_uri L'URL dell'endpoint di accesso. Il pulsante Accedi con Google La modalità UX redirect 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 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 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 dell'esperienza utente del pulsante Accedi con Google
allowed_parent_origin Le origini autorizzate a incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedio se questo campo è presente.
intermediate_iframe_close_callback Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap.
itp_support Consente di eseguire l'upgrade dell'esperienza utente One Tap sui browser ITP.
login_hint Salta la selezione dell'account fornendo un suggerimento per l'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.
use_fedcm_for_button Questo campo determina se l'esperienza utente del pulsante FedCM deve essere utilizzata su Chrome (desktop M125+ e Android M128+). Il valore predefinito è false.
button_auto_select Se attivare l'opzione Selezione automatica per il flusso del pulsante FedCM. Se abilitata, gli utenti di ritorno con una sessione Google attiva eseguiranno l'accesso automaticamente, bypassando la richiesta di selezione dell'account.Il valore predefinito è false.

client_id

Questo campo è l'ID client della tua applicazione, che viene trovato e creato nella console Google Cloud. Per ulteriori informazioni, 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 è presente una sola sessione Google che ha approvato la tua app in precedenza. Il valore predefinito è false. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
booleano 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 One Tap o del pulsante Accedi con Google popup. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
funzione Obbligatorio per One Tap e la modalità UX 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 le credenziali vengono pubblicate in questa pagina per impostazione predefinita.

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à UX di reindirizzamento.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Facoltativo Esempio
URL Per impostazione predefinita, l'URI della pagina corrente o il valore specificato.
Utilizzato solo quando ux_mode: "redirect" è impostato.		 login_uri: "https://www.example.com/login"

Il tuo endpoint di accesso deve gestire le richieste POST contenenti un parametro credential con un valore del token ID nel corpo.

native_callback

Questo campo è il nome della funzione JavaScript che gestisce la credenziale della password restituita dal gestore delle credenziali integrato del browser. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
funzione Facoltativo native_callback: handleResponse

cancel_on_tap_outside

Questo campo imposta se annullare o meno la richiesta One Tap se un utente fa clic al di fuori del prompt. Il valore predefinito è true. Puoi disabilitarlo se imposti il valore su false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo cancel_on_tap_outside: false

prompt_parent_id

Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostato, il prompt One Tap viene visualizzato nell'angolo in alto a destra della finestra. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo prompt_parent_id: 'parent_id'

nonce

Questo campo è una stringa casuale utilizzata dal token ID per impedire attacchi di replay. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo nonce: "biaqbm70g23"

La lunghezza del nonce è limitata alla dimensione massima del JWT supportata dal tuo ambiente, e ai vincoli di dimensione HTTP di singoli browser e server.

context

Questo campo modifica il testo del titolo e dei messaggi visualizzati nel prompt One Tap, senza alcun effetto per i browser ITP. Il valore predefinito è signin.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo context: "use"

La tabella seguente elenca tutti i contesti disponibili e le relative descrizioni:

Contesto
signin "Accedi a"
signup "Iscriviti a"
use "Usa"

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 con stato condiviso. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo state_cookie_domain: "example.com"

ux_mode

Utilizza questo campo per impostare il flusso dell'esperienza utente utilizzato dal pulsante Accedi con Google. Il valore predefinito è popup. Questo attributo non ha alcun impatto sull'esperienza utente One Tap. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo ux_mode: "redirect"

La tabella seguente elenca le modalità UX disponibili e le relative descrizioni.

Modalità UX
popup Esegue il flusso UX di accesso in una finestra popup.
redirect Esegue il flusso UX di accesso tramite un reindirizzamento a pagina intera.

allowed_parent_origin

Le origini autorizzate a incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedia se questo campo è presente. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
stringa o array di stringhe Facoltativo allowed_parent_origin: "https://example.com"

La tabella seguente elenca i tipi di valori supportati e le relative descrizioni.

Tipi di valori
string Un URI di un singolo dominio. "https://example.com"
string array Un 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 utilizzi 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 perché "https://.example.com" corrisponde a example.com e a tutti i relativi sottodomini. Utilizza un elenco separato da virgole per rappresentare due domini diversi. Ad esempio, "https://example1.com,https://.example2.com" corrisponde ai domini example1.com, example2.com e ai sottodomini di example2.com
  • I domini con caratteri jolly devono iniziare con uno schema https:// sicuro, quindi "*.example.com" è considerato non valido.

Se il valore del campo allowed_parent_origin non è valido, l'inizializzazione di One Tap della modalità iframe intermedia non andrà a buon fine e si interromperà.

intermediate_iframe_close_callback

Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap toccando il pulsante "X" nell'interfaccia utente di One Tap. Il comportamento predefinito prevede la rimozione immediata dell'iframe intermedio dal DOM.

Il campo intermediate_iframe_close_callback ha effetto solo in modalità iframe intermedio. e ha un impatto solo sull'iframe intermedio, anziché sull'iframe di One Tap. L'interfaccia utente One Tap viene rimossa prima che venga richiamata la 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 attivata sui browser che supportano la prevenzione del tracciamento intelligente (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
booleano Facoltativo itp_support: true

login_hint

Se la tua applicazione sa in anticipo quale utente deve accedere, può fornire un suggerimento per l'accesso a Google. In caso di esito positivo, la selezione dell'account viene ignorata. I valori accettati sono: un indirizzo email o un valore del campo sub del token ID.

Per maggiori 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 di un token ID. Facoltativo login_hint: 'elisa.beckett@gmail.com'

hd

Quando un utente ha più account e deve accedere solo con il proprio account Workspace, utilizza questo campo per fornire un suggerimento per il nome di dominio a Google. In caso di esito positivo, gli account utente visualizzati durante la selezione dell'account sono limitati al dominio fornito. Un valore jolly: * offre all'utente solo account Workspace ed esclude gli account consumer (user@gmail.com) durante la selezione dell'account.

Per saperne di più, consulta 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 i prompt di accesso degli utenti e di mediare il flusso di accesso tra il tuo sito web e Google. Il valore predefinito è false. Per saperne di più, consulta la pagina Eseguire la migrazione a FedCM.

Tipo Obbligatorio Esempio
booleano Facoltativo use_fedcm_for_prompt: true

use_fedcm_for_button

Questo campo determina se l'esperienza utente del pulsante FedCM deve essere utilizzata su Chrome (M125+ per computer e M128+ per Android). Il valore predefinito è false. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
booleano Facoltativo use_fedcm_for_button: true

button_auto_select

Questo campo determina se attivare l'opzione Selezione automatica per il flusso del pulsante FedCM. Se attivata, gli utenti di ritorno con una sessione Google attiva accederanno automaticamente, ignorando la richiesta di selezione dell'account. Il valore predefinito è false. Devi attivare esplicitamente l'accesso automatico con il pulsante durante l'avvio dell'attivazione. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
booleano Facoltativo button_auto_select: true

Metodo: google.accounts.id.prompt

Il metodo google.accounts.id.prompt mostra la richiesta One Tap o il gestore delle credenziali integrato nel browser dopo l'invocazione del metodo initialize(). Vedi il seguente esempio di codice del metodo:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

In genere, 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 One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato della UI in momenti diversi, passa una funzione per ricevere notifiche sullo stato della UI.

Le notifiche vengono inviate nei seguenti momenti:

  • Momento di visualizzazione:si verifica dopo la chiamata del metodo prompt(). La notifica contiene un valore booleano per indicare se l'interfaccia utente viene visualizzata o meno.

  • Momento ignorato: si verifica quando la richiesta di accesso con un tocco viene chiusa da un annullamento automatico, da un annullamento manuale o quando Google non riesce a emettere 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 presenti.

  • 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 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 di chiusura.

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

La tabella seguente elenca i metodi e le descrizioni del tipo di dati PromptMomentNotification:

Metodo
isDisplayMoment() Questa notifica riguarda un momento di visualizzazione?

Nota: quando FedCM è attivato, questa notifica non viene attivata. Per saperne di più, consulta la pagina Eseguire la migrazione a FedCM.
isDisplayed() Questa notifica riguarda un momento di visualizzazione e l'interfaccia utente viene visualizzata?

Nota: quando FedCM è attivato, questa notifica non viene attivata. Per saperne di più, consulta la pagina Eseguire la migrazione a FedCM.
isNotDisplayed() Questa notifica riguarda un momento di visualizzazione e l'interfaccia utente non viene visualizzata?

Nota: quando FedCM è attivato, questa notifica non viene attivata. Per saperne di più, 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:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
Nota: quando FedCM è attivato, questo metodo non è supportato. Per saperne di più, consulta la pagina Eseguire la migrazione a FedCM.
isSkippedMoment() Questa notifica riguarda 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
Nota: quando FedCM è attivato, questo metodo non è supportato. Per saperne di più, consulta la pagina Eseguire la migrazione a FedCM.
isDismissedMoment() Questa notifica riguarda un momento ignorato?
getDismissedReason()

Il motivo dettagliato del rifiuto. Di seguito sono riportati i valori possibili:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Restituisce 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, viene passato come parametro un oggetto CredentialResponse. La tabella seguente elenca i campi contenuti nell'oggetto di risposta delle credenziali:

Campo
credential Il token ID JWT codificato emesso da Google.
select_by Modalità di accesso dell'utente.
state Questo campo viene definito solo quando l'utente fa clic su un pulsante Accedi con Google per accedere e viene specificato l'attributo state del pulsante.

credenziale

Questo campo è il token ID come stringa JWT (JSON Web Token) codificata con Base64.

Quando viene 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 dell'Account Google. Utilizza sub come identificatore dell'utente, in quanto è univoco per tutti gli Account Google e non viene mai riutilizzato.

Utilizzando i campi email, email_verified e hd puoi determinare se Google ospita un indirizzo email ed è autorevole per questo. Nei casi in cui Google è autorevole, viene confermato che l'utente è il proprietario legittimo dell'account.

Casi in cui Google è autorevole:

  • email ha un suffisso @gmail.com, si tratta di un account Gmail.
  • email_verified è true e hd è impostato, si tratta di un account Google Workspace.

Gli utenti possono registrarsi per gli Account Google senza utilizzare Gmail o Google Workspace. Quando email non contiene un suffisso @gmail.com e hd è assente, Google non è autorevole e per verificare l'utente sono consigliati la password o altri metodi di verifica. email_verfied può essere vera anche perché Google ha inizialmente verificato l'utente al momento della creazione dell'Account Google, ma la proprietà dell'account email di terze parti potrebbe essere cambiata nel frattempo.

Il campo exp mostra il tempo di scadenza per la verifica del token sul lato server. È di un'ora per il token ID ottenuto da Accedi con Google. Devi verificare il token prima della scadenza. Non utilizzare exp per la gestione delle sessioni. Un token ID scaduto non significa che l'utente è disconnesso. La tua app è responsabile della gestione delle sessioni dei tuoi utenti.

select_by

La seguente tabella elenca i possibili valori per il campo select_by. Il tipo di pulsante utilizzato insieme allo stato della sessione e del consenso viene utilizzato per impostare il valore.

  • L'utente ha premuto il pulsante One Tap o Accedi con Google oppure ha utilizzato la procedura di accesso automatico senza contatto.

  • È stata trovata una sessione esistente oppure l'utente ha selezionato e ha eseguito l'accesso a un Account Google per stabilire una nuova sessione.

  • Prima di condividere le credenziali del token ID con la tua app, l'utente

    • ha premuto il pulsante Conferma per concedere il consenso alla condivisione delle credenziali, oppure
    • aveva precedentemente concesso il consenso e utilizzato Seleziona un account per scegliere un Account Google.

Il valore di questo campo è impostato su uno di questi tipi:

Valore Descrizione
auto Accesso automatico di un utente con una sessione esistente che aveva precedentemente concesso il consenso a condividere le credenziali. Si applica solo ai browser non supportati da FedCM.
user Un utente con una sessione esistente che aveva precedentemente concesso il consenso ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali. Si applica solo ai browser non supportati da FedCM.
fedcm Un utente ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali utilizzando FedCM. Si applica solo ai browser supportati da FedCM.
fedcm_auto Accesso automatico di un utente con una sessione esistente che aveva precedentemente concesso il consenso a condividere le credenziali utilizzando FedCM One Tap. Si applica solo ai browser supportati da FedCM.
user_1tap Un utente con una sessione esistente ha premuto il pulsante "Continua come" di One Tap per concedere il consenso e condividere le credenziali. Si applica solo a Chrome v75 e versioni successive.
user_2tap Un utente senza una sessione esistente ha premuto il pulsante "Continua come" di One Tap per selezionare un account e poi ha premuto il pulsante Conferma in una finestra popup per concedere il consenso e condividere le credenziali. Si applica ai browser non basati su Chromium.
itp Un utente con una sessione esistente che aveva precedentemente concesso il consenso ha premuto One Tap sui browser ITP.
itp_confirm Un utente con una sessione esistente ha premuto One Tap sui browser ITP e ha premuto il pulsante Conferma per concedere il consenso e condividere le credenziali.
itp_add_session Un utente senza una sessione esistente che ha precedentemente concesso il consenso ha premuto One Tap sui browser ITP per selezionare un Account Google e condividere le credenziali.
itp_confirm_add_session Un utente senza una sessione esistente ha prima premuto One Tap sui browser ITP per selezionare un Account Google e poi ha premuto il pulsante Conferma per dare il consenso e condividere le credenziali.
btn Un utente con una sessione esistente che ha precedentemente concesso il consenso ha premuto il pulsante Accedi con Google e ha selezionato un Account Google da "Scegli un account" per condividere le credenziali.
btn_confirm Un utente con una sessione esistente ha premuto il pulsante Accedi con Google e il pulsante Conferma per concedere il consenso e condividere le credenziali.
btn_add_session Un utente senza una sessione esistente che ha precedentemente concesso il consenso ha premuto il pulsante Accedi con Google per selezionare un Account Google e condividere le credenziali.
btn_confirm_add_session Un utente senza una sessione esistente ha prima premuto il pulsante Accedi con Google per selezionare un Account Google e poi ha premuto il pulsante Conferma per dare il consenso e condividere le credenziali.

stato

Questo campo viene definito solo quando l'utente fa clic su un pulsante Accedi con Google per accedere e viene specificato l'attributo state del pulsante su cui è stato fatto clic. Il valore di questo campo è lo stesso specificato nell'attributo state del pulsante.

Poiché è possibile eseguire il rendering di più pulsanti Accedi con Google nella stessa pagina, puoi assegnare a ogni pulsante una stringa univoca. Pertanto, puoi utilizzare questo 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 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, filled_blue o filled_black.
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 Google: a sinistra o al centro.
width La larghezza del pulsante, in pixel.
locale Se impostata, viene visualizzata la lingua del pulsante.
click_listener Se impostata, questa funzione viene chiamata quando viene fatto clic sul pulsante Accedi con Google.
state Se impostata, questa stringa viene restituita con il token ID.

Tipi di attributi

Le sezioni seguenti contengono dettagli sul tipo di ciascun attributo e un esempio.

tipo

Il tipo di pulsante. Il valore predefinito è standard.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Sì type: "icon"

La tabella seguente elenca i tipi di pulsanti disponibili e le relative descrizioni:

Tipo
standard
Pulsante con testo o informazioni personalizzate.
icon
Un pulsante icona senza testo.

tema

Il tema del pulsante. Il valore predefinito è outline. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
stringa Facoltativo theme: "filled_blue"

La tabella seguente elenca i temi disponibili e le relative descrizioni:

Tema
outline
Un tema standard per i pulsanti.
filled_blue
Un tema con pulsanti blu.
filled_black
Un tema con pulsanti neri.

dimensioni

Le dimensioni del pulsante. Il valore predefinito è large. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
stringa Facoltativo size: "small"

La tabella seguente elenca le dimensioni dei pulsanti disponibili e le relative descrizioni:

Dimensioni
large
Un pulsante standard grande Un pulsante con un&#39;icona grande Un pulsante grande e personalizzato
Un pulsante grande.
medium
Un pulsante standard medio Un pulsante con icona media
Un pulsante di medie dimensioni.
small
Un piccolo pulsante di accesso Un piccolo pulsante di accesso
Un piccolo pulsante.

testo

Il testo del pulsante. Il valore predefinito è signin_with. Non ci sono differenze visive per il testo dei pulsanti con icone che hanno 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"

La tabella seguente elenca tutti 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 è "Registrati con Google".
continue_with
Il testo del pulsante è "Continua con Google".
signin
Il testo del pulsante è "Accedi".

forma

La forma del pulsante. Il valore predefinito è rectangular. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo shape: "rectangular"

La tabella seguente elenca le forme dei pulsanti disponibili e le relative descrizioni:

Forma
rectangular
Il pulsante di forma rettangolare. Se utilizzato per il tipo di pulsante icon, è uguale a square.
pill
Il pulsante a forma di pillola. Se utilizzato per il tipo di pulsante icon, è uguale a circle.
circle
Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante standard, è uguale a pill.
square
Il pulsante a forma quadrata. Se utilizzato per il tipo di pulsante standard, è uguale a rectangular.

logo_alignment

L'allineamento del logo Google. Il valore predefinito è left. Questo attributo si applica solo al tipo di pulsante standard. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
stringa Facoltativo logo_alignment: "center"

La tabella seguente elenca gli allineamenti disponibili e le relative descrizioni:

logo_alignment
left
Allinea a sinistra il logo Google.
center
Allinea al centro il logo Google.

larghezza

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

(Facoltativo) Visualizza il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti utilizza le impostazioni dell'Account Google o del browser degli utenti. Aggiungi il parametro hl e il codice lingua alla direttiva src durante il caricamento della libreria, ad esempio: gsi/client?hl=<iso-639-code>.

Se non è impostata, viene utilizzata la lingua predefinita del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero visualizzare versioni diverse dei pulsanti localizzati e, possibilmente, con dimensioni diverse.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo 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 Sign in with Google button clicked... viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.

stato

Facoltativo: poiché nella stessa pagina possono essere visualizzati più pulsanti Accedi con Google, puoi assegnare a ciascun pulsante una stringa univoca. La stessa stringa verrà restituita insieme al token ID, in modo da poter identificare il pulsante su cui l'utente ha fatto clic per accedere.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo data-state: "button 1"

Tipo di dati: credenziali

Quando viene richiamata la funzione native_callback, viene passato un oggetto Credential come parametro. La tabella seguente 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. Ciò impedisce un loop senza fine dell'esperienza utente. 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 Credential Manager integrata del browser. Pertanto, può essere utilizzato solo per memorizzare una credenziale 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 One Tap se rimuovi il prompt dal DOM della relying party. 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 di caricamento della libreria: onGoogleLibraryLoad

Puoi registrare un richiamo al numero onGoogleLibraryLoad. Viene notificata 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: 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 RevocationResponse facoltativo.

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, viene passato come parametro un oggetto RevocationResponse. La tabella seguente elenca i campi contenuti nell'oggetto di risposta alla revoca:

Campo
successful Questo campo è il valore restituito della chiamata al metodo.
error Questo campo contiene facoltativamente un messaggio di risposta di errore dettagliato.

riuscito

Questo campo è un valore booleano impostato su true se la chiamata al metodo di revoca è riuscita o false in caso di errore.

errore

Questo campo è un valore stringa e contiene un messaggio di errore dettagliato se la chiamata al metodo revoke non è andata a buon fine. In caso di esito positivo, non è definito.