Integrar um toque com um iframe

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

O Google One Tap pode ser renderizado dentro de um iframe (doravante conhecido como iframe intermediário) hospedado pelo seu próprio site. Não há nenhuma mudança perceptível na UX de um toque quando um iframe intermediário é usado.

A integração intermediária com base em iframe apresenta algumas flexibilidades e riscos:

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

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

    Um exemplo de UX incorporada com um iframe intermediário.

    Sem o iframe intermediário, normalmente você precisa de uma navegação de página inteira para exibir o fluxo de UX subsequente, o que pode ser intrusivo em alguns casos.

  • Integrar uma vez e exibir em todos os lugares.

    Todo o código de integração de um toque (invocação da API One Tap e processamento subsequente de UX) é encapsulado no iframe intermediário. Em páginas de conteúdo em que um toque pode ser exibido, basta incorporar o iframe intermediário.

    Essa arquitetura permite a separação de problemas e, assim, diminui o custo de integração e manutenção.

  • Limite o escopo da exposição do token de ID.

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

    O modo intermediário do iframe 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).

  • Um toque para exibir domínios.

    Conforme exigido pelas políticas de 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 com um toque, os desenvolvedores precisam registrar todos os domínios que um toque pode exibir, já que os tokens de ID serão retornados a esses domínios. Alguns sites permitem que os usuários criem subdomínios dinamicamente, o que impossibilita o pré-registro. Como resultado, um toque não pode ser exibido nesses subdomínios criados dinamicamente.

    É possível corrigir esse problema com o 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 da página de conteúdo, porque os tokens de ID não são expostos a essas páginas de conteúdo.

  • Suporte a AMP.

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

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

    2. O cache de AMP pode renderizar o formulário da página como outro domínio (Visualizador de AMP)

    É possível corrigir esse problema com a arquitetura de iframe intermediária. Depois que a integração com um toque for feita em um iframe intermediário, os desenvolvedores poderão incorporá-lo a páginas AMP adicionando um componente <amp-onetap-google>

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

  • Riscos de privacidade.

    Os desenvolvedores precisam adotar medidas para impedir que os iframes intermediários sejam incorporados a domínios inesperados. Por exemplo, o site maliciosa.com.br pode incorporar seu iframe intermediário e, assim, exibir a UX com um toque no site dele. Isso traz muitas preocupações de privacidade para os 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 cookie de sessão, dados do usuário etc. Se você não seguir essa regra, seus sites poderão ficar em perigo.

Renderizar com 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. Também é possível usar subdomínios curinga.

(Opcional) Renderizar a UX subsequente no iframe intermediário

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

Você também pode redimensionar o iframe intermediário 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 completos podem ser implementados como UX incorporada.

Na primeira página após a UX de um toque, é necessário chamar o método notifyParentResize() duas vezes pelos motivos abaixo.

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

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

Na primeira chamada, você pode redimensionar a altura do iframe em 1 px apenas para torná-lo visível. 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 mãe e redimensionar o iframe intermediário da 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 na UX concluída

É preciso notificar a página de conteúdo pai para remover o iframe intermediário quando o fluxo de UX terminar. Para isso, coloque o snippet de código a seguir no seu 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

Insira o snippet de código a seguir em qualquer página HTML que você queira que o Google One Tap exiba:

<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 seu iframe intermediário.