È in corso la migrazione dei servizi di identità Google alle API FedCM. Segui la guida alla migrazione per esaminare le potenziali modifiche ed evitare effetti negativi sull'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 JavaScript di Accesso. Puoi utilizzare questa API per visualizzare la richiesta One Tap o il pulsante Accedi con Google nelle tue pagine web.

Metodo: google.accounts.id.initialize

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

google.accounts.id.initialize(IdConfiguration)

Il seguente esempio di codice implementa il metodo google.accounts.id.initialize con una funzione onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

Il metodo google.accounts.id.initialize crea un'istanza client Accedi con Google che può essere utilizzata implicitamente da tutti i moduli della 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 più volte il metodo google.accounts.id.initialize, vengono memorizzate e utilizzate solo le configurazioni nell'ultima chiamata.

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 dato IdConfiguration:

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 utilizzano questo attributo.
`login_uri`	L'URL dell'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`	Il titolo e le 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 da utilizzare un singolo cookie condiviso.
`ux_mode`	Flusso dell'esperienza utente del pulsante Accedi con Google
`allowed_parent_origin`	Le origini consentite per incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedia se questo campo è presente.
`intermediate_iframe_close_callback`	Sostituisce il comportamento predefinito dell'iframe intermedio quando gli utenti chiude 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.
`enable_redirect_uri_validation`	Attiva il flusso di reindirizzamento dei pulsanti conforme alle regole di convalida degli URI di reindirizzamento.

client_id

Questo campo è l'ID client della tua applicazione, che puoi trovare e creare 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 alcuna interazione da parte 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 dalla richiesta One Tap o dalla finestra popup. Questo attributo è obbligatorio se viene utilizzata la modalità UX popup di Google One Tap o del pulsante Accedi con Google. 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 tua pagina di accesso, nel qual caso la credenziale viene pubblicata in questa pagina per impostazione predefinita.

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

Per ulteriori informazioni, consulta la tabella seguente:

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

L'endpoint di accesso deve gestire le richieste POST contenenti una chiave credential con un valore del token ID nel corpo.

Di seguito è riportato un esempio di richiesta all'endpoint di accesso:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

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

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 al di fuori della richiesta. Il valore predefinito è true. Puoi disattivarlo 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 è impostata, la richiesta di un solo tocco viene visualizzata nell'angolo in alto a destra della finestra. Per ulteriori informazioni, consulta la tabella riportata di seguito:

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 alle dimensioni massime del JWT supportate dall'ambiente e ai vincoli di dimensione HTTP dei singoli browser e server.

contesto

Questo campo modifica il testo del titolo e dei messaggi nel prompt One Tap. Per ulteriori informazioni, consulta la tabella seguente:

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`	"Usa con Google"

state_cookie_domain

Se devi mostrare One Tap nel dominio principale e nei relativi sottodomini, passa il dominio principale a questo campo in modo da utilizzare un unico cookie con stato condiviso. Per ulteriori informazioni, consulta la tabella riportata di seguito:

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 influisce sull'esperienza utente di OneTap. Per ulteriori informazioni, consulta la tabella riportata di seguito:

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 di 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 che possono incorporare l'iframe intermedio. One Tap viene eseguito in modalità iframe intermedia, se questo campo è presente. Per ulteriori informazioni, consulta la tabella riportata di seguito:

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 le stringhe jolly:

Le stringhe dei pattern non possono essere composte solo da un carattere jolly e un dominio di primo livello. Ad esempio https://.com e https://.co.uk non sono validi. Come indicato in precedenza, "https://.example.com" corrisponde a example.com e ai relativi sottodomini. Puoi anche utilizzare un array per rappresentare due domini diversi. Ad esempio, ["https://example1.com", "https://.example2.com"] 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 One Tap della modalità iframe intermedia non andrà a buon fine e verrà interrotta.

intermediate_iframe_close_callback

Sostituisce il 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 è rimuovere immediatamente l'iframe intermedio dal DOM.

Il campo intermediate_iframe_close_callback viene applicato solo in modalità iframe intermedia. e influisce solo sull'iframe intermedio, anziché sull'iframe One Tap. L'interfaccia utente One Tap viene rimossa prima dell'attivazione del callback.

