Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Riferimento API JavaScript di Sign in with Google

Questa pagina di riferimento descrive l'API JavaScript Accedi con Google, utilizzata per visualizzare il pulsante Accedi con Google o la richiesta One Tap sulle 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 (come One Tap, pulsante personalizzato, revoca e così via) nella stessa pagina web.
Se chiami il metodo google.accounts.id.initialize più volte, vengono memorizzate e utilizzate solo le configurazioni dell'ultima chiamata.

In realtà, le configurazioni vengono reimpostate 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
`color_scheme`	La combinazione di colori applicata alla richiesta One Tap.
`auto_select`	Abilita la selezione automatica.
`callback`	La funzione JavaScript che gestisce i token ID. Google One Tap 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 `redirect` utilizza questo attributo in modalità UX.
`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 della richiesta One Tap
`nonce`	Una stringa casuale per i token ID
`essential_claims`	Claim aggiuntivi da includere nel token ID restituito da Google.
`context`	Il titolo e le parole nel prompt di 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. Se questo campo è presente, One Tap viene eseguito in modalità iframe intermedio.
`intermediate_iframe_close_callback`	Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap.
`itp_support`	Abilita la UX One Tap aggiornata sui browser ITP.
`login_hint`	Salta la selezione dell'account fornendo un suggerimento per l'utente.
`hd`	Limita la selezione dell'account in base al dominio.
`use_fedcm_for_prompt`	Ritirato: questo attributo è stato ritirato e verrà ignorato se utilizzato. 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'UX del pulsante FedCM deve essere utilizzata su Chrome (desktop M125+ e Android M128+). Il valore predefinito è `false`.
`button_auto_select`	Se attivare l'opzione di selezione automatica per il flusso del pulsante FedCM. Se l'opzione è attiva, gli utenti di ritorno con una sessione Google attiva verranno connessi automaticamente, ignorando la richiesta del Selettore 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"`

color_scheme

Questo campo indica la combinazione di colori applicata alla richiesta One Tap. Per ulteriori informazioni, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo. Il valore predefinito è la combinazione di colori predefinita di sistema degli utenti.	`color_scheme: "dark"`

La tabella seguente elenca le combinazioni di colori disponibili e le relative descrizioni.

Combinazione di colori
`default`	Applica la combinazione di colori predefinita del sistema dell'utente, a seconda della combinazione di colori preferita dall'utente (chiara o scura).
`light`	Applica una combinazione di colori chiari.
`dark`	Applica una combinazione di colori scuri.

auto_select

Questo campo determina se un token ID viene restituito automaticamente senza alcuna interazione dell'utente quando esiste una sola sessione Google che ha approvato la tua app in precedenza. Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

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 degli URI di reindirizzamento.

Questo attributo può essere omesso se la pagina corrente è la pagina di accesso, nel qual caso la credenziale viene pubblicata su questa pagina per impostazione predefinita.

La risposta della credenziale del token ID viene pubblicata nel tuo 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. select_by non è incluso nelle richieste HTTP POST a login_uri o data-login_uri e viene restituito solo nell'oggetto CredentialResponse passato alla funzione JavaScript callback.

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 all'esterno della richiesta. Il valore predefinito è true. Puoi disattivarla impostando 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 di 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 tipo 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 dei singoli browser e server.

essential_claims

Questo campo è una stringa utilizzata per richiedere l'inclusione di rivendicazioni aggiuntive nel token ID restituito da Google. Per un elenco completo delle attestazioni accettate da Google, consulta la sezione Attestazioni supportate.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`essential_claims: "auth_time, amr"`

context

