Referencia de la API de iframe intermedio

En esta página de referencia, se describe la API de iframe intermedio, que se usa para incorporar el mensaje de One Tap en páginas web con un iframe.

Consulta Cómo integrar One Tap con un iframe para obtener más información sobre cómo trabajar con iframes intermedios.

Carga la biblioteca de JavaScript de Iframe intermedio

Coloca el siguiente fragmento de código en las páginas HTML que quieras que muestre Google One Tap:

<script src="https://accounts.google.com/gsi/intermediate"></script>

API de HTML

Puedes cargar el iframe intermedio si incluyes un elemento HTML con el atributo ID establecido en g_id_intermediate_iframe. Consulta el siguiente fragmento de código de ejemplo:

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

Elemento con el ID "g_id_intermediate_iframe"

Puedes colocar los atributos de datos del iframe intermedio en cualquier elemento visible o invisible, como <div> y <span>. El único requisito es que el ID del elemento esté establecido en g_id_intermediate_iframe. No coloques este ID en varios elementos.

En la siguiente tabla, se enumeran los atributos de datos con sus descripciones:

data-src

Este atributo es el URI de tu iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

data-done

Este atributo es un método de devolución de llamada de JavaScript que se activa cuando finaliza la UX de One Tap.

De forma predeterminada, la página de contenido se vuelve a cargar cuando finaliza la UX de Un toque. Puedes anular el comportamiento predeterminado si proporcionas tu propia devolución de llamada done. Consulta la siguiente tabla para obtener más información:

API de JavaScript

Puedes cargar el iframe intermedio llamando a un método de JavaScript.

Método: google.accounts.id.initializeIntermediate

El método google.accounts.id.initializeIntermediate carga el iframe intermedio según el objeto de configuración. Consulta el siguiente ejemplo de código del método:

google.accounts.id.initializeIntermediate(IntermediateConfig)

En el siguiente ejemplo de código, se implementa el método google.accounts.id.initializeIntermediate con una función onload:

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

Tipo de datos: IntermediateConfig

En la siguiente tabla, se enumeran los campos con sus descripciones:

src

Este campo es el URI de tu iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

listo

Este campo es el método de devolución de llamada de JavaScript que se activará cuando finalice la UX de One Tap.

De forma predeterminada, la página de contenido se vuelve a cargar cuando finaliza la UX de Un toque. Puedes anular el comportamiento predeterminado si proporcionas tu propia devolución de llamada done. Consulta la siguiente tabla para obtener más información: