Integrar One Tap mediante un iframe

El toque de Google One se puede renderizar dentro de un iframe (en adelante denominado Iframe intermedio) alojado en tu propio sitio web. No hay ningún cambio perceptible en la UX de One Tap cuando se usa un iframe intermedio.

La integración intermedia basada en iframe implica algunos riesgos y flexibilidad:

  • UX incorporada para One Tap y flujo de UX posterior.

    Una vez finalizada la UX de One Tap, puedes mostrar el flujo de UX posterior dentro del iframe intermedio. Por lo tanto, One Tap y la UX posterior pueden incorporarse en la página de contenido actual. Observe el siguiente ejemplo.

    Un ejemplo de la UX incorporada con iframe intermedio.

    Sin el iframe intermedio, por lo general, necesitas una navegación de página completa para mostrar el flujo de UX posterior, que puede ser invasivo en algunos casos.

  • Integra la función Una vez y muestra la pantalla en todas partes.

    Todo el código de integración de One Tap (invocación de la API de One Tap y manejo de la UX posterior) se encapsula en el iframe intermedio. En las páginas de contenido, donde podría mostrarse One Tap, lo único que debes hacer es incorporar el iframe intermedio.

    Esta arquitectura permite separar los problemas y, por lo tanto, disminuye el costo de integración y mantenimiento.

  • Limita el alcance de la exposición del token de ID.

    El iframe intermedio consume los tokens de ID directamente. Nunca están expuestos a las páginas de contenido. Esta arquitectura puede disminuir drásticamente el alcance de la exposición de los tokens de ID.

    El iframe intermedio también funciona bien con sitios web que ya tienen un subdominio dedicado relacionado con el acceso (por ejemplo, login.example.com) y varios subdominios relacionados con el contenido (por ejemplo, deportes.example.com y juegos.example.com).

  • Visualización de dominios con One Tap.

    Según las políticas de OAuth de Google, todos los dominios que reciben respuestas de OAuth deben tener un registro previo en la consola de Google Cloud. Con la integración normal con One Tap, los desarrolladores deben realizar el registro previo de todos los dominios que pueda mostrar One Tap, ya que los tokens de ID se pasarán a estos dominios. Algunos sitios web permiten a sus usuarios crear subdominios de forma dinámica, lo cual es imposible para el registro previo. Como resultado, One Tap no se puede mostrar en estos subdominios creados de forma dinámica.

    Este problema se puede solucionar aprovechando el iframe intermedio. En este caso, solo el dominio del iframe intermedio debe estar registrado previamente. No es necesario registrar los dominios de la página de contenido, ya que los tokens de ID no se exponen a ellas.

  • Compatibilidad con AMP.

    De forma predeterminada, no se puede mostrar el toque de Google One en las páginas de AMP por los siguientes motivos.

    1. No se permite la biblioteca o el código de JS personalizados.

    2. La caché de AMP puede renderizar la página desde otro dominio (del visor de AMP).

    Este problema se puede solucionar aprovechando la arquitectura intermedia de iframe. Después de realizar la integración con One Tap en un iframe intermedio, los desarrolladores pueden incorporarlo en las páginas de AMP agregando un componente <amp-onetap-google>.

    Las páginas de AMP y las páginas HTML que no son de AMP pueden volver a usar el mismo iframe intermedio.

  • Riesgos de Privacidad.

    Los desarrolladores deben tomar medidas para evitar que los iframes intermedios se incorporen en dominios inesperados. Por ejemplo, malicioso.com puede incorporar tu iframe intermedio y mostrar tu UX de One Tap en su sitio web. Esto definitivamente causará muchas inquietudes sobre la privacidad de los usuarios finales.

  • Riesgos de seguridad.

    Debido al problema inesperado de enmarcado mencionado anteriormente, tu iframe intermedio nunca debe enviar datos sensibles de seguridad o privacidad a su marco superior, como tokens de ID, valores de cookies de sesión, datos del usuario, etc. No seguir esta regla podría poner en peligro tus sitios web.

Cómo renderizar un toque en el iframe intermedio

Para mostrar One Tap dentro del iframe intermedio, coloca el siguiente fragmento de código en el código HTML del 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>

Si se usa el atributo data-allowed_parent_origin, el toque de Google One se ejecutará en el modo intermedio de iframe. Puedes configurar un dominio o una lista de dominios separados por comas como el valor del atributo. También se admiten subdominios de comodín.

(Opcional) Procesa la UX posterior en el Iframe intermedio

En la respuesta de acceso, puedes mostrar el código HTML que desees, lo que puede mostrar contenido visible para los usuarios finales. Por ejemplo, solicitar información adicional del perfil o aceptar las Condiciones del Servicio. Una vez que se envíe la página, puedes mostrar más páginas. Por ejemplo, para un pago o una suscripción.

Puedes cambiar el tamaño del iframe intermedio:

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

En resumen, con el iframe intermedio, los flujos completos de acceso o registro de UX se pueden implementar como UX incorporada.

Para la primera página después de la UX de One Tap, debes llamar al método notifyParentResize() dos veces debido a los siguientes motivos.

  1. El iframe intermedio se configura como oculto cuando finaliza la UX de One Tap.

  2. El valor del atributo offsetHeight de un elemento es 0 cuando está oculto.

En la primera llamada, puedes cambiar el tamaño de la altura del iframe a 1 px solo para que sea visible. Una vez que esté disponible el valor del atributo offsetHeight, podrás cambiar su tamaño a la altura adecuada.

En el siguiente código de ejemplo, se muestra cómo validar el origen superior y cambiar el tamaño del iframe intermedio para la IU después de la UX de 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>

Eliminar el iframe intermedio de UX listo

Debes notificar a la página de contenido superior para que quite el iframe intermedio cuando se complete el flujo de UX. Para ello, puedes colocar el siguiente fragmento de código en tu código de respuesta de acceso.

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

Si se omite el flujo de UX, se debe llamar al método notifyParentClose en su lugar.

Incorporar un iframe intermedio en páginas HTML

Coloca el siguiente fragmento de código en cualquiera de las páginas HTML que quieras que muestre 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>

El atributo data-src es el URI de tu iframe intermedio.