Tipo	Obbligatorio	Esempio
funzione	Facoltativo	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

Questo campo determina se l' UX One Tap di cui è stato eseguito l'upgrade deve essere attivato sui browser che supportano la Prevenzione antitracciamento intelligente (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella riportata di seguito:

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`itp_support: true`

login_hint

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

Per ulteriori informazioni, consulta il campo login_hint nella documentazione di OpenID Connect.

Tipo	Obbligatorio	Esempio
Stringa, un indirizzo email o il valore di un campo token ID `sub`.	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. 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 ulteriori informazioni, 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 dell'utente e mediare il flusso di accesso tra il tuo sito web e Google. Il valore predefinito è false. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM.

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`use_fedcm_for_prompt: true`

enable_redirect_uri_validation

Attiva il flusso di reindirizzamento dei pulsanti conforme alle regole di convalida degli URI di reindirizzamento.

Tipo	Obbligatorio	Esempio
booleano	Facoltativo	`enable_redirect_uri_validation: true`

Metodo: google.accounts.id.prompt

Il metodo google.accounts.id.prompt mostra la richiesta One Tap o il gestore delle credenziali native del browser dopo l'invocazione 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 chiamato durante il caricamento pagina. A causa dello stato della sessione e delle impostazioni utente sul lato Google, l'UI del prompt di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato dell'interfaccia utente in momenti diversi, passa una funzione per ricevere notifiche sullo stato dell'interfaccia utente.

Le notifiche vengono attivate nei seguenti momenti:

Momento di visualizzazione:si verifica dopo la chiamata del metodo prompt(). La notifica contiene un valore booleano che indica se la UI viene visualizzata o meno.
Momento ignorato: si verifica quando la richiesta One Tap 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 ha eseguito la disconnessione da Google.

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

Avviso: quando un momento viene ignorato, non provare nessuno dei fornitori di identità successivi.

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. Consulta la pagina Eseguire la migrazione a FedCM per maggiori informazioni.
`isDisplayed()`	Questa notifica riguarda un momento di visualizzazione e l'interfaccia utente è visualizzata? Nota: quando FedCM è attivato, questa notifica non viene attivata. Per ulteriori informazioni, 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. Consulta la pagina Eseguire la migrazione a FedCM per maggiori informazioni.
`getNotDisplayedReason()`	Il motivo dettagliato per cui l'interfaccia utente non viene visualizzata. Ecco 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 : se FedCM è abilitato, questo metodo non è supportato. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione a FedCM.
`isSkippedMoment()`	Questa notifica riguarda un momento saltato?
`getSkippedReason()`	Il motivo dettagliato del momento ignorato. Ecco i valori possibili: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Nota: se FedCM è attivato, questo metodo non è supportato. Consulta la pagina Eseguire la migrazione a FedCM per maggiori informazioni.
`isDismissedMoment()`	Questa notifica riguarda un momento ignorato?
`getDismissedReason()`	Il motivo dettagliato del licenziamento. Ecco i valori possibili: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Restituisce una stringa per il tipo di momento. Ecco i valori possibili: `display` `skipped` `dismissed`

Tipo di dati: CredentialResponse

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

Campo
`credential`	Questo campo è il token ID restituito.
`select_by`	Questo campo imposta la modalità di selezione della credenziale.
`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.

qualifica

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

Una volta decodificato, il JWT ha il seguente aspetto:

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 solo il campo sub come identificatore per l'utente, in quanto è univoco tra tutti gli Account Google e non viene mai riutilizzato. Non utilizzare l'indirizzo email come identificatore, perché un Account Google può avere più indirizzi email in momenti diversi.

Utilizzando i campi email, email_verified e hd puoi determinare se Google ospita e ha autorità per un indirizzo email. Nei casi in cui Google sia 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 creare 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 metodi di verifica come la password o altri. email_verfied può essere vero 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 la data e l'ora di scadenza per la verifica del token sul lato server. È necessaria 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 degli utenti.

select_by

Nella tabella seguente sono elencati i possibili valori per il campo select_by. Il tipo di pulsante usato insieme alla sessione e allo stato del consenso viene usato 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 tocco.
È stata trovata una sessione esistente o l'utente ha selezionato e eseguito l'accesso a un Account Google per stabilire una nuova sessione.
Prima di condividere le credenziali del token ID con l'app, l'utente
- ha premuto il pulsante Conferma per concedere il consenso alla condivisione delle credenziali
- che 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 supportati non FedCM.
`user`	Un utente con una sessione esistente che aveva precedentemente concesso il consenso ha premuto il pulsante "Continua come" con un solo tocco per condividere le credenziali. Si applica solo ai browser non supportati da FedCM.
`fedcm`	Un utente ha premuto il pulsante "Continua come" con un solo tocco per condividere le credenziali utilizzando FedCM. Si applica solo ai browser supportati FedCM.
`fedcm_auto`	Accesso automatico di un utente con una sessione esistente che ha precedentemente concesso il consenso a condividere le credenziali utilizzando FedCM One Tap. Si applica solo ai browser supportati di FedCM.
`user_1tap`	Un utente con una sessione esistente ha premuto il pulsante "Continua come" con un solo tocco 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" con un solo tocco 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 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 poi 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, quindi 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 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 poi 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, quindi ha premuto il pulsante Conferma per acconsentire 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 ha fatto clic. Il valore di questo campo è lo stesso specificato nell'attributo state del pulsante.

Poiché è possibile visualizzare più pulsanti Accedi con Google nella stessa pagina, puoi assegnare a ciascun 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 mostra 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 pieno_blu o pieno_nero.
`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 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 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 tabella seguente:

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

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

Tema
`outline`	Un tema di pulsanti standard.
`filled_blue`	Un tema di pulsanti con sfondo blu.
`filled_black`	Un tema di pulsante con riempimento nero.

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 grande.
`medium`	Un pulsante di medie dimensioni.
`small`	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"`

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

Shape
`rectangular`	Il pulsante di forma rettangolare. Se utilizzato per il tipo di pulsante `icon`, è uguale a `square`.
`pill`	Il pulsante a forma di pillola. Se utilizzato per il tipo di pulsante `icon`, corrisponde a `circle`.
`circle`	Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante `standard`, è uguale a `pill`.
`square`	Il pulsante quadrato. 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 tabella riportata di seguito:

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

La tabella seguente 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 ulteriori informazioni, consulta la tabella seguente:

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

locale

(Facoltativo) Mostra il testo del pulsante utilizzando le impostazioni internazionali specificate, altrimenti viene utilizzato il valore predefinito dell'Account Google o del browser dell'utente. Aggiungi il parametro hl e il codice lingua alla direttiva src quando carichi la libreria, ad esempio: gsi/client?hl=<iso-639-code>.

Se non è impostato, viene utilizzata la lingua predefinita del browser o la preferenza dell'utente della sessione Google. Pertanto, utenti diversi potrebbero vedere versioni diverse dei pulsanti localizzati e, eventualmente, 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 È stato fatto clic sul pulsante Accedi con Google… viene registrato nella console quando viene fatto clic sul pulsante Accedi con Google.

stato

Facoltativo: poiché è possibile visualizzare più pulsanti Accedi con Google nella stessa pagina, puoi assegnare a ciascun pulsante una stringa univoca. La stessa stringa viene 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 morto 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 gestore delle credenziali nativa del browser. Pertanto, può essere utilizzato solo per memorizzare una credenza per 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 terza parte. L'operazione di annullamento viene ignorata se è già selezionata una credenziale. Vedi l'esempio di codice che segue 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. Viene inviata una notifica dopo il caricamento della libreria JavaScript di Accedi con Google:

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

Questo callback è solo una scorciatoia per il callback window.onload. Non ci sono 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` del payload della credenziale.
`callback`	funzione	Gestore facoltativo RevocationResponse.

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

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

Tipo di dati: RevocationResponse

Quando viene invocata la funzione callback, viene passato un oggetto RevocationResponse 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.

riuscita

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

errore

Questo campo è un valore di stringa e contiene un messaggio di errore dettagliato se la chiamata del metodo revoke non è andata a buon fine. Se la chiamata ha esito positivo, il campo non è definito.