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 sul tuo sito web. Non sono percepibili modifica l'esperienza utente One Tap 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.

    Una volta completata l'esperienza utente di One Tap, puoi visualizzarne il flusso successivo all'interno della iframe intermedio. Di conseguenza, One Tap e UX successiva possono essere incorporati nella pagina dei contenuti corrente. (vedi il seguente esempio).

    Un esempio di esperienza utente incorporata con un iframe intermedio.

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

  • Esegui l'integrazione una volta e mostra ovunque.

    Tutti i codici di integrazione One Tap (chiamata all'API One Tap e successiva UX di elaborazione) sono incapsulati nell'iframe intermedio. Nelle pagine di contenuti, in cui può essere visualizzato One Tap, devi solo incorporare la parte intermedia iframe.

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

  • Limita l'ambito di esposizione del token ID.

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

    La modalità iframe intermedia funziona bene anche con i siti web che includono un sottodominio relativo all'accesso dedicato (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 OAuth le risposte devono essere preregistrate nella console Google Cloud. Con uno normale Integrazione con Tap, gli sviluppatori devono preregistrarsi per tutti i domini che One Tap potrebbe essere visualizzato, poiché i token ID verranno restituiti a questi domini. Alcune i siti web consentono agli utenti di creare in modo dinamico domini secondari, impossibile preregistrarsi. Di conseguenza, One Tap non può essere visualizzato in creati in modo dinamico.

    Questo problema può essere risolto ricorrendo all'iframe intermedio. In questo caso, deve essere preregistrato solo il dominio dell'iframe intermedio. Là non è necessario registrare i domini delle pagine dei contenuti, in quanto i token ID non sono esposte a queste pagine di contenuti.

  • Rischi per la privacy.

    Gli sviluppatori devono adottare misure per evitare che gli iframe intermedi incorporati in domini imprevisti. Ad esempio, malware.com potrebbe incorporare i tuoi un iframe intermedio e mostrare quindi la tua esperienza utente di One Tap sul proprio sito web. Questo causeranno sicuramente molti problemi di privacy da parte degli utenti finali.

  • Rischi per la sicurezza.

    A causa del suddetto problema di inquadratura imprevisto, il team L'iframe non deve mai inviare dati sensibili su sicurezza o privacy all'elemento principale come token ID, valori dei cookie di sessione, dati utente e così via. La mancata questa regola può mettere in pericolo i tuoi siti web.

Esegui il rendering di un tocco nell'iframe intermedio

Per visualizzare One Tap all'interno dell'iframe intermedio, inserisci il seguente 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, viene eseguito Google One Tap in modalità iframe intermedia. Puoi impostare un dominio o un dominio separato da virgole domini 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 visualizzare di contenuti visibili agli utenti finali. Ad esempio, se chiedi informazioni aggiuntive sul profilo, o accettando 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>

Riassumendo, con l'iframe intermedio, i flussi UX completi di accesso o registrazione possono da implementare come UX incorporata.

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

  1. L'iframe intermedio è impostato come nascosto al termine dell'esperienza utente di 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 visibile. Quando il valore dell'attributo offsetHeight diventa disponibile, puoi: e ridimensionarla a un'altezza adatta.

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

Rimozione dell'iframe intermedio su UX completata

Devi comunicare alla pagina dei contenuti principali di rimuovere l'iframe intermedio quando il flusso UX. A questo scopo, puoi inserire il seguente snippet di codice il tuo codice di risposta all'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 su cui vuoi utilizzare Google One Tap da 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 dell'iframe intermedio.