Integra One Tap mediante un iframe

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Google One Tap se puede procesar dentro de un iframe (en lo sucesivo, Iframe intermedio) alojado en tu propio sitio web. No se percibe ningún cambio en la UX de One Tap cuando se usa un iframe intermedio.

La integración intermedia basada en iframe proporciona algunas flexibilidades y riesgos:

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

    Una vez que finalice la UX de One Tap, podrás mostrar el flujo de UX posterior dentro del iframe intermedio. Por lo tanto, One Tap y la UX posterior se pueden incorporar a la página de contenido actual. Observe el siguiente ejemplo.

    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 una vez y muestra en todas partes.

    Todo el código de integración de One Tap (invocación de la API de One Tap y control posterior de la UX) está encapsulado en el iframe intermedio. En las páginas de contenido, donde es posible que se muestre One Tap, lo único que debes hacer es incorporar el iframe intermedio.

    Esta arquitectura permite separar las inquietudes 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 se exponen a las páginas de contenido. Esta arquitectura puede disminuir drásticamente el alcance de exposición de los tokens de ID.

    La forma de iframe intermedia 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 un toque.

    De acuerdo con las políticas de OAuth de Google, todos los dominios que reciben respuestas de OAuth deben estar registrados previamente en la Consola de la API de Google. Con la integración normal de One Tap, los desarrolladores deben preinscribir todos los dominios que One Tap pueda mostrar, ya que los tokens de ID se pasarán de nuevo a estos dominios. Algunos sitios web permiten a sus usuarios crear subdominios de forma dinámica, que son imposibles de prerregistrarse. Como resultado, One Tap no se puede mostrar en estos subdominios creados de forma dinámica.

    Este problema se puede solucionar si aprovechas el iframe intermedio. En este caso, solo se debe prerregistrar el dominio del iframe intermedio. No es necesario registrar los dominios de la página de contenido, ya que los tokens de ID no están expuestos a estas páginas.

  • Asistencia de AMP.

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

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

    2. La caché de AMP puede representar la página de otro dominio (AMP Viewer).

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

    El mismo iframe intermedio puede ser reutilizado por páginas AMP y no HTML de AMP.

  • Riesgos de privacidad.

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

  • Riesgos de seguridad.

    Debido al problema de enmarcado inesperado anterior, tu iframe intermedio nunca debe enviar datos sensibles a la seguridad o la privacidad a su marco superior, como tokens de ID, valores de cookie de sesión, datos del usuario, etc. Si no se cumple esta regla, es posible que tus sitios web estén en peligro.

Procesa One Tap 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 presenta el atributo data-allowed_parent_origin, Google One Tap se ejecutará en el modo iframe intermedio. Puedes establecer un dominio o una lista de dominios separados por comas como el valor del atributo. También se admiten subdominios comodín.

Procesa la UX posterior en el Iframe intermedio (opcional)

En la respuesta de acceso, puedes mostrar cualquier código HTML, que puede mostrar contenido visible para los usuarios finales. Por ejemplo, solicitar información de perfil adicional, aceptar las Condiciones del Servicio, etc. Una vez que se envía la página, puedes mostrar más páginas. Por ejemplo, para pagos o suscripciones, etc.

También puedes cambiar el tamaño del iframe intermedio, como se muestra a continuación.

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

En resumen, con iframe intermedio, los flujos de UX de acceso o registro completos 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 oculta cuando finaliza la experiencia de usuario 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. Luego, una vez que el valor del atributo offsetHeight esté disponible, puedes cambiar su tamaño a la altura adecuada.

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

Se quitó el Iframe intermedio de UX.

Debes notificar a la página de contenido principal para quitar el iframe intermedio cuando finalice 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.

Cómo incorporar Iframe intermedio en páginas HTML

Coloca el siguiente fragmento de código en cualquier página HTML donde quieras que Google One presione para mostrar:

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