Avviso:questi dati sono forniti ai sensi delle Norme sui dati utente di Google. Leggi e rispetta le norme. In caso contrario, il progetto o l'account potrebbero essere sospesi.

Integra One Tap tramite iframe

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Google One Tap può essere visualizzato all'interno di un iframe (di seguito denominato iframe intermedio) ospitato sul tuo sito web. Non viene rilevata alcuna variazione su One Tap UX quando si utilizza un iframe intermedio.

L'integrazione intermedia basata su iframe presenta alcune flessibilità e rischi:

  • Esperienza utente integrata per One Tap e flusso UX successivo.

    Al termine dell'esperienza utente con One Tap, puoi visualizzare il successivo flusso UX all'interno dell'iframe intermedio. Pertanto, One Tap e la successiva UX possono essere incorporati nella pagina dei contenuti corrente. (vedi il seguente esempio).

    Un esempio di UX incorporata con iframe intermedio.

    Senza l'iframe intermedio, di solito hai bisogno di una navigazione a pagina intera per visualizzare il flusso UX successivo, che in alcuni casi potrebbe essere invadente.

  • Integra una volta e display ovunque.

    Tutto il codice di integrazione di One Tap (chiamata API One Tap e successiva gestione UX) è incapsulato nell'iframe intermedio. Nelle pagine di contenuti, dove può essere visualizzato un tocco, è sufficiente incorporare l'iframe intermedio.

    Questa architettura consente di separare i problemi, riducendo così i costi di integrazione e manutenzione.

  • Limita l'ambito dell'esposizione dei token ID.

    I token ID vengono consumati direttamente dall'iframe intermedio. Non vengono mai esposti alle pagine di contenuti. Questa architettura potrebbe ridurre drasticamente l'ambito dell'esposizione dei token ID.

    Questo metodo funziona bene anche con i siti web che dispongono già di un sottodominio specifico per l'accesso (ad esempio, login.example.com) e per più sottodomini correlati ai contenuti (ad esempio Sports.example.com e game.example.com).

  • Domini con un solo tocco.

    Come stabilito dai criteri OAuth di Google, tutti i domini che ricevono risposte OAuth devono essere preregistrati in Google API Console. Con la normale integrazione di One Tap, gli sviluppatori devono preregistrarsi, Alcuni siti web consentono agli utenti di creare dinamicamente sottodomini che è impossibile preregistrarsi. Di conseguenza, non è possibile visualizzare One Tap in questi sottodomini creati dinamicamente.

    Questo problema può essere risolto sfruttando l'iframe intermedio. In questo caso, è necessario preregistrare solo il dominio dell'iframe intermedio. Non è necessario registrare i domini delle pagine di contenuti, poiché i token ID non sono esposti a queste pagine di contenuti.

  • Supporto AMP.

    Per impostazione predefinita, Google One Tap non può essere visualizzato nelle pagine AMP a causa di alcuni motivi indicati di seguito.

    1. Non sono consentiti codici o librerie JS personalizzati.

    2. La cache AMP potrebbe visualizzare il formato della pagina di un altro dominio (visualizzatore AMP).

    Questo problema può essere risolto sfruttando l'architettura iframe intermedia. Una volta completata l'integrazione con One Tap in un iframe intermedio, gli sviluppatori possono incorporarla nelle pagine AMP aggiungendo un componente <amp-onetap-google>.

    Lo stesso iframe intermedio può essere riutilizzato sia da pagine AMP sia da pagine HTML non AMP.

  • Rischi per la privacy.

    Gli sviluppatori devono adottare misure per impedire che gli iframe intermedi vengano incorporati in domini imprevisti. Ad esempio, male.com potrebbe incorporare il tuo iframe intermedio e, quindi, mostrare la tua UX One Tap sul suo sito web. Questo comporterà molte preoccupazioni sulla privacy da parte degli utenti finali.

  • Rischi per la sicurezza.

    A causa del suddetto problema di frame imprevisto, l'iframe intermedio non deve mai inviare dati sensibili o relativi alla sicurezza al frame principale, ad esempio token ID, valori dei cookie della sessione, dati utente e così via. La mancata conformità alla regola potrebbe mettere a rischio i siti web.

Visualizza One Tap nell'iframe intermedio

Per visualizzare One Tap all'interno dell'iframe intermedio, inserisci il seguente snippet di codice nel codice HTML dell'iframe intermedio:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

Se è presente l'attributo data-allowed_parent_origin, Google One Tap verrà eseguito in modalità iframe intermedio. Puoi impostare un dominio o un elenco di domini separato da virgole come valore dell'attributo. Sono supportati anche i sottodomini con caratteri jolly.

(Facoltativo) Visualizza l'esperienza utente successiva nell'iframe intermedio

Nella risposta di accesso, puoi restituire il codice HTML, che potrebbe mostrare alcuni contenuti visibili agli utenti finali. Ad esempio, la richiesta di ulteriori informazioni del profilo o l'accettazione dei TdS, ecc. Una volta inviata la pagina, puoi visualizzare ulteriori pagine. Ad esempio, per pagamento o abbonamento e così via.

Puoi anche ridimensionare l'iframe intermedio come di seguito.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

In sintesi, con un iframe intermedio, i flussi di accesso UX o di accesso completo possono essere implementati come UX incorporato.

Per la prima pagina dopo l'esperienza utente di One Tap, devi richiamare due volte il metodo notifyParentResize() a causa dei motivi riportati di seguito.

  1. L'iframe intermedio è impostato in modo da essere nascosto al termine dell'esperienza utente One Tap.

  2. Quando viene nascosto, il valore dell'attributo offsetHeight di un elemento è 0.

Nella prima chiamata, puoi ridimensionare l'altezza dell'iframe a 1 px per renderla visibile. Poi, quando il valore dell'attributo offsetHeight è disponibile, puoi ridimensionarlo in base all'altezza appropriata.

Il seguente codice di esempio mostra come convalidare l'origine principale e ridimensionare l'iframe intermedio per l'interfaccia utente dopo l'esperienza utente con One Tap.

<script>
    window.onload = () => {
      google.accounts.id.intermediate.verifyParentOrigin(
          ["https://example.com","https://example-com.cdn.ampproject.org"],
          () => {
            google.accounts.id.intermediate.notifyParentResize(1);
            window.setTimeout(() => {
              let h = document.getElementById('container').offsetHeight;
              google.accounts.id.intermediate.notifyParentResize(h);
            }, 200);
          },
          () => {
            document.getElementById('container').style.display = 'none';
            document.getElementById('warning').innerText =
                'Warning: the page is displayed in an unexpected domain!';
          }
      );
    };
</script>

Rimuovi l'iframe intermedio sull'esperienza utente

Al termine del flusso UX, devi inviare una notifica alla pagina di contenuti principali per rimuovere l'iframe intermedio. A tal fine, puoi inserire il seguente snippet di codice nel codice di risposta di accesso.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Se il flusso UX viene saltato, devi chiamare il metodo notifyParentClose.

Incorporare iframe intermedio nelle pagine HTML

Inserisci il seguente snippet di codice nelle pagine HTML che vuoi che vengano visualizzate da Google One Tap:

<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
        data-src = "https://example.com/onetap_iframe.html">
</div>

L'attributo data-src è l'URI del tuo iframe intermedio.