Integra One Tap tramite un iframe

Google One Tap può essere visualizzato all'interno di un iframe (di seguito denominato iframe intermedio) ospitato dal tuo sito web. Quando viene utilizzato un iframe intermedio, l'esperienza utente One Tap non subirà alcuna modifica.

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

  • UX 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 l'esperienza utente successiva possono essere incorporate nella pagina dei contenuti corrente. (vedi il seguente esempio).

    Esempio di UX incorporata con iframe intermedio.

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

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

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

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

  • Limita l'ambito di esposizione del token ID.

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

    L'iframe intermedio funziona bene anche con i siti web che hanno già un sottodominio dedicato relativo all'accesso (ad esempio, login.example.com) e più sottodomini correlati ai contenuti (ad esempio, sport.example.com e giochi.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 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 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 motivi elencati di seguito.

    1. La libreria o il codice JS personalizzato non è consentito.

    2. La cache AMP potrebbe visualizzare la pagina da un altro dominio (visualizzatore AMP).

    Questo problema può essere risolto sfruttando l'architettura intermedia dell'iframe. 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, dannosa.com potrebbe incorporare il tuo iframe intermedio e mostrare quindi la tua esperienza utente One Tap sul suo sito web. Sicuramente questo causerà molti problemi di privacy da parte degli utenti finali.

  • Rischi per la sicurezza.

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

Esegui il 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 intermedia. 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 qualsiasi 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. 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 breve, con l'iframe intermedio, i flussi UX completi di accesso o registrazione possono essere implementati come UX incorporata.

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

  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. Dopodiché, quando il valore dell'attributo offsetHeight diventa disponibile, puoi ridimensionarlo impostandolo sull'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 al termine dell'esperienza utente

Devi comunicare alla 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 in tutte le pagine HTML che vuoi mostrare con 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.