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 nella sezione Configurazione per configurare la schermata di consenso OAuth , ottenere un ID client e caricare la libreria client.

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

Rendering della richiesta

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

HTML

Visualizza il prompt One Tap, restituendo le credenziali 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 di dati personalizzati, che vengono inviati all'endpoint di accesso insieme al token ID emesso da Google.

Facoltativamente, utilizza l'attributo data-skip_prompt_cookie e un cookie per controllare se la richiesta One Tap viene visualizzata o meno nelle pagine HTML statiche in cui non puoi modificare i contenuti. Se il cookie specificato è impostato, la richiesta non viene visualizzata.

Utilizza l'attributo facoltativo data-context per modificare il testo utilizzato nel titolo della richiesta. 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 se imposti l'attributo data-cancel_on_tap_outside su false.

Per un elenco completo degli attributi supportati, consulta il riferimento g_id_onload.

JavaScript

Visualizza la richiesta One Tap, restituendo le credenziali JWT al gestore di 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(). Poi, chiama il metodo prompt() per visualizzare l'interfaccia utente della richiesta.

Utilizza il campo facoltativo context per modificare il testo utilizzato nel titolo della richiesta. 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 se imposti la proprietà cancel_on_tap_outside su false.

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

Stato della richiesta

Utilizza una funzione di callback JavaScript per ascoltare le notifiche sullo stato dell'interfaccia utente della richiesta.

Le notifiche vengono inviate nei seguenti momenti:

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

  • Momento di ignoramento: si verifica quando la richiesta One Tap viene chiusa da una cancellazione automatica, una cancellazione manuale o quando Google non riesce a emettere una credenziale, ad esempio quando la sessione selezionata è disconnessa da Google.

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

  • Momento di chiusura: 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 di chiusura.

HTML

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

<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 consentire agli utenti di accedere o registrarsi, puoi comunicare con più provider di identità per trovare le credenziali disponibili. Potresti voler conoscere lo stato dell'interfaccia utente della richiesta per poter chiamare il provider di identità successivo.

JavaScript

Passa il gestore di callback come parametro a google.accounts.id.prompt. Qui 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 richiesta

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

HTML

Visualizza sia il pulsante Accedi con Google sia la richiesta One Tap includendo 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 chiamando contemporaneamente 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 visualizza le richieste degli utenti sopra i contenuti della pagina.

Per assicurarsi 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 modifica del flusso UX può essere attivata anche quando viene coperto un solo pixel nei bordi.

Risposta delle credenziali

La risposta delle credenziali include 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.

Callback JS

Utilizza HTML o JavaScript per configurare una callback.

HTML

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

JavaScript

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

Ad esempio, handleCredentialResponse decodifica il JWT e stampa alcuni dei 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 a le impostazioni URI di reindirizzamento autorizzato del 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>

JavaScript

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