Advertencia: Estos datos se proporcionan bajo la Política de datos de usuario de Google . Por favor revise y cumpla con la política. De lo contrario, podría resultar en la suspensión del proyecto o de la cuenta.

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 renderizar dentro de un iframe (en adelante, 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 aporta algunas flexibilidades y riesgos:

  • UX incorporada para One Tap y flujo de UX posterior

    Una vez que finaliza 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.

    Ejemplo de la UX incorporada con iframe intermedio.

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

  • Realiza la integración una vez y Display Everywhere.

    Todo el código de integración de One Tap (invocación de la API de One Tap y el control posterior de la UX) están encapsulados 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 la separación de los problemas y, por lo tanto, disminuye el costo de la integración y el mantenimiento.

  • Limita el alcance de 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 exposición de los tokens de ID.

    La forma intermedia de iframe también funciona bien con sitios web que ya tienen un subdominio de acceso dedicado (por ejemplo, acceso.example.com) y varios dominios relacionados con el contenido (por ejemplo, deportes.example.com y juegos.example.com).

  • Visualización de dominios con One Tap.

    Según lo que requieren las políticas de OAuth de Google, todos los dominios que reciben respuestas de OAuth deben estar registrados en la Consola de API de Google. Con la integración normal con One Tap, los desarrolladores deben realizar el registro previo de todos los dominios que One Tap puede mostrar, ya que los tokens de ID se pasarán a estos dominios. Algunos sitios web permiten que sus usuarios creen subdominios de forma dinámica, que son imposibles de inscribirse en el registro previo. Por lo tanto, no se puede mostrar One Tap en estos subdominios creados de forma dinámica.

    Para solucionar este problema, se debe usar el iframe intermedio. En este caso, solo se debe realizar el registro previo del 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 ellas.

  • Asistencia de AMP.

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

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

    2. La caché de AMP puede renderizar otro formulario de dominio (AMP Viewer).

    Para solucionar este problema, puedes usar la arquitectura de iframe intermedia. Después de que se realiza la integración de One Tap en un iframe intermedio, los desarrolladores pueden incorporar un componente <amp-onetap-google>

    Se puede volver a usar el mismo iframe intermedio tanto en páginas de AMP como en páginas HTML que no son de AMP.

  • Riesgos de privacidad.

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

  • Riesgos de seguridad.

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

Renderizar One Tap en el iframe intermedio

Para mostrar One Tap en el 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 de comodines.

(Opcional) Renderiza la UX posterior en el Iframe intermedio

En la respuesta de acceso, puedes mostrar cualquier código HTML, que puede mostrar contenido visible para los usuarios finales. Por ejemplo, para solicitar información de perfil adicional o 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, entre otros.

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, se pueden implementar los flujos completos de UX de acceso o de registro como UX incorporada.

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

  1. El iframe intermedio está oculto cuando se presiona 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 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 de 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>

Cómo quitar el iframe intermedio de la UX

Debes notificar a la página de contenido superior para que quite 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.

Incorporar Iframe intermedio en páginas HTML

Coloca el siguiente fragmento de código en cualquier página HTML que 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.