Riferimento Accedi con Google JavaScript API

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 di Accedi con Google che può essere utilizzata implicitamente da tutti i moduli nella stessa pagina web.

  • Devi chiamare il metodo google.accounts.id.initialize solo una volta, anche se utilizzi più moduli (come One Tap, pulsante Personalizzato, revoca e così via) nella stessa pagina web.
  • Se chiami il metodo google.accounts.id.initialize più volte, verranno ricordate e utilizzate solo le configurazioni nell'ultima chiamata.

Le configurazioni vengono effettivamente reimpostate ogni volta che si chiama il metodo google.accounts.id.initialize e tutti i metodi successivi nella stessa pagina web utilizzano le nuove configurazioni immediatamente.

Tipo di dati: IdConfiguration

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

Campo
client_id 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 in modalità UX utilizzano questo attributo.
login_uri L'URL del tuo endpoint di accesso. Il pulsante Accedi con Google redirect modalità UX utilizza questo attributo.
native_callback La funzione JavaScript che gestisce le credenziali delle password.
cancel_on_tap_outside Annulla la richiesta se l'utente fa clic al di fuori della richiesta.
prompt_parent_id L'ID DOM dell'elemento contenitore del prompt One Tap
nonce Una stringa casuale per i token ID
context Il titolo e le parole nella richiesta One Tap
state_cookie_domain Se devi chiamare One Tap nel dominio principale e nei suoi sottodomini, passa il dominio principale a questo campo in modo da utilizzare 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 verrà eseguito in modalità iframe intermedio se questo campo presenta:
intermediate_iframe_close_callback Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap.
itp_support Abilita l'esperienza utente One Tap UX aggiornata sui browser ITP.

client_id

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

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

selezione_automatica

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

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

Tipo Obbligatorio Esempio
funzione Obbligatorio per One Tap e modalità popup UX callback: handleResponse

URI_di_accesso

Questo attributo è l'URI del tuo endpoint di accesso.

Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0 configurato nella console API e deve essere conforme alle regole di convalida dell'URI di reindirizzamento.

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

La risposta relativa alle 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.
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 di 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

nativo_callback

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

Tipo Obbligatorio Esempio
funzione Facoltativo native_callback: handleResponse

annulla_on_tap_outside

Questo campo indica se annullare o meno la richiesta One Tap se un utente fa clic all'esterno 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

ID_genitore_richiesta

Questo attributo imposta l'ID DOM dell'elemento contenitore. Se non è impostata, viene visualizzato il messaggio One Tap nell'angolo in alto a destra della finestra. 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 gli attacchi di ripetizione. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo nonce: "biaqbm70g23"

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

context

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

Tipo Obbligatorio Esempio
stringa Facoltativo context: "use"

La tabella riportata di seguito elenca i contesti disponibili e le relative descrizioni:

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

Se devi mostrare One Tap nel dominio principale e nei relativi sottodomini, passa il dominio principale a questo campo in modo da utilizzare un singolo cookie per lo stato condiviso. Per ulteriori informazioni, consulta la tabella seguente:

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

modalità_ux

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

Tipo Obbligatorio Esempio
stringa Facoltativo ux_mode: "redirect"

Nella tabella che segue sono elencate le modalità UX disponibili e le relative descrizioni.

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

origine_genitore_consentita

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

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" corrisponderà a example.com e ai suoi sottodomini a tutti i livelli (ad es.news.example.com, login.news.example.com). Tieni presente quanto segue quando utilizzi i caratteri jolly:

  • Le stringhe di pattern non possono essere composte solo da un carattere jolly e da un dominio di primo livello. Ad esempio, https://*.com e https://*.co.uk non sono validi. Come indicato sopra, "https://*.example.com" corrisponderà 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"] corrisponderà ai domini example1.com, example2.com e sottodomini di example2.com
  • I domini con caratteri jolly devono iniziare con uno schema https:// sicuro. "*.example.com" verrà considerato non valido.

Se il valore del campo allowed_parent_origin non è valido, l'inizializzazione di One Tap della modalità iframe intermedio non riuscirà e verrà interrotta.

rich_close_call_callback

