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 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 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 più volte il metodo google.accounts.id.initialize, vengono memorizzate e utilizzate solo le configurazioni nell'ultima chiamata.

Di fatto, reimposti le configurazioni ogni volta che chiami il metodo google.accounts.id.initialize e tutti i metodi successivi nella stessa pagina web utilizzano immediatamente le nuove configurazioni.

Tipo di dati: IdConfiguration

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

Campo
client_id L'ID client della tua applicazione
auto_select Consente di attivare la selezione automatica.
callback La funzione JavaScript che gestisce i token ID. Google One Tap e il pulsante Accedi con Google popup La modalità UX utilizza 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 all'esterno della richiesta.
prompt_parent_id L'ID DOM dell'elemento contenitore del prompt One Tap
nonce Una stringa casuale per i token ID.
context Il titolo e le parole nel prompt One Tap
state_cookie_domain Se devi chiamare One Tap nel dominio principale e nei suoi sottodomini, trasferisci 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. 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 chiudono manualmente 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 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.

client_id

Questo campo è l'ID client dell'applicazione, che viene trovato e creato in Google Developers Console. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Questo campo determina se un token ID viene restituito automaticamente senza alcuna interazione dell'utente quando è presente una sola sessione Google che ha già approvato l'app. Il valore predefinito è false. Consulta la seguente tabella per ulteriori informazioni:

Tipo Obbligatorio Esempio
boolean Facoltativo auto_select: true

callback

Questo campo è la funzione JavaScript che gestisce il token ID restituito dal prompt One Tap o dalla finestra popup. Questo attributo è obbligatorio se viene utilizzata la modalità UX di Google One Tap o del pulsante Accedi con Google popup. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
funzione Richiesto per One Tap e per la 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 il client OAuth 2.0, che hai configurato nella console API e che deve essere conforme alle nostre regole di convalida dell'URI di reindirizzamento.

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

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

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Facoltativo Esempio
URL Il valore predefinito è l'URI della pagina corrente o il valore specificato.
Utilizzata 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 token ID nel corpo.

Di seguito è riportata una richiesta di esempio 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 le credenziali della password restituite dal gestore di credenziali nativo del browser. Per ulteriori informazioni, consulta la seguente tabella:

Tipo Obbligatorio Esempio
funzione Facoltativo native_callback: handleResponse

cancel_on_tap_outside

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

Tipo Obbligatorio Esempio
boolean Facoltativo cancel_on_tap_outside: false

prompt_parent_id

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

Tipo Obbligatorio Esempio
stringa Facoltativo prompt_parent_id: 'parent_id'

nonce

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

Tipo Obbligatorio Esempio
stringa Facoltativo nonce: "biaqbm70g23"

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

context

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

Tipo Obbligatorio Esempio
stringa Facoltativo context: "use"

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

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

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

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

ux_mode

Usa 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 seguente tabella:

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 il reindirizzamento a pagina intera.

allowed_parent_origin

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

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

Nella tabella seguente sono elencati i tipi di valori supportati e le relative descrizioni.

Tipi di valore
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 si utilizzano i caratteri jolly:

  • Le stringhe di pattern non possono essere composte solo da un carattere jolly e da un dominio di primo livello. Ad esempio, https://*.com e https://*.co.uk non sono validi. Come indicato sopra, "https://*.example.com" 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" viene considerato non valido.

Se il valore del campo allowed_parent_origin non è valido, l'inizializzazione One Tap della modalità iframe intermedia non riesce e viene 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 è quello di rimuovere immediatamente l'iframe intermedio dal DOM.

Il campo intermediate_iframe_close_callback ha effetto solo in modalità iframe intermedia. e ha impatto 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'esperienza utente One Tap aggiornata deve essere abilitata sui browser che supportano la prevenzione del tracciamento intelligente (ITP). Il valore predefinito è false. Consulta la seguente tabella per ulteriori informazioni:

Tipo Obbligatorio Esempio
boolean Facoltativo itp_support: true

login_hint

Se la tua applicazione sa in anticipo quale utente deve eseguire l'accesso, può fornire un suggerimento per l'accesso a Google. Se l'operazione ha esito positivo, la selezione dell'account viene ignorata. I valori accettati sono: un indirizzo email o un valore del campo sotto del 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 del campo sub del token ID. Facoltativo login_hint: 'elisa.beckett@gmail.com'

hd

Se un utente ha più account e deve accedere solo con il proprio account Workspace, utilizza questo metodo per fornire a Google un suggerimento sul nome di dominio. Se l'operazione ha esito positivo, gli account utente visualizzati durante la selezione dell'account sono limitati al dominio fornito. Un valore carattere jolly: * offre solo account Workspace all'utente ed esclude gli 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 la pagina Migrazione a FedCM per ulteriori informazioni.

Tipo Obbligatorio Esempio
boolean Facoltativo use_fedcm_for_prompt: true

Metodo: google.accounts.id.prompt

Il metodo google.accounts.id.prompt mostra la richiesta One Tap o il gestore di credenziali nativo del browser dopo aver richiamato il metodo initialize(). Vedi l'esempio di codice del metodo riportato di seguito:

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

In genere, il metodo prompt() viene richiamato al caricamento della pagina. A causa dello stato della sessione e delle impostazioni utente sul lato Google, l'interfaccia utente dei messaggi di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato dell'interfaccia utente per momenti diversi, trasmetti una funzione per ricevere notifiche sullo stato dell'interfaccia utente.

Le notifiche vengono attivate nei seguenti momenti:

  • Momento di visualizzazione: ciò si verifica dopo la chiamata del metodo prompt(). La notifica contiene un valore booleano che indica se l'interfaccia utente 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 emette una credenziale, ad esempio quando la sessione selezionata si è disconnessa da Google.

    In questi casi, ti consigliamo di passare ai provider di identità successivi, se ce ne sono.

  • Momento ignorato:si verifica quando Google recupera una credenziale o un utente vuole interrompere il flusso di recupero delle credenziali. Ad esempio, quando l'utente inizia a inserire nome utente e password nella finestra di dialogo di accesso, puoi chiamare il metodo google.accounts.id.cancel() per chiudere la richiesta di One Tap e attivare un momento di chiusura.

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

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

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

*Nota: quando FedCM è abilitato, le notifiche possono essere ricevute fino a 1 minuto dopo l'evento effettivo. Per ulteriori informazioni, consulta la pagina relativa alla migrazione a FedCM.
isDisplayed() Questa notifica è per un momento di visualizzazione e viene visualizzata la UI?
isNotDisplayed() Questa notifica è per un momento di visualizzazione e la UI non viene visualizzata?
getNotDisplayedReason()

Il motivo dettagliato per cui l'interfaccia utente non viene visualizzata. Di seguito sono riportati i valori possibili:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session*
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
*Nota : evita di utilizzare opt_out_or_no_session. Quando FedCM è abilitato, questo valore non è supportato. Consulta la pagina Migrazione a FedCM per ulteriori informazioni.
isSkippedMoment() Questa notifica è relativa a un momento ignorato?
getSkippedReason()

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

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() Questa notifica è relativa a un momento ignorato?
getDismissedReason()

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

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Restituisce una stringa per il tipo di momento. Di seguito sono riportati i valori possibili:

  • display
  • skipped
  • dismissed

Tipo di dati: CredentialResponse

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

Campo
credential Questo campo è il token ID restituito.
select_by Questo campo imposta il modo in cui viene selezionata la credenziale.

credenziale

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

Quando 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 per l'Account Google. Utilizza solo il campo sub come identificatore dell'utente, poiché è 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 un indirizzo email e ne è autorevole. Nei casi in cui Google è autoritativa, l'utente viene confermato come il legittimo proprietario dell'account.

Casi in cui Google è autorevole:

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

Gli utenti possono registrarsi a un 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. Il valore email_verfied può essere valido anche 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 da allora.

Il campo exp mostra la data di scadenza per la verifica del token sul lato server. Occorre attendere 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. La presenza di un token ID scaduto non significa che l'utente è uscito dall'account. L'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 allo stato della sessione e del consenso vengono usati per impostare il valore,

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

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

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

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

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

Valore Descrizione
auto Accesso automatico di un utente con una sessione esistente che in precedenza aveva concesso il consenso a condividere le credenziali.
user Un utente con una sessione esistente che in precedenza aveva concesso il consenso ha premuto il pulsante "Continua come" One Tap per condividere le credenziali.
user_1tap Un utente con una sessione esistente ha premuto il pulsante "Continua come" One Tap per concedere il consenso e condividere le credenziali. Si applica solo a Chrome 75 e versioni successive.
user_2tap Un utente senza una sessione esistente ha premuto il pulsante "Continua come" One Tap per selezionare un account, quindi preme il pulsante Conferma in una finestra popup per concedere il consenso e condividere le credenziali. Si applica ai browser non basati su Chromium.
btn Un utente con una sessione esistente che in precedenza aveva concesso il consenso ha premuto il pulsante Accedi con Google e ha selezionato un Account Google da "Scegli un account" per condividere le credenziali.
btn_confirm Un utente con una sessione esistente ha premuto il pulsante Accedi con Google e poi il pulsante Conferma per concedere il consenso e condividere le credenziali.
btn_add_session Un utente senza una sessione esistente che in precedenza aveva 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 premuto per confermare e condividere le credenziali.

Metodo: google.accounts.id.renderButton

Il metodo google.accounts.id.renderButton visualizza un pulsante Accedi con Google nelle tue pagine web.

Vedi l'esempio di codice del metodo riportato di seguito:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Tipo di dati: GsiButtonConfiguration

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

