Integrar One Tap mediante un iframe

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

La integración intermedia basada en iframe ofrece algunas flexibilidad y riesgos:

  • 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 en el iframe intermedio. De este modo, One Tap y las UX posteriores pueden estar incorporadas a 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, se necesita una navegación de página completa para mostrar el flujo de UX posterior, que puede ser invasivo en algunos casos.

  • Integrar una vez y Mostrar en todas partes.

    Todo el código de integración de One Tap (invocación de la API de One Tap y UX posterior) se encapsulan en el iframe intermedio. En las páginas de contenido, donde se puede mostrar One Tap, solo tienes que incorporar el intermedio iframe.

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

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

    El iframe intermedio consume directamente los tokens de ID. Son que nunca se expusieron a las páginas de contenido. Esta arquitectura puede generar disminuir el alcance de la exposición de tokens de ID.

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

  • Dominios que muestran un solo toque

    Tal como lo exigen las políticas de OAuth de Google, todos los dominios que reciben OAuth las respuestas se deben registrar previamente en la consola de Google Cloud. Con One normal Integración táctil, los desarrolladores deben realizar el registro previo de todos los dominios que One Tap puede mostrarse, ya que los tokens de ID se pasarán de vuelta a estos dominios. Algunos los sitios web permiten a los usuarios crear subdominios de forma dinámica, que son Es imposible prerregistrar. Por lo tanto, One Tap no se puede mostrar en estos subdominios creados de forma dinámica.

    Para solucionar este problema, puedes aprovechar el iframe intermedio. En este caso, Solo el dominio del iframe intermedio debe estar registrado previamente. Hay registrar los dominios de la página de contenido, ya que los tokens de ID no expuestos a estas páginas de contenido.

  • Riesgos de privacidad.

    Los desarrolladores deben tomar medidas para evitar que los iframes intermedios incorporadas en dominios inesperados. Por ejemplo, malicioso.com puede incorporar iframe intermedio y, por lo tanto, mostrar tu UX de One Tap en su sitio web. Esta sin duda causará muchas preocupaciones de privacidad por parte de los usuarios finales.

  • Riesgos de seguridad.

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

Renderiza One Tap en el Iframe intermedio

Para mostrar One Tap dentro del iframe intermedio, coloca el siguiente 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, se ejecuta Google One Tap. en modo iframe intermedio. Puedes configurar un dominio o una coma de lista de dominios como valor del atributo. También se admiten subdominios comodines.

(Opcional) Renderizar la UX posterior en el Iframe intermedio

En la respuesta de inicio de sesión, puedes mostrar cualquier código HTML, que puede mostrar algún el contenido visible para los usuarios finales. Por ejemplo, solicitar información adicional en tu perfil, ni aceptar las Condiciones del Servicio. Una vez que se envía 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 de la siguiente manera:

<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 la UX de acceso o registro se pueden implementarse como UX incorporada.

Para la primera página después de la UX de One Tap, debes llamar a notifyParentResize(). dos veces por 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 sean visibles. Una vez que esté disponible el valor del atributo offsetHeight, podrás y cambiarle el 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 en UX Done

Debes notificar a la página de contenido superior para que quite el iframe intermedio cuando haya terminado el flujo de UX. Para ello, puedes colocar el siguiente fragmento de código en el 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 las páginas HTML que quieras de Google One Tap. 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.