Esegue l'override del comportamento predefinito dell'iframe intermedio quando gli utenti chiudono manualmente One Tap toccando il pulsante 'X' nell'interfaccia utente One Tap. Il comportamento predefinito è quello di rimuovere immediatamente l'iframe intermedio dal DOM.

Il campo intermediate_iframe_close_callback viene applicato solo in modalità iframe intermedio. Ha un impatto solo sull'iframe intermedio, anziché sull'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

supporto_itp

Questo campo determina se è necessario abilitare l' esperienza utente One Tap UX sui browser che supportano la Prevenzione del monitoraggio intelligente (ITP). Il valore predefinito è false. Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
boolean Facoltativo itp_support: 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 il seguente esempio di codice del metodo:

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

Normalmente, il metodo prompt() viene chiamato al caricamento della pagina. A causa dello stato della sessione e delle impostazioni utente sul lato Google, l'interfaccia utente del prompt di One Tap potrebbe non essere visualizzata. Per ricevere notifiche sullo stato della UI per diversi momenti, passa una funzione per ricevere notifiche di stato nella UI.

Le notifiche vengono attivate nei seguenti momenti:

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

  • Momento ignorato: questo si verifica quando la richiesta One Tap viene chiusa da un annullamento automatico, 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 continuare con i prossimi provider di identità, se disponibili.

  • Momento ignorato: si verifica quando Google recupera correttamente una credenziale o un utente vuole interrompere il flusso di recupero delle credenziali. Ad esempio, quando l'utente inizia a inserire il proprio 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.

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 i metodi e le descrizioni del tipo di dati PromptMomentNotification:

Metodo
isDisplayMoment() Questa notifica è relativa a un momento di visualizzazione?
isDisplayed() Questa notifica è relativa a un momento di visualizzazione e viene mostrata l'UI?
isNotDisplayed() Questa notifica è relativa a 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
isSkippedMoment() Questa notifica è per un momento saltato?
getSkippedReason()

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

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

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

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Restituire 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. La seguente tabella elenca i campi contenuti nell'oggetto di risposta delle credenziali:

Campo
credential Questo campo corrisponde al token ID restituito.
select_by Questo campo imposta la modalità di selezione delle credenziali.

la credenziale

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

Quando decodificato, il JWT ha il 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 contiene un identificatore univoco globale per l'Account Google.

Se utilizzi i campi email, email_verified e hd, puoi stabilire se Google ospita ed è autorevole di un indirizzo email. Nei casi in cui Google sia autorevole, l'utente è attualmente noto come proprietario legittimo dell'account.

Casi in cui Google è autorevole:

  • email ha un suffisso @gmail.com, questo è un account Gmail.
  • Il valore email_verified è vero e hd è impostato. Si tratta di un account Google Workspace.

Gli utenti possono creare Account Google senza utilizzare Gmail o Google Workspace. Se email non contiene un suffisso @gmail.com e hd è assente Google non è autorevole e si consigliano altri metodi di verifica della password o della verifica per verificare l'utente. email_verfied può essere valido anche quando Google ha verificato inizialmente l'utente quando è stato creato l'Account Google, tuttavia la proprietà dell'account email di terze parti potrebbe essere cambiata da allora.

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

seleziona_per

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

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

  • È stata rilevata 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

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

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

Valore Descrizione
auto Accesso automatico di un utente con una sessione esistente che in precedenza ha concesso il consenso per la condivisione delle credenziali.
user Un utente con una sessione esistente che aveva già concesso il consenso ha premuto il pulsante "Continua come" di One Tap per condividere le credenziali.
user_1tap Un utente con una sessione esistente ha premuto il pulsante "Continua come" di One Tap per concedere il consenso e condividere le credenziali. Si applica solo a Chrome v75 e versioni successive.
user_2tap Un utente senza una sessione esistente ha premuto il pulsante One Tap "Continua come" 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.
btn Un utente con una sessione esistente che in precedenza ha 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 ha 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 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.

Metodo: google.accounts.id.renderButton

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

Vedi il seguente esempio di codice del metodo:

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

Tipo di dati: GsiButtonConfiguration

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

