Aviso: esses dados são fornecidos de acordo com a Política de dados do usuário do Google . Revise e cumpra a política. Não fazer isso pode resultar na suspensão do projeto ou da conta.

Integrar um toque com um iframe

O Google One Tap pode ser renderizado dentro de um iframe (chamado posteriormente de "iframe intermediário") hospedado pelo seu próprio site. Não há mudança perceptível em UX com um toque quando um iframe intermediário é usado.

A integração intermediária baseada em iframe traz algumas flexibilidades e riscos:

  • UX incorporada para um toque e fluxo de UX subsequente.

    Depois que a UX de um toque for concluída, você poderá exibir o fluxo de UX subsequente no iframe intermediário. Assim, tanto o One Tap quanto a UX subsequente podem ser incorporados à página de conteúdo atual. Veja um exemplo a seguir.

    Um exemplo de UX incorporada com iframe intermediário.

    Sem o iframe intermediário, normalmente uma navegação de página inteira é necessária para exibir o fluxo de UX subsequente, o que pode ser invasivo em alguns casos.

  • Integrar uma vez e exibir em todos os lugares.

    Todo o código de integração com um toque (invocação da API One Tap e processamento subsequente de UX) é encapsulado no iframe intermediário. Nas páginas de conteúdo, com um toque, tudo o que você precisa fazer é incorporar o iframe intermediário.

    Essa arquitetura permite a separação de preocupações e, portanto, diminui o custo de integração e manutenção.

  • Limitar o escopo da exposição do token de código.

    Os tokens de ID são consumidos diretamente pelo iframe intermediário. Elas nunca são expostas às páginas de conteúdo. Essa arquitetura pode reduzir drasticamente o escopo da exposição dos tokens de ID.

    O iframe intermediário também funciona bem com sites que já têm um subdomínio dedicado relacionado a login (por exemplo, login.example.com) e vários subdomínios relacionados a conteúdo (por exemplo, esportes.example.com e jogos.example.com).

  • Toque com um toque na exibição de domínios.

    Conforme exigido pelas políticas OAuth do Google, todos os domínios que recebem respostas OAuth precisam ser pré-registrados no Console de APIs do Google. Com a integração normal do One Tap, os desenvolvedores precisam fazer o pré-registro de todos os domínios que um toque pode exibir, já que os tokens de ID serão retornados para esses domínios. Alguns sites permitem que os usuários criem dinamicamente subdomínios, que não podem ser pré-registrados. Como resultado, um toque não pode ser exibido nesses subdomínios criados dinamicamente.

    O problema pode ser corrigido com o uso do iframe intermediário. Nesse caso, somente o domínio do iframe intermediário precisa ser pré-registrado. Não é necessário registrar os domínios dessas páginas porque os tokens de ID não estão expostos a elas.

  • Suporte a AMP.

    Por padrão, o Google One Tap não pode ser exibido nas páginas AMP devido a alguns motivos abaixo.

    1. Não é permitido usar a biblioteca ou o código JavaScript personalizado.

    2. O cache de AMP pode renderizar a página de outro domínio (visualizador de AMP).

    Esse problema pode ser corrigido aproveitando a arquitetura intermediária de iframe. Depois que a integração com um toque for concluída em um iframe intermediário, os desenvolvedores poderão incorporá-la a páginas AMP adicionando um componente <amp-onetap-google>

    O mesmo iframe intermediário pode ser reutilizado por páginas AMP e não HTML para AMP.

  • Riscos de privacidade.

    Os desenvolvedores precisam tomar medidas para impedir que os iframes intermediários sejam incorporados a domínios inesperados. Por exemplo, o malicioso.com pode incorporar seu iframe intermediário e, assim, exibir a UX com um toque no site. Isso deixará dúvidas sobre a privacidade dos usuários finais.

  • Riscos de segurança.

    Devido ao problema de enquadramento inesperado mencionado acima, o iframe intermediário nunca deve enviar dados confidenciais de segurança ou privacidade para o frame pai, como tokens de ID, valores de cookies de sessão, dados do usuário etc. Caso não siga essa regra, seus sites poderão ficar em risco.

Renderizar um toque no Iframe intermediário

Para exibir um toque dentro do iframe intermediário, coloque o seguinte snippet de código no código HTML do iframe intermediário:

<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>

Se o atributo data-allowed_parent_origin estiver presente, o Google One Tap será executado no modo iframe intermediário. É possível definir um domínio ou uma lista de domínios separados por vírgulas como o valor do atributo. Subdomínios curinga também são aceitos.

(Opcional) Renderizar UX subsequente no iframe intermediário

Na resposta de login, é possível retornar qualquer código HTML que possa exibir conteúdo visível para os usuários finais. Por exemplo, para pedir informações adicionais do perfil, concordar com TOS etc. Depois que a página for enviada, será possível exibir mais páginas. Por exemplo, para pagamento, assinatura etc.

Também é possível redimensionar o iframe intermediário como no exemplo abaixo.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

Em resumo, com o iframe intermediário, os fluxos de UX de login ou inscrição podem ser implementados como uma UX incorporada.

Na primeira página após a UX de um toque, você precisa chamar o método notifyParentResize() duas vezes devido aos motivos abaixo.

  1. O iframe intermediário é definido como oculto quando a UX com um toque é concluída.

  2. O valor do atributo offsetHeight de um elemento é 0 quando ele está oculto.

Na primeira chamada, é possível redimensionar a altura do iframe para 1 px apenas para torná-lo visível. Em seguida, depois que o valor do atributo offsetHeight estiver disponível, você poderá redimensioná-lo para a altura adequada.

O código de exemplo a seguir mostra como validar a origem pai e redimensionar o iframe intermediário para a IU após a UX de um toque.

<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>

Remoção do iframe intermediário em UX concluída

Você precisa notificar a página de conteúdo pai para remover o iframe intermediário quando o fluxo de UX for concluído. Para isso, é possível colocar o snippet de código a seguir no código de resposta de login.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Se o fluxo de UX for ignorado, o método notifyParentClose precisará ser chamado.

Incorporar iframe intermediário em páginas HTML

Coloque o snippet de código a seguir em qualquer página HTML em que você queira usar o Google One Toque para exibir:

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

O atributo data-src é o URI do iframe intermediário.