Attributo
type Il tipo di pulsante: icona o pulsante standard.
theme Il tema del pulsante. Ad esempio, riempimento_blu o riempimento_nero.
size Le dimensioni del pulsante. Ad esempio, piccolo o grande.
text Il testo del pulsante. Ad esempio, "Accedi con Google" o "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, la lingua del pulsante viene visualizzata.
click_listener Se impostata, questa funzione viene richiamata quando si fa clic sul pulsante Accedi con Google.

Tipi di attributi

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

digita

Il tipo di pulsante. Il valore predefinito è standard.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa type: "icon"

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

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

tema

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

Tipo Obbligatorio Esempio
stringa Facoltativo theme: "filled_blue"

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

Tema
outline
Un tema standard per i pulsanti.
filled_blue
Un tema dei pulsanti con riempimento blu.
filled_black
Un tema dei pulsanti con riempimento nero.

dimensioni

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

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 standard di grandi dimensioni Un pulsante icona grande Un grande pulsante personalizzato
Un pulsante di grandi dimensioni.
medium
Un pulsante standard di medie dimensioni Pulsante con icona di medie dimensioni
Un pulsante di medie dimensioni.
small
Un piccolo pulsante Un piccolo pulsante a forma di icona
Un piccolo pulsante.

testo

Il testo del pulsante. Il valore predefinito è signin_with. Non ci sono 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"

Nella tabella seguente sono elencati i testi dei pulsanti disponibili e le relative descrizioni:

Testo
signin_with
Il testo del pulsante è "Accedi con Google".
signup_with
Il testo del pulsante è "Registrati con Google".
continue_with
Il testo del pulsante è "Continua con Google".
signin
Il testo del pulsante è "Accedi".

shape

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

Tipo Obbligatorio Esempio
stringa Facoltativo shape: "rectangular"

Nella tabella seguente sono elencate le forme di 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, è uguale a circle.
circle
Il pulsante a forma di cerchio. Se utilizzato per il tipo di pulsante standard, è uguale a pill.
square
Il pulsante di forma quadrata. Se utilizzato per il tipo di pulsante standard, è uguale a rectangular.

logo_alignment

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

Tipo Obbligatorio Esempio
stringa Facoltativo logo_alignment: "center"

Nella tabella seguente sono elencati gli allineamenti disponibili e le relative descrizioni:

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

width

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

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo width: "400"

locale

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

Se non è impostato, vengono utilizzate le impostazioni internazionali predefinite del browser o le preferenze dell'utente della sessione Google. Pertanto, utenti diversi potrebbero vedere versioni diverse dei pulsanti localizzati e, probabilmente, di 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 Clic sul pulsante Accedi con Google viene registrato nella console quando l'utente fa clic sul pulsante Accedi con Google.

Tipo di dati: credenziale

Quando viene richiamata la funzione native_callback, viene passato un oggetto Credential come parametro. La seguente tabella elenca 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. In questo modo si evita un ciclo morto dell'UX. Vedi il seguente snippet di codice del metodo:

google.accounts.id.disableAutoSelect()

Il seguente esempio di codice implementa il metodo google.accounts.id.disableAutoSelect con una funzione onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Metodo: google.accounts.id.storeCredential

Questo metodo è un wrapper per il metodo store() dell'API nativa del gestore credenziali del browser. Pertanto, può essere utilizzata solo per archiviare una credenziale per la password. Vedi l'esempio di codice del metodo riportato di seguito:

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 rimuovendo la richiesta dal DOM del componente. L'operazione di annullamento viene ignorata se è già selezionata una credenziale. Vedi il seguente esempio di codice del metodo:

google.accounts.id.cancel()

Il seguente esempio di codice implementa il metodo google.accounts.id.cancel() con una funzione onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Callback del caricamento della libreria: onGoogleLibraryLoad

Puoi registrare un callback di onGoogleLibraryLoad. Viene inviata una notifica dopo il caricamento della libreria JavaScript Accedi con Google:

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

Questo callback è solo una scorciatoia per il callback window.onload. Non ci sono differenze nel comportamento.

Il seguente esempio di codice implementa un callback onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Metodo: google.accounts.id.revoke

Il metodo google.accounts.id.revoke revoca la concessione OAuth utilizzata per condividere il token ID per l'utente specificato. Vedi il seguente snippet di codice del metodo: javascript google.accounts.id.revoke(login_hint, callback)

Parametro Tipo Descrizione
login_hint stringa L'indirizzo email o l'ID univoco dell'Account Google dell'utente. L'ID è la proprietà sub del payload credential.
callback funzione Gestore 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 di risposta di revoca:

Campo
successful Questo campo è il valore restituito dalla chiamata al metodo.
error Questo campo può contenere 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 falso in caso di errore.

errore

Questo campo è un valore stringa e contiene un messaggio di errore dettagliato che se la chiamata al metodo di revoca non è riuscita, non viene definito correttamente.