Integra One Tap tramite un iframe

Il rendering di Google One Tap può essere eseguito all'interno di un iframe (di seguito denominato iframe intermedio) ospitato dal tuo sito web. L'esperienza utente di One Tap non subirà modifiche percepibili quando viene utilizzato un iframe intermedio.

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

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

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

    Un esempio di UX incorporata con iframe intermedio.

    Senza l'iframe intermedio, di solito è necessaria una navigazione completa nelle pagine per visualizzare il successivo flusso UX, che in alcuni casi potrebbe essere invadente.

  • Integrazione una volta sola e visualizzazione ovunque.

    Tutto il codice di integrazione One Tap (chiamate all'API One Tap e successiva gestione dell'UX) vengono incapsulati nell'iframe intermedio. Sulle pagine di contenuti, su cui potrebbe essere visualizzato One Tap, è sufficiente incorporare l'iframe intermedio.

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

  • Limita l'ambito di esposizione dei token ID.

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

    Il metodo iframe intermedio funziona bene anche con i siti web che hanno già un sottodominio dedicato all'accesso (ad esempio login.example.com) e più sottodomini correlati ai contenuti (ad esempio, Sports.example.com e Games.example.com).

  • Visualizzazione dei domini con un tocco.

    Come richiesto dai criteri OAuth di Google, tutti i domini che ricevono risposte OAuth devono essere preregistrati nella console Google Cloud. Con la normale integrazione One Tap, gli sviluppatori devono preregistrare tutti i domini che One Tap potrebbe mostrare, poiché i token ID verranno restituiti a questi domini. Alcuni siti web consentono agli utenti di creare dinamicamente sottodomini che non possono essere preregistrati. Di conseguenza, One Tap non può essere visualizzato 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 delle pagine di contenuti, poiché i token ID non vengono 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. La libreria o il codice JS personalizzato non è consentito.

    2. La cache AMP può visualizzare la pagina da un altro dominio (il visualizzatore AMP).

    Questo problema può essere risolto sfruttando l'architettura iframe intermedio. Dopo aver eseguito l'integrazione One Tap in un iframe intermedio, gli sviluppatori possono incorporarlo 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 l'incorporamento degli iframe intermedi in domini imprevisti. Ad esempio, dannosi.com potrebbe incorporare il tuo iframe intermedio e quindi visualizzare la tua UX One Tap sul suo sito web. Questo causerà sicuramente molte preoccupazioni per la privacy da parte degli utenti finali.

  • Rischi per la sicurezza.

    A causa del suddetto problema di inquadratura imprevisto, l'iframe intermedio non deve mai inviare dati sensibili per la sicurezza o la privacy al frame principale, ad esempio token ID, valori dei cookie di sessione, dati utente e così via. La mancata osservanza di questa regola potrebbe mettere in pericolo i tuoi siti web.

Rendering con 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 viene utilizzato l'attributo data-allowed_parent_origin, Google One Tap viene eseguito in modalità iframe intermedio. Puoi impostare un dominio o un elenco di domini separati 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 qualsiasi codice HTML, che potrebbe mostrare alcuni contenuti visibili agli utenti finali. come chiedere ulteriori informazioni del profilo o accettare i TdS. Una volta inviata la pagina, puoi visualizzare altre pagine. ad esempio per un pagamento o un abbonamento.

Puoi ridimensionare l'iframe intermedio:

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

In sintesi, con l'iframe intermedio, i flussi UX completi di accesso o registrazione possono essere implementati come UX incorporata.

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

  1. L'iframe intermedio è impostato su nascosto al termine dell'esperienza utente One Tap.

  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 renderlo visibile. Quando il valore dell'attributo offsetHeight diventa disponibile, puoi ridimensionarlo impostandolo un'altezza adatta.

Il codice di esempio seguente mostra come convalidare l'origine principale e ridimensionare l'iframe intermedio per l'interfaccia utente dopo l'esperienza utente 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 all'esperienza utente terminata

Devi informare la pagina dei contenuti principali di 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, è necessario chiamare il metodo notifyParentClose.

Incorpora 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 dell'iframe intermedio.