Questo campo modifica il testo del titolo e dei messaggi mostrati nel prompt One Tap, ma non ha alcun effetto sui 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`	"Registrati a"
`use`	"Usa"

state_cookie_domain

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 di 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 UX utilizzato dal pulsante Accedi con Google. Il valore predefinito è popup. Questo attributo non ha alcun impatto sulla UX di OneTap. 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. Se questo campo è presente, One Tap viene eseguito in modalità iframe intermedio. Per ulteriori informazioni, consulta la tabella seguente:

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 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" 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 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 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, pertanto "*.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 va a buon fine e si interrompe.

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. Inoltre, influisce solo sull'iframe intermedio, anziché sull'iframe di One Tap. La UI di One Tap viene rimossa prima che venga richiamato il callback.

Tipo	Obbligatorio	Esempio
funzione	Facoltativo	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

Questo campo determina se la UX One Tap di cui è stato eseguito l'upgrade deve essere attivata nei browser che supportano Intelligent Tracking Prevention (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`itp_support: false`

login_hint

Se la tua applicazione sa in anticipo quale utente deve accedere, può fornire un suggerimento per l'accesso a Google. Se l'operazione va a buon fine, la selezione dell'account viene saltata. I valori accettati sono: un indirizzo email o un valore del campo sub del token ID.

Per saperne di più, consulta il campo login_hint nella documentazione di OpenID Connect.

Tipo	Obbligatorio	Esempio
Stringa, un indirizzo email o il valore di un campo `sub` del token ID.	Facoltativo	`login_hint: 'elisa.beckett@gmail.com'`

hd

Quando un utente ha più account e deve accedere solo con il proprio account Workspace, utilizza questa opzione per fornire un suggerimento per il nome di dominio a Google. Se l'operazione va a buon fine, gli account utente visualizzati durante la selezione dell'account sono limitati al dominio fornito. Un valore con carattere 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 le richieste di accesso degli utenti e di mediare il flusso di accesso tra il tuo sito web e Google. Il valore predefinito è false. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.

Tipo	Obbligatorio	Esempio
booleano	Deprecato	`use_fedcm_for_prompt: true`

use_fedcm_for_button

Questo campo determina se utilizzare la UX del pulsante FedCM su Chrome (desktop M125+ e Android M128+). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`use_fedcm_for_button: true`

button_auto_select

Questo campo determina se attivare l'opzione di selezione automatica per il flusso del pulsante FedCM. Se abilitata, gli utenti di ritorno con una sessione Google attiva verranno automaticamente autenticati, bypassando il prompt del selettore dell'account. Il valore predefinito è false. Devi attivare esplicitamente l'accesso automatico con pulsante durante il lancio 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 di One Tap o il gestore delle credenziali integrato nel browser dopo che viene richiamato il metodo initialize(). Vedi l'esempio di codice del metodo che segue:

 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 lato Google, l'interfaccia utente della richiesta 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 attivate nei seguenti momenti:

Momento di visualizzazione: si verifica dopo la chiamata del metodo prompt(). La notifica contiene un valore booleano che indica se la UI viene visualizzata o meno.
Momento saltato: 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 è stata disconnessa da Google.

In questi casi, ti consigliamo di passare ai provider di identità successivi, se presenti.
Momento di chiusura: 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.

Attenzione: In caso di errore, non provare nessuno dei seguenti provider di identità.

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()`	Restituisce `true` se viene visualizzato il messaggio di One Tap. Nota: quando FedCM è abilitato, questa notifica non è supportata. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`isDisplayed()`	Restituisce `true` se il tipo di momento è `PromptMoment.DISPLAY` e viene visualizzato il messaggio di One Tap. Nota: quando FedCM è abilitato, questa notifica non è supportata. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`isNotDisplayed()`	Restituisce `true` se il tipo di momento è `PromptMoment.DISPLAY` e la richiesta di One Tap non viene visualizzata. Nota: quando FedCM è abilitato, questa notifica non è supportata. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`getNotDisplayedReason()`	Il motivo dettagliato per cui la UI 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 è abilitato, questa notifica non è supportata. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`isSkippedMoment()`	Restituisce `true` se il tipo di momento è `PromptMoment.SKIPPED` Nota: quando FedCM è abilitato, questo metodo è parzialmente supportato. In particolare, non supporta il motivo di salto `user_cancel`. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`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 è parzialmente supportato. In particolare, non supporta il motivo di salto `user_cancel`. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`isDismissedMoment()`	Restituisce `true` se il tipo di momento è `PromptMoment.DISMISSED`. Nota: quando FedCM è abilitato, questo metodo è completamente supportato. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`getDismissedReason()`	Il motivo dettagliato della chiusura. Di seguito sono riportati i valori possibili: `credential_returned` `cancel_called` `flow_restarted` Nota: quando FedCM è abilitato, questo metodo è completamente supportato. Per saperne di più, consulta la pagina Esegui la migrazione a FedCM.
`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 un oggetto CredentialResponse come parametro. 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`	La 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 sotto forma di stringa JWT (JSON Web Token) con codifica 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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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 creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

Il campo sub è un identificatore univoco globale per l'Account Google. Utilizza solo il campo sub come identificatore dell'utente, in quanto è univoco 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 e se è autorevole per questo indirizzo. Nei casi in cui Google è l'autorità, l'utente viene confermato come legittimo proprietario 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 creare Account Google senza utilizzare Gmail o Google Workspace. Quando email non contiene un suffisso @gmail.com e hd è assente, Google non è autorevole e si consiglia di utilizzare la password o altri metodi di verifica per verificare l'utente. email_verfied può anche essere true, poiché 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 la data e l'ora di scadenza per verificare il token sul lato server. Per il token ID ottenuto da Accedi con Google, la durata è 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 è disconnesso. La tua app è responsabile della gestione delle sessioni degli utenti.

select_by

La tabella seguente elenca i possibili valori del 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 senza contatto.
È stata trovata una sessione esistente oppure l'utente ha selezionato un Account Google e ha eseguito l'accesso 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 alla condivisione delle 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 alla condivisione delle 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, 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.
`itp`	Un utente che aveva precedentemente concesso il consenso ha premuto One Tap sui browser ITP.
`itp_confirm`	Un utente che non ha concesso il consenso ha premuto One Tap sui browser ITP e ha premuto il pulsante "Continua" per concedere il consenso e condividere le credenziali.
`btn`	Un utente che aveva 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 che non ha concesso il consenso ha premuto il pulsante Accedi con Google e poi il pulsante "Continua" per concedere 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 selezionato. Il valore di questo campo è lo stesso che hai specificato nell'attributo state del pulsante.

Poiché nella stessa pagina possono essere visualizzati più pulsanti Accedi con Google, puoi assegnare a ogni pulsante una stringa univoca. Di conseguenza, puoi utilizzare questo campo state per identificare il pulsante su cui l'utente ha fatto clic per accedere.

Metodo: google.accounts.id.renderButton

Il metodo google.accounts.id.renderButton esegue il rendering di un pulsante Accedi con Google nelle tue pagine web.

Vedi l'esempio di codice del metodo che segue:

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`	L'allineamento del logo Google: a sinistra o al centro.
`width`	La larghezza del pulsante, in pixel.
`locale`	Se impostato, viene eseguito il rendering della lingua del pulsante.
`click_listener`	Se impostata, questa funzione viene chiamata quando si fa 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 su ogni tipo di 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 tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`theme: "filled_blue"`

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

Tema	Esempi	Specifiche
`outline`	Un tema per i pulsanti standard.	Riempimento: #FFFFFF Tratto: #747775 \| 1px \| interno Carattere: #1F1F1F \| Roboto Medium \| 14/20 Personalizzato: #1F1F1F \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_blue`	Un tema con pulsanti blu.	Riempimento: #0B57D0 Tratto: #OB57D0 \| 1 px \| interno Carattere: #FFFFFF \| Google Sans Medium \| 14/20 Personalizzato: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_black`	Un tema del pulsante con sfondo nero e logo a contrasto.	Riempimento: #202124 Tratto: #OB57D0 \| 1 px \| interno Carattere: #FFFFFF \| Google Sans Medium \| 14/20 Personalizzato: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`outline_dark`	Un tema per i pulsanti con riempimento nero.	Riempimento: #131314 Tratto: #8E918F \| 1px \| interno Carattere: #FFFFFF \| Google Sans Medium \| 14/20 Personalizzato: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13

dimensioni

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

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`size: "small"`

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

Dimensioni
`large`	Un pulsante di grandi dimensioni.
`medium`	Un pulsante di medie dimensioni.
`small`	Un pulsante di piccole dimensioni.

testo

Il testo del pulsante. Il valore predefinito è signin_with. Non esistono differenze visive per il testo dei pulsanti icona 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"`

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`, equivale a `square`.
`pill`	Il pulsante a forma di pillola. Se utilizzato per il tipo di pulsante `icon`, equivale a `circle`.
`circle`	Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante `standard`, equivale a `pill`.
`square`	Il pulsante quadrato. Se utilizzato per il tipo di pulsante `standard`, equivale 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 tabella seguente:

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"`

lingua

Facoltativo. Visualizza il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti utilizza l'Account Google o le impostazioni del browser dell'utente. 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 viene impostata, viene utilizzata l'impostazione internazionale predefinita del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero vedere versioni diverse dei pulsanti localizzati, 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 Pulsante Accedi con Google selezionato… viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.

stato

Facoltativo: poiché è possibile eseguire il rendering di più pulsanti Accedi con Google nella stessa pagina, puoi assegnare a ogni 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: credenziale

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. In questo modo si evita un loop UX senza uscita. 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 con password. Vedi l'esempio di codice del metodo che segue:

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 la richiesta dal DOM della relying party. L'operazione di annullamento viene ignorata se è già stata 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 callback onGoogleLibraryLoad. Riceve 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 l'autorizzazione con 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 della credenziale.
`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 un oggetto RevocationResponse come parametro. La tabella seguente elenca i campi contenuti nell'oggetto della risposta di 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 è andata a buon fine 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 è definito in caso di esito positivo.

Riferimento API JavaScript di Sign in with Google Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Metodo: google.accounts.id.initialize

Tipo di dati: IdConfiguration

client_id

color_scheme

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

essential_claims

context

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

hd

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

Metodo: google.accounts.id.prompt

Tipo di dati: PromptMomentNotification

Tipo di dati: CredentialResponse

credenziale

select_by

stato

Metodo: google.accounts.id.renderButton

Tipo di dati: GsiButtonConfiguration

Tipi di attributi

tipo

tema

dimensioni

testo

forma

logo_alignment

larghezza

lingua

click_listener

stato

Tipo di dati: credenziale

Metodo: google.accounts.id.disableAutoSelect

Metodo: google.accounts.id.storeCredential

Metodo: google.accounts.id.cancel

Callback di caricamento della libreria: onGoogleLibraryLoad

Metodo: google.accounts.id.revoke

Tipo di dati: RevocationResponse

riuscito

errore

Riferimento API JavaScript di Sign in with Google