Mostra Google One Tap

Aggiungi una richiesta One Tap al tuo sito per consentire agli utenti di registrarsi o accedere alla tua app web. Utilizza HTML e JavaScript per eseguire il rendering e personalizzare la richiesta.

Prerequisiti

Segui i passaggi descritti in Configurazione per configurare la schermata per il consenso OAuth, ottenere un ID client e caricare la libreria client.

Aggiungi un pulsante Accedi con Google alla tua pagina di accesso.

Rendering dei prompt

Inserisci uno snippet di codice in tutte le pagine in cui vuoi che venga visualizzato One Tap.

HTML

Mostra la richiesta One Tap, restituendo la credenziale JWT a un endpoint di accesso.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

L'attributo data-login_uri è l'URI dell'endpoint di accesso della tua app web. Puoi aggiungere attributi dati personalizzati, che vengono inviati all'endpoint di accesso insieme al token ID emesso da Google.

Utilizza l'attributo data-context per modificare il testo utilizzato nel titolo del prompt. Ad esempio, data-context: "signup" cambia "Accedi a" in "Registrati a".

Per impostazione predefinita, la richiesta One Tap si chiude automaticamente se l'utente fa clic al di fuori della richiesta. Puoi disattivare questo comportamento impostando l'attributo data-cancel_on_tap_outside su falso.

Per un elenco completo degli attributi supportati, consulta la documentazione di riferimento g_id_onload.

JavaScript

Mostra la richiesta One Tap, restituendo la credenziale JWT al gestore del callback JavaScript del browser.

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

Per configurare la richiesta One Tap in JavaScript, devi prima chiamare il metodo initialize(). Quindi, chiama il metodo prompt() per visualizzare l'UI della richiesta.

Utilizza il campo context per modificare il testo utilizzato nel titolo del prompt. Ad esempio, context: 'signup' cambia "Accedi a" in "Registrati a".

Per impostazione predefinita, la richiesta One Tap si chiude automaticamente se l'utente fa clic al di fuori della richiesta. Puoi disattivare questo comportamento impostando la proprietà cancel_on_tap_outside su false.

Per l'elenco completo delle opzioni di dati, consulta la documentazione di riferimento di idConfiguration.

Punto chiave: utilizza il generatore di codice per personalizzare in modo interattivo One Tap e per creare snippet di codice da utilizzare nel tuo sito web.

Stato del prompt

Utilizza una funzione di callback JavaScript per ascoltare le notifiche relative allo stato dell'interfaccia utente del prompt.

Le notifiche vengono inviate per i seguenti momenti:

• Momento di visualizzazione:si verifica dopo la chiamata del metodo prompt(). La notification contiene un valore booleano per indicare 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 riesce a emettere una credenziale, ad esempio quando la sessione selezionata ha eseguito la disconnessione da Google.

  In questo caso, ti consigliamo di passare ai fornitori di identità successivi, se presenti.

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

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

HTML

Utilizza l'attributo data-moment_callback per specificare una funzione di callback JavaScript. Per ricevere le notifiche è necessario un gestore di callback.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Per semplificare l'accesso o la registrazione degli utenti, puoi comunicare con più fornitori di servizi di identità per trovare le credenziali disponibili. Ti consigliamo di conoscere lo stato della nostra UI di richiesta per poter chiamare il prossimo provider di identità.

JavaScript

Passa il gestore del callback come parametro a google.accounts.id.prompt, dove viene utilizzata una funzione freccia per gestire gli aggiornamenti delle notifiche.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Pulsante e prompt

Il pulsante Accedi con Google e la richiesta One Tap possono essere visualizzati insieme in una singola pagina.

HTML

Mostra sia il pulsante Accedi con Google sia la richiesta One Tap includendo entrambi gli elementi g_id_onload e g_id_signin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Visualizza il pulsante Accedi con Google e la richiesta One Tap richiamando contemporaneamente entrambe le funzioni renderButton() e prompt().

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

Non coprire One Tap

Questa sezione si applica solo quando FedCM è disattivato. Quando FedCM è attivato, il browser mostra le richieste all'utente sopra i contenuti della pagina.

Per assicurarti che gli utenti finali vedano tutte le informazioni visualizzate, Google One Tap non deve essere coperto da altri contenuti. In caso contrario, in alcuni casi potrebbero essere attivate finestre popup.

Controlla attentamente il layout della pagina e le proprietà z-index degli elementi per assicurarti che Google One Tap non sia coperto da altri contenuti in nessun momento. La variazione del flusso UX può essere attivata anche quando è coperto un solo pixel nei bordi.

Punto chiave: non coprire Google One Tap con altri contenuti.

Attenzione: non nascondere i contenuti della richiesta One Tap. Non oscurare la percezione che i contenuti della richiesta One Tap provengano da un iframe di Google. In caso contrario, il progetto o l'account potrebbero essere sospesi.

Risposta delle credenziali

Nella risposta delle credenziali è incluso un JWT firmato da Google. La risposta viene restituita al browser utilizzando una funzione di callback JavaScript o alla tua piattaforma tramite un reindirizzamento a un endpoint di accesso.

Importante: dopo aver ricevuto il JWT, ti consigliamo vivamente di verificare il token ID Google sul tuo server.

Callback JS

Utilizza HTML o JavaScript per configurare un callback.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

Nota: non puoi impostare sia l'attributo data-login_uri sia l'attributo data-callback.

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

Nota: non puoi impostare sia il campo login_uri che il campo callback.

Ad esempio, handleCredentialResponse decodifica il JWT e stampa alcuni tra i campi del token ID nella console.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

Reindirizzamento

Per restituire una credenziale all'endpoint di accesso della tua piattaforma, aggiungi l'URL alle impostazioni dell'URI di reindirizzamento autorizzato del tuo client web OAuth 2.0.

Utilizza HTML o JavaScript per configurare un URI di reindirizzamento.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

Nota: non puoi impostare sia l'attributo data-login_uri sia l'attributo data-callback.

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});

Nota: non puoi impostare sia il campo login_uri che il campo callback.