Advertencia: estos datos se proporcionan en virtud de la Política de datos de usuario de Google . Revise y cumpla con la política. De no hacerlo, podría resultar en la suspensión del proyecto o de la cuenta.

Integre One Tap a través de un iframe

Google One Tap se puede representar dentro de un iframe (en lo sucesivo, Iframe intermedio) alojado en su propio sitio web. No hay ningún cambio perceptible en One Tap UX cuando se usa un iframe intermedio.

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

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

    Una vez que se realiza One Tap UX, puede mostrar el flujo de UX posterior dentro del iframe intermedio. Por lo tanto, One Tap y la UX posterior pueden integrarse en la página de contenido actual. Vea un ejemplo a continuación.

    Un ejemplo de UX integrado con iframe intermedio.

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

  • Integre una vez y visualice en todas partes .

    Todo el código de integración de One Tap (invocación de API de One Tap y posterior manejo de UX) se encapsula en el iframe intermedio. En las páginas de contenido, donde se puede mostrar One Tap, todo lo que necesita hacer es incrustar el iframe intermedio.

    Esta arquitectura permite la separación de preocupaciones y, por lo tanto, disminuye su costo de integración y mantenimiento.

  • Limite el alcance de exposición del token de identificación .

    Los tokens de ID son consumidos directamente por el iframe intermedio. Nunca están expuestos a las páginas de contenido. Esta arquitectura puede reducir drásticamente el alcance de exposición de los tokens de identificación.

    La forma de iframe intermedio también funciona bien con sitios web que ya tienen un subdominio dedicado relacionado con el inicio de sesión (por ejemplo, login.example.com) y varios subdominios relacionados con el contenido (por ejemplo, sports.example.com y games.example.com). .

  • Visualización de dominios con un toque .

    Como lo requieren las políticas de OAuth de Google, todos los dominios que reciben respuestas de OAuth deben registrarse previamente en la Consola 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 identificación se devolverán a estos dominios. Algunos sitios web permiten a sus usuarios crear dinámicamente subdominios, que son imposibles de prerregistrar. Como resultado, One Tap no se puede mostrar en estos subdominios creados dinámicamente.

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

  • Soporte AMP .

    De forma predeterminada, Google One Tap no se puede mostrar en las páginas de AMP debido a algunas de las razones a continuación.

    1. No se permiten bibliotecas o códigos JS personalizados.

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

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

    Tanto las páginas AMP como las páginas HTML que no son AMP pueden reutilizar el mismo iframe intermedio.

  • Riesgos de privacidad .

    Los desarrolladores deben tomar medidas para evitar que los iframes intermedios se incrusten en dominios inesperados. Por ejemplo, malicioso.com puede incrustar su iframe intermedio y, por lo tanto, mostrar su One Tap UX en su sitio web. Esto definitivamente causará muchas preocupaciones de privacidad por parte de los usuarios finales.

  • Riesgos de seguridad .

    Debido al problema de encuadre inesperado mencionado anteriormente, su iframe intermedio nunca debe enviar datos confidenciales de seguridad o privacidad a su marco principal, como tokens de identificación, valores de cookies de sesión, datos de usuario, etc. peligro.

Renderizar un toque en el iframe intermedio

Para mostrar One Tap dentro del iframe intermedio, coloque 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. Puede establecer un dominio o una lista de dominios separados por comas como valor de atributo. También se admiten subdominios comodín.

(Opcional) Renderice la experiencia de usuario posterior en el iframe intermedio

En la respuesta de inicio de sesión, puede devolver cualquier código HTML, que puede mostrar algún contenido visible para los usuarios finales. Por ejemplo, solicitar información de perfil adicional o aceptar los TOS, etc. Una vez que se envía la página, puede mostrar más páginas. Por ejemplo, para pago o suscripción, etc.

También tiene la opción de 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 inicio de sesión completo o de registro se pueden implementar como UX integrado.

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

  1. El iframe intermedio se establece como oculto cuando se realiza One Tap UX.

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

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

El siguiente código de ejemplo muestra cómo validar el origen principal y cambiar el tamaño del iframe intermedio para la interfaz de usuario después de One Tap UX.

<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

Debe notificar a la página de contenido principal para eliminar el iframe intermedio cuando finalice el flujo de UX. Con este fin, puede colocar el siguiente fragmento de código en su código de respuesta de inicio de sesión.

<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 notifyParentClose método notifyParentClose en su lugar.

Incrustar iframe intermedio en páginas HTML

Coloque el siguiente fragmento de código en cualquier página HTML que desee 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 su iframe intermedio.