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 adelante, Iframe intermedio) alojado en tu propio sitio web. No se observa ningún cambio perceptible en la experiencia de usuario de One Tap cuando se usa un iframe intermedio.

La integración basada en marcos flotantes intermedios presenta algunas flexibilidades y riesgos:

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

    Una vez completada 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, en general, necesitas una navegación de página completa para mostrar el flujo de UX posterior, que puede ser intrusivo en algunos casos.

  • Integración única y Display en todas partes.

    Todo el código de integración de One Tap (invocación de la API de One Tap y control de UX posterior) está encapsulado en el iframe intermedio. En las páginas de contenido, en las que se puede mostrar 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 la integración y el mantenimiento.

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

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

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

  • Visualización de dominios con One Tap.

    De acuerdo con las políticas de OAuth de Google, todos los dominios que reciben respuestas de OAuth deben estar inscritos en el registro previo de la Consola de API de Google. Con la integración normal de One Tap, los desarrolladores deben prerregistrar todos los dominios que One Tap puede mostrar, ya que los tokens de ID se pasarán de nuevo a estos dominios. Algunos sitios web permiten que sus usuarios creen subdominios de forma dinámica, los cuales son imposibles para los registros previos. Como resultado, no se puede mostrar One Tap en estos subdominios creados de forma dinámica.

    Este problema se puede solucionar si se aprovecha el iframe intermedio. En este caso, solo el dominio del iframe intermedio debe inscribirse en el registro previo. 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, Google One Tap no se puede mostrar en las páginas de AMP por los siguientes motivos.

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

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

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

    Las mismas páginas de AMP y las que no son de AMP pueden reutilizar el mismo iframe intermedio.

  • Riesgos de privacidad.

    Los desarrolladores deben tomar medidas para evitar que los iframes intermedios se incorporen a dominios inesperados. Por ejemplo, maliciosa.com puede incorporar tu iframe intermedio y, por lo tanto, mostrar tu experiencia de usuario 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 privacidad o seguridad a su marco superior, como tokens de ID, valores de cookie de sesión, datos del usuario, etc. Si no se cumple esta regla, tus sitios web pueden estar en peligro.

Procesa 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, se ejecutará Google One Tap 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.

(Opcional) Procesa 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, puedes solicitar información de perfil adicional, aceptar las Condiciones del Servicio, etc. Una vez que envíes la página, podrás 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, cuando se usa un iframe intermedio, se pueden implementar los flujos de UX de acceso o de registro completos 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 se finaliza la UX con 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 superior 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 en la experiencia del usuario

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.

Cómo incorporar Iframe intermedio a 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.