Referência da API de iframe intermediária

Esta página de referência descreve como carregar iframes intermediários em páginas HTML.

Carregar a biblioteca JavaScript de iframe intermediária

Coloque o snippet de código a seguir nas páginas HTML que você quer mostrar com o Google One Toque:

<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 ID definido como g_id_intermediate_iframe. Confira o snippet de código de exemplo 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 ID "g_id_intermediate_iframe"

É possível colocar os atributos de dados de iframe intermediários em qualquer elemento visível ou invisível, 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 do One Tap
data-done Um método de callback JavaScript para ser acionado quando a UX do One Tap for concluída.

data-src

Esse atributo é o URI do iframe intermediário do One Tap. 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 de JavaScript acionado quando a UX do One Tap é concluída.

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

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

JavaScript API

É possível 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 a seguir do método:

google.accounts.id.initializeIntermediate(IntermediateConfig)

O exemplo de código a seguir 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 e as respectivas descrições:

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

src

Esse campo é o URI do iframe intermediário do One Tap. 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 do One Tap for concluída.

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

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