Attributo
type Il tipo di pulsante: icona o pulsante standard.
theme Il tema del pulsante. Ad esempio, 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 "Accedi con Google".
shape La forma del pulsante. Ad esempio rettangolare o circolare.
logo_alignment Allineamento del logo di Google: sinistra o centro.
width La larghezza del pulsante, in pixel.
locale Se impostato, la lingua del pulsante viene mostrata.
click_listener Se impostata, questa funzione verrà richiamata quando fai clic sul pulsante Accedi con Google.

Tipi di attributi

Le seguenti sezioni contengono 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 Sì type: "icon"

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

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

tema

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

Tipo Obbligatorio Esempio
stringa Facoltativo theme: "filled_blue"

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

Tema
outline Tema standard dei pulsanti:
filled_blue Il tema del pulsante pieno di blu:
filled_black Tema con pulsante pieno di nero:

dimensioni

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

Tipo Obbligatorio Esempio
stringa Facoltativo size: "small"

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

Dimensioni
large Pulsante grande:
Pulsante standard grande Pulsante icona grande Un pulsante grande e personalizzato
medium Un pulsante di medie dimensioni:
Pulsante standard medio Pulsante icona Medio
small Un piccolo pulsante:
Un piccolo pulsante Un piccolo pulsante icona

testo

Il testo del pulsante. Il valore predefinito è signin_with. Non esistono differenze visive per il testo dei pulsanti delle icone 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 che segue 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 è "Accedi 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 tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo shape: "rectangular"

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

Shape
rectangular Il pulsante rettangolare. Se utilizzato per il tipo di pulsante icon, corrisponde a square.
pill Pulsante a forma di pillola. Se utilizzato per il tipo di pulsante icon, equivale a circle.
circle Il pulsante a forma di cerchio. Se viene utilizzato per il tipo di pulsante standard, equivale a pill.
square Il pulsante quadrato. Se viene utilizzato per il tipo di pulsante standard, equivale a rectangular.

allineamento_logo

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

Tipo Obbligatorio Esempio
stringa Facoltativo logo_alignment: "center"

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

allineamento_logo
left Allinea il logo di Google a sinistra.
center Allinea il centro al 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. Mostra il testo del pulsante nelle impostazioni internazionali specificate, altrimenti usa le impostazioni del browser o dell'Account Google dell'utente per impostazione predefinita. 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 possibilmente con dimensioni diverse.

Per ulteriori informazioni, consulta la tabella seguente:

Tipo Obbligatorio Esempio
stringa Facoltativo locale: "zh_CN"

click_listener

Puoi definire una funzione JavaScript da chiamare quando viene fatto clic sul pulsante Accedi con Google utilizzando l'attributo click_listener. 

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

Nell'esempio precedente, il messaggio Accedi con Google... viene eseguito nella console quando l'utente fa clic sul pulsante Accedi con Google.

Tipo di dati: credenziale

Quando viene richiamata la funzione native_callback, un oggetto Credential viene passato come parametro. La seguente tabella elenca i campi contenuti nell'oggetto:

Campo
id Identifica l'utente.
password Password

Metodo: google.accounts.id.disableAutoSelect

Quando l'utente si disconnette, devi chiamare il metodo google.accounts.id.disableAutoSelect per registrare lo stato nei cookie. In questo modo si evita un loop di inattività 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 è un semplice wrapper per il metodo store() dell'API nativa di gestione delle credenziali del browser. Pertanto, può essere utilizzata solo per archiviare una credenziale di password. Vedi il seguente esempio di codice del metodo:

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

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

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Metodo: google.accounts.id.cancel

Puoi annullare il flusso di One Tap se rimuovi la richiesta dal DOM del fornitore. 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 caricamento 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: google.accounts.id.revoke(hint, callback)

Parametro Tipo Descrizione
hint stringa L'indirizzo email o l'ID univoco dell'Account Google dell'utente. L'ID è la proprietà sub del payload del 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 richiamata la funzione callback, un oggetto RevocationResponse viene passato come parametro. La tabella seguente elenca i campi contenuti nell'oggetto risposta di revoca:

Campo
successful Questo campo indica il valore restituito della chiamata 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 è riuscita o su false in caso di errore.

errore

Questo campo è un valore stringa e contiene un messaggio di errore dettagliato se la chiamata al metodo di revoca non è andata a buon fine, non è definita correttamente.