Il ritiro dei cookie di terze parti di Chrome inizierà dal primo trimestre del 2024. Segui la guida alla migrazione per esaminare le potenziali modifiche ed evitare impatti negativi per l'accesso degli utenti al tuo sito web.

Questa pagina è stata tradotta dall'API Cloud Translation.

Riferimento per l'API JavaScript Accedi con Google

Questa pagina di riferimento descrive l'API Sign-In JavaScript. Puoi usare questa API per visualizzare il messaggio One Tap o il pulsante Accedi con Google sulle tue pagine web.

Metodo: google.accounts.id.initialize

Il metodo google.accounts.id.initialize inizializza la funzionalità Accedi con Google in base all'oggetto di configurazione. Vedi il seguente esempio di codice della :

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 client 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 se utilizzi più moduli (come One Tap, pulsante Personalizzato, revoca, e così via) nella stessa pagina web.
Se chiami più volte il metodo google.accounts.id.initialize, vengono memorizzate e utilizzate solo le configurazioni nell'ultima chiamata.

In realtà, reimposti le configurazioni ogni volta che chiami google.accounts.id.initialize e tutti i metodi successivi nello stesso metodo pagina web utilizzerà immediatamente le nuove configurazioni.

Tipo di dati: IdConfiguration

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

Campo
`client_id`	ID client della tua applicazione
`auto_select`	Attiva la selezione automatica.
`callback`	La funzione JavaScript che gestisce i token ID. Google One Tap e il pulsante Accedi con Google `popup` modalità UX usa questo .
`login_uri`	L'URL del tuo endpoint di accesso. Il pulsante Accedi con Google `redirect` La modalità UX 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 fuori dalla richiesta.
`prompt_parent_id`	L'ID DOM dell'elemento contenitore del prompt One Tap
`nonce`	Una stringa casuale per i token ID
`context`	Titolo e parole nel prompt 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 un singolo cookie condiviso venga in uso.
`ux_mode`	Flusso dell'esperienza utente del pulsante Accedi con Google
`allowed_parent_origin`	Le origini consentite per incorporare l'iframe intermedio. Un tocco viene eseguito in modalità iframe intermedia se questo campo è presente.
`intermediate_iframe_close_callback`	Sostituisce il comportamento predefinito dell'iframe intermedio quando gli utenti eseguono manualmente chiudi One Tap.
`itp_support`	Consente di attivare l'esperienza utente One Tap aggiornata sui browser ITP.
`login_hint`	Salta la selezione dell'account fornendo un suggerimento 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 agire da mediatore il flusso di accesso tra il tuo sito web e Google.

client_id

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

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`auto_select: true`

callback

Questo campo è la funzione JavaScript che gestisce il token ID restituito da il prompt One Tap o la finestra popup. Questo attributo è obbligatorio se Google One Tap o il pulsante Accedi con Google popup Viene utilizzata la modalità UX. Consulta le la seguente tabella per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
funzione	Richiesto per One Tap e modalità UX di `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 OAuth 2.0 che hai configurato nella console Google Cloud e devono essere conformi alla nostra convalida dell'URI di reindirizzamento personalizzate.

Questo attributo può essere omesso se la pagina corrente è la tua pagina di accesso, in cui se la credenziale viene pubblicata in questa pagina per impostazione predefinita.

La risposta alle credenziali del token ID viene pubblicata sull'endpoint di accesso quando un utente i clic sul pulsante Accedi con Google e viene utilizzata la modalità UX di reindirizzamento.

Per saperne di più, consulta la tabella seguente:

Tipo	Facoltativo	Esempio
URL	Il valore predefinito è l'URI della pagina corrente o il valore da te 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 un credential con un ID token 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

native_callback

Questo campo è il nome della funzione JavaScript che gestisce la password credenziale restituita dal gestore delle credenziali nativo del browser. Consulta le la seguente tabella per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
funzione	Facoltativo	`native_callback: handleResponse`

cancel_on_tap_outside

Questo campo consente di stabilire se annullare o meno la richiesta One Tap se un utente fa clic su al di fuori del prompt. Il valore predefinito è true. Puoi disabilitarlo se imposti il valore in false. Per saperne di più, 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 messaggio One Tap viene visualizzato nell'angolo in alto a destra della finestra. Consulta le la seguente tabella per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`prompt_parent_id: 'parent_id'`

nonce

Questo campo è una stringa casuale utilizzata dal token ID per prevenire gli attacchi di ripetizione. Per saperne di più, 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 vincoli di dimensione HTTP dei singoli browser e server.

contesto

Questo campo modifica il testo del titolo e i messaggi nel prompt One Tap. Consulta la seguente tabella per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`context: "use"`

Nella tabella seguente sono elencati tutti i contesti disponibili e le relative descrizioni:

Contesto
`signin`	"Accedi con Google"
`signup`	"Registrati con Google"
`use`	"Utilizza con Google"

state_cookie_domain

Se devi visualizzare One Tap nel dominio principale e nei relativi sottodomini, trasmetti il principale a questo campo in modo che venga utilizzato un singolo cookie con stato condiviso. Consulta la seguente tabella per ulteriori informazioni:

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. La il valore predefinito è popup. Questo attributo non ha alcun impatto sull'UX di OneTap. Consulta le la seguente tabella per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`ux_mode: "redirect"`

Nella tabella seguente sono elencate 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 completo a una pagina.

allowed_parent_origin

Le origini consentite per incorporare l'iframe intermedio. Corse con One Tap in modalità iframe intermedia se questo campo è presente. Consulta quanto segue: Tabella per ulteriori informazioni:

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" corrisponde a example.com e ai relativi sottodomini a tutti i livelli (ad es. news.example.com e login.news.example.com). Aspetti da tenere presenti durante l'utilizzo caratteri jolly:

Le stringhe di pattern non possono essere composte solo da un carattere jolly e da un livello superiore dominio. Ad esempio https://.com e https://.co.uk non sono validi; Come osservato in precedenza, "https://.example.com" corrisponde a example.com e ai relativi sottodomini. Puoi anche utilizzare per rappresentare due domini diversi. Ad esempio: ["https://example1.com", "https://.example2.com"] corrispondenze i domini example1.com, example2.com e sottodomini di example2.com
I domini con caratteri jolly devono iniziare con uno schema https:// sicuro. "*.example.com" non è considerato valido.

Se il valore del campo allowed_parent_origin non è valido, viene restituito l'errore One Tap l'inizializzazione della modalità iframe intermedia non riuscirà e si interromperà.

intermediate_iframe_close_callback

Sostituisce il comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tocca toccando la "X" nell'interfaccia utente di One Tap. Il comportamento predefinito è rimuovere immediatamente l'iframe intermedio dal DOM.

Il campo intermediate_iframe_close_callback viene applicato solo nelle fasi intermedie modalità iframe. Ha impatto solo sull'iframe intermedio, invece che sulla 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`

itp_support

Questo campo determina se upgrade dell'esperienza utente di One Tap deve essere abilitato sui browser che supportano Intelligent Tracking Prevention (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente informazioni:

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`itp_support: true`

login_hint

Se la tua applicazione sa in anticipo a quale utente deve eseguire l'accesso, può fornisci un suggerimento di accesso a Google. Se l'operazione ha esito positivo, la selezione dell'account viene saltata. I valori accettati sono un indirizzo email o un valore di campo sotto di un token ID.

Per ulteriori informazioni, vedi il campo login_hint in OpenID Connect. documentazione.

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

hd

Quando un utente ha più account e dovrebbe accedere solo con il proprio account Workspace utilizzare questo account per fornire un suggerimento per il nome di dominio a Google. Se l'operazione ha esito positivo, l'utente quelli visualizzati durante la selezione degli account sono limitati al dominio specificato. Un valore con carattere jolly: * offre solo account Workspace all'utente ed esclude account consumer (utente@gmail.com) durante la selezione dell'account.

Per ulteriori informazioni, vedi 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. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`use_fedcm_for_prompt: true`

Metodo: google.accounts.id.prompt

Il metodo google.accounts.id.prompt mostra il messaggio di One Tap o Gestore delle credenziali nativo del browser dopo il richiamo del metodo initialize(). Vedi l'esempio di codice del metodo che segue:

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

Normalmente, il metodo prompt() viene richiamato durante il caricamento pagina. A causa della sessione lo stato e le impostazioni utente di Google, la UI del prompt di One Tap potrebbe non visualizzati. Per ricevere notifiche sullo stato della UI per momenti diversi, passa un per ricevere notifiche sullo stato dell'interfaccia utente.

Le notifiche vengono attivate nei seguenti momenti:

Momento di visualizzazione: si verifica dopo che è stato chiamato il metodo prompt(). La contiene un valore booleano che indica se l'UI è visualizzato o meno.
Momento ignorato: si verifica quando la richiesta One Tap viene chiusa da un annulla manualmente, oppure quando Google non riesce a emettere una credenziale, come quando la sessione selezionata è disconnessa da Google.

In questi casi, ti consigliamo di continuare con l'identità successiva. di altri provider, se presenti.
Momento ignorato: si verifica quando Google recupera correttamente un la credenziale o un utente vuole interrompere il flusso di recupero delle credenziali. Per ad esempio, quando l'utente inizia a inserire il nome utente e la password nel tuo 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 le identità successive di altri provider.

Il seguente esempio di codice implementa il momento ignorato:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Tipo di dati: PromptMomentNotification

Nella tabella seguente sono elencati i metodi e le descrizioni Tipo di dati PromptMomentNotification:

Metodo
`isDisplayMoment()`	Questa notifica è relativa a un momento di visualizzazione? Nota: quando FedCM è abilitata, la notifica non viene attivata. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.
`isDisplayed()`	Questa notifica è relativa a un momento di visualizzazione e l'UI è visualizzato? Nota: quando FedCM è abilitata, la notifica non viene attivata. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.
`isNotDisplayed()`	Questa notifica è relativa a un momento di visualizzazione e l'UI no visualizzato? Nota: quando FedCM è abilitata, la notifica non viene attivata. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.
`getNotDisplayedReason()`	Il motivo dettagliato per cui l'interfaccia utente non viene visualizzata. Di seguito sono riportate le 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, questo metodo non è supportato. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.
`isSkippedMoment()`	Questa notifica è relativa a un momento ignorato?
`getSkippedReason()`	Il motivo dettagliato del momento ignorato. Di seguito sono riportate le valori possibili: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Nota: quando FedCM è abilitato, questo metodo non è supportato. Consulta Eseguire la migrazione a FedCM pagina per ulteriori informazioni.
`isDismissedMoment()`	Questa notifica è relativa a un momento ignorato?
`getDismissedReason()`	Il motivo dettagliato della chiusura. È possibile: valori: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Restituisce una stringa per il tipo di momento. È possibile: valori: `display` `skipped` `dismissed`

Tipo di dati: CredentialResponse

Quando viene richiamata la funzione callback, un oggetto CredentialResponse viene passato come parametro. La tabella seguente elenca i campi contenuti nell'oggetto di risposta alle credenziali:

Campo
`credential`	Questo campo è il token ID restituito.
`select_by`	Questo campo consente di impostare la modalità di selezione della credenziale.
`state`	Questo campo viene definito solo quando l'utente fa clic su Accedi con Google per accedere e il `state` specificato.

qualifica

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

Quando decoded 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. Solo usa il campo sub come identificatore per l'utente in quanto è univoco tra tutti i servizi Google Account e mai riutilizzati. Non utilizzare l'indirizzo email come identificatore perché un Account Google può avere più indirizzi email in diversi momenti.

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

Casi in cui Google è autorevole:

email ha un suffisso @gmail.com, questo è un account Gmail.
email_verified è true e hd è impostato, questo è 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 non è presente, Google è non autoritativi e con password o altri metodi di verifica verificare l'utente. email_verfied può anche essere vero in quanto Google ha verificato inizialmente l'utente quando è stato creato l'account Google, tuttavia la proprietà del terzo l'account email di una terza parte potrebbe essere cambiato da allora.

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

select_by

Nella tabella seguente sono elencati i possibili valori per il campo select_by. La il tipo di pulsante usato insieme alla sessione e allo stato del consenso per impostare valore,

L'utente ha premuto il pulsante One Tap o Accedi con Google oppure la procedura di accesso automatico touchless.
È stata trovata una sessione esistente oppure l'utente ha selezionato una sessione e ha eseguito l'accesso Account Google per stabilire una nuova sessione.
Prima di condividere le credenziali del token ID con l'app, l'utente
- ha premuto il pulsante Conferma per concedere il consenso alla condivisione delle credenziali. o
- che aveva precedentemente concesso il consenso e utilizzato Seleziona un account per scegliere Account Google

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

Valore	Descrizione
`auto`	Accesso automatico di un utente con una sessione esistente che ha il consenso alla condivisione delle credenziali è stato concesso in precedenza. Si applica solo a browser non supportati da FedCM.
`user`	Un utente con una sessione esistente che ha precedentemente concesso il consenso premuto "Continua come" di One Tap per condividere le credenziali. Si applica solo ai browser non supportati da FedCM.
`fedcm`	Un utente ha premuto "Continua come" di One Tap pulsante per condividere utilizzando FedCM. Si applica solo a FedCM supportata browser.
`fedcm_auto`	Accesso automatico di un utente con una sessione esistente che ha in precedenza ha concesso il consenso a condividere le credenziali utilizzando FedCM One Tap. Si applica solo a FedCM supportata browser.
`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 successive.
`user_2tap`	Un utente senza una sessione esistente ha premuto il pulsante "Continua come" di One Tap per selezionare un account, quindi premiamo il pulsante Conferma per concedere il consenso e condividere le credenziali. Si applica a browser non basati su Chromium.
`btn`	Un utente con una sessione esistente che ha precedentemente 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 ho 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 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 premi 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 dopo aver eseguito l'accesso e verrà specificato l'attributo state del pulsante su cui è stato fatto clic. La di questo campo è lo stesso specificato nel campo state.

Poiché sulla stessa pagina possono essere visualizzati più pulsanti Accedi con Google, può assegnare ogni pulsante con 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 una funzionalità 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

Nella tabella seguente sono elencati i campi e le descrizioni Tipo di dati GsiButtonConfiguration:

Attributo
`type`	Il tipo di pulsante: icona o pulsante standard.
`theme`	Il tema del pulsante. ad esempio pieno_blu o pieno_nero.
`size`	Le dimensioni del pulsante. Ad esempio, piccola 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 la funzionalità Accedi con Google viene fatto clic sul pulsante.
`state`	Se impostato, questa stringa restituisce il token ID.

Tipi di attributi

Le seguenti sezioni contengono dettagli sul tipo di ogni attributo e una esempio.

tipo

Il tipo di pulsante. Il valore predefinito è standard.

Per saperne di più, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Sì	`type: "icon"`

Nella tabella seguente sono elencati i tipi di pulsanti disponibili e i relativi descrizioni:

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

tema

Il tema del pulsante. Il valore predefinito è outline. Consulta la tabella seguente per ulteriori informazioni:

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

Nella tabella seguente sono elencati i temi disponibili e le relative descrizioni:

Tema
`outline`	Un tema con pulsanti standard.
`filled_blue`	Un tema con pulsanti blu pieno.
`filled_black`	Un tema con pulsanti con riempimento nero.

dimensioni

Le dimensioni del pulsante. Il valore predefinito è large. Consulta la tabella seguente per ulteriori informazioni:

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

Nella tabella seguente sono elencate le dimensioni dei pulsanti disponibili e le relative descrizioni:

Dimensioni
`large`	Un pulsante grande.
`medium`	Un pulsante di dimensioni medie.
`small`	Un piccolo pulsante.

testo

Il testo del pulsante. Il valore predefinito è signin_with. Non esistono immagini differenze per il testo dei pulsanti icona con attributi text diversi. L'unica eccezione è quando il testo viene letto per l'accessibilità dello schermo.

Per saperne di più, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`text: "signup_with"`

Nella tabella seguente sono elencati tutti i testi dei pulsanti disponibili e i relativi 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. Consulta la tabella seguente per ulteriori informazioni:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`shape: "rectangular"`

Nella tabella seguente sono elencate le forme dei pulsanti disponibili e le relative descrizioni:

Shape
`rectangular`	Il pulsante rettangolare. Se utilizzata per `icon` di pulsante, è uguale a `square`.
`pill`	Il pulsante a forma di pillola. Se utilizzato per il pulsante `icon` di testo, sarà uguale a `circle`.
`circle`	Il pulsante a forma di cerchio. Se utilizzata per `standard` di pulsante, è uguale a `pill`.
`square`	Il pulsante di forma quadrata. Se utilizzata per `standard` di pulsante, è 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 tabella seguente informazioni:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`logo_alignment: "center"`

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

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

larghezza

La larghezza minima del pulsante, in pixel. La larghezza massima è di 400 pixel.

Per saperne di più, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`width: "400"`

locale

(Facoltativo) Visualizza il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti il valore predefinito sarà l'Account Google o le impostazioni del browser dell'utente. Aggiungi il parametro hl e all'istruzione src durante il caricamento della libreria, ad esempio: gsi/client?hl=<iso-639-code>.

Se non viene configurato, vengono applicate le impostazioni internazionali predefinite del browser o . Pertanto, utenti diversi potrebbero vedere versioni diverse di pulsanti localizzati ed eventualmente di dimensioni diverse.

Per saperne di più, consulta la tabella seguente:

Tipo	Obbligatorio	Esempio
stringa	Facoltativo	`locale: "zh_CN"`

click_listener

Puoi definire una funzione JavaScript da chiamare quando la pagina Accedi con Google Viene fatto clic 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, viene registrato il messaggio Accedi con Google pulsante selezionato... alla console quando fai clic sul pulsante Accedi con Google.

stato

(Facoltativo) Poiché possono essere visualizzati più pulsanti Accedi con Google sullo stesso pagina, puoi assegnare a ogni pulsante una stringa univoca. La stessa stringa viene restituito insieme al token ID, per consentirti di identificare il pulsante ha fatto clic per accedere.

Per saperne di più, consulta la tabella seguente:

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

Tipo di dati: credenziale

Quando native_callback viene richiamata, un oggetto Credential viene passato come parametro. La nella tabella seguente sono elencati i campi contenuti nell'oggetto:

Campo
`id`	Identifica l'utente.
`password`	La password

Metodo: google.accounts.id.disableAutoSelect

Quando l'utente esce dal sito web, devi chiamare il metodo google.accounts.id.disableAutoSelect per registrare lo stato nei cookie. Questo impedisce un loop morto UX. Vedi il seguente snippet di codice del metodo:

google.accounts.id.disableAutoSelect()

Il seguente esempio di codice implementa 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'asset nativo del browser API di gestione delle credenziali. Pertanto, può essere usato solo per memorizzare una password la credenziale. Vedi l'esempio di codice del metodo che segue:

google.accounts.id.storeCredential(Credential, callback)

Il seguente esempio di codice implementa 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 dalla parte coinvolta DOM. L'operazione di annullamento viene ignorata se è già stata selezionata una credenziale. Consulta 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 per il caricamento della libreria: onGoogleLibraryLoad

Puoi registrare un callback onGoogleLibraryLoad. Riceve una notifica dopo l'uscita La libreria JavaScript In With Google viene caricata:

window.onGoogleLibraryLoad = () => {
    ...
};

Questo callback è solo una scorciatoia per il callback window.onload. Non sono presenti e differenze di 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` dell'elemento payload credential.
`callback`	funzione	Gestore facoltativo RevocationResponse.

Il seguente esempio di codice mostra come utilizzare il metodo revoke con un ID.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Tipo di dati: RevocationResponse

Quando viene richiamata la funzione callback, un oggetto RevocationResponse viene passato come parametro. La tabella seguente elenca i campi contenuti nell'oggetto della 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 ha avuto esito positivo o false in caso di errore.

errore

Questo campo è un valore di stringa e contiene un messaggio di errore dettagliato se la richiesta non riuscita, l'operazione non è definita se l'operazione è andata a buon fine.