Integra One Tap tramite iframe

Google One Tap può essere visualizzato all'interno di un iframe (di seguito denominato "iframe intermedio) ospitato nel tuo sito web. Non viene applicata alcuna modifica all'UX di One Tap quando viene utilizzato un iframe intermedio.

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

  • UX incorporata per One Tap e successivo flusso UX.

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

    Un esempio dell'UX incorporata con iframe intermedio.

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

  • Esegui l'integrazione una sola volta e visualizza ovunque.

    Tutto il codice di integrazione One Tap (chiamata all'API One Tap e successiva gestione UX) viene incapsulato nell'iframe intermedio. Nelle pagine di contenuti in cui potrebbe essere visualizzato One Tap, è sufficiente incorporare l'iframe intermedio.

    Questa architettura consente di separare i problemi e di conseguenza riduce i costi di integrazione e manutenzione.

  • Limita l'ambito di esposizione del token ID.

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

    L'iframe intermedio funziona anche con i siti web che hanno già un sottodominio dedicato per l'accesso (come login.example.com) e più sottodomini per i contenuti (ad esempio, sport.example.com e game.example.com).

  • Visualizzare domini con un tocco.

    Come richiesto dai criteri OAuth di Google, tutti i domini che ricevono risposte OAuth devono essere preregistrati nella console API di Google. Con la normale integrazione One Tap, gli sviluppatori devono preregistrare tutti i domini che One Tap potrebbe visualizzare, poiché i token ID verranno trasferiti a questi domini. Alcuni siti web consentono ai propri utenti di creare dinamicamente sottodomini che non è possibile preregistrare. Di conseguenza, non è possibile visualizzare One Tap in questi sottodomini creati dinamicamente.

    Questo problema può essere risolto utilizzando l'iframe intermedio. In questo caso, solo il dominio dell'iframe intermedio deve essere preregistrato. Non è necessario registrare i domini della pagina di contenuti, in quanto 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 dei seguenti motivi.

    1. Non sono consentiti codici o librerie JS personalizzati.

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

    Questo problema può essere risolto sfruttando l'architettura dell'iframe intermedio. Una volta completata l'integrazione 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 da pagine AMP e da pagine HTML non AMP.

  • Rischi per la privacy.

    Gli sviluppatori devono adottare misure per evitare che gli iframe intermedi vengano incorporati in domini imprevisti. Ad esempio, dannose.com potrebbe incorporare il tuo iframe intermedio e, quindi, visualizzare la tua UX di One Tap nel suo sito web. Questo causerà sicuramente molte preoccupazioni per la privacy degli utenti finali.

  • Rischi per la sicurezza.

    A causa del suddetto problema di frame imprevisto, l'iframe intermedio non deve mai inviare dati sensibili di sicurezza o privacy al frame principale, come token ID, valori dei cookie di sessione, dati utente e così via. Il mancato rispetto di questa regola potrebbe mettere a rischio i tuoi siti web.

Visualizza un tocco 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 valore di 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, puoi richiedere informazioni aggiuntive sul profilo o accettare i TdS e così via. Dopo aver inviato la pagina, puoi visualizzare ulteriori pagine. Ad esempio per pagamenti o abbonamenti 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>

Per riassumere, con l'iframe intermedio, i flussi UX completi di accesso o registrazione possono essere implementati come UX incorporati.

Per la prima pagina dopo l'esperienza utente di One Tap, devi chiamare il metodo notifyParentResize() due volte per i motivi seguenti.

  1. L'iframe intermedio è impostato su nascosto quando l'esperienza utente One Tap è completa.

  2. Il valore dell'attributo offsetHeight di un elemento è 0 quando è nascosto.

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

Il seguente codice di esempio mostra come convalidare l'origine padre e ridimensionare l'iframe intermedio per l'UI dopo One Tap UX. 

<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 nell'esperienza utente completata

Devi inviare una notifica alla pagina dei contenuti principali per rimuovere l'iframe intermedio al termine del flusso UX. A questo scopo, 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 ignorato, devi chiamare il metodo notifyParentClose.

Incorporare iframe intermedio nelle pagine HTML

Inserisci il seguente snippet di codice nelle pagine HTML che vuoi che Google One tocchi tocca per visualizzare:

<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.