Referência da API de iframe intermediária

Esta página de referência descreve como carregar um iframe intermediário em páginas HTML.

Observação: consulte a seção Integrar um toque usando um iframe para ver algumas informações importantes sobre o iframe intermediário.

Carregar a biblioteca intermediária JavaScript de iframe

Coloque o seguinte snippet de código em qualquer página HTML que você queira mostrar no Google One:

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

API HTML

É possível carregar o iframe intermediário incluindo um elemento HTML com o atributo de ID definido como g_id_intermediate_iframe. Confira o exemplo de snippet de código a seguir:

<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 com o ID "g_id_intermediate_iframe"

Você pode colocar os atributos de dados do iframe intermediários em elementos visíveis ou invisíveis, como <div> e <span>. O único requisito é que o ID do elemento seja definido como g_id_intermediate_iframe. Não coloque esse ID em vários elementos.

A tabela a seguir lista os atributos de dados com as respectivas descrições:

Atributo
data-src	O URI do iframe intermediário com um toque
data-done	Um método de callback JavaScript a ser acionado quando a UX com um toque for concluída.

dados-src.

Esse atributo é o URI do iframe intermediário com um toque. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
string	Sim	data-src="https://example.com/onetap_iframe.html"

dados concluídos

Esse atributo é um método de callback JavaScript acionado quando a UX com um toque é concluída.

Por padrão, a página de conteúdo é recarregada quando a UX com um toque é concluída. É possível substituir o comportamento padrão fornecendo seu próprio callback. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
Função	Opcional	data-done="onOneTapSuccess"

JavaScript API

Você pode carregar o iframe intermediário chamando um método JavaScript.

Método: google.accounts.id.InitializeIntermediate

O método google.accounts.id.initializeIntermediate carrega o iframe intermediário com base no objeto de configuração. Confira o exemplo de código do método a seguir:

google.accounts.id.initializeIntermediate(IntermediateConfig)

O exemplo de código abaixo implementa o método google.accounts.id.initializeIntermediate com uma função onload:

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

Tipo de dados: IntermediateConfig

A tabela a seguir lista os campos com as respectivas descrições:

Campo
src	O URI do iframe intermediário com um toque
done	Um método de callback JavaScript a ser acionado quando a UX com um toque for um.

src

Este campo é o URI do iframe intermediário com um toque. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
string	Sim	src: "https://example.com/onetap_iframe.html"

concluído

Esse campo é o método de callback JavaScript que será acionado quando a UX com um toque for concluída.

Por padrão, a página de conteúdo é recarregada quando a UX com um toque é concluída. É possível substituir o comportamento padrão fornecendo seu próprio callback. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
Função	Opcional	done: onOneTapSuccess