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

Integrar One Tap por meio de um Iframe

O Google One Tap pode ser processado dentro de um iframe (doravante denominado Iframe intermediário) hospedado em seu próprio site. Não há nenhuma mudança perceptível no One Tap UX quando um iframe intermediário é usado.

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

  • UX incorporado para One Tap e fluxo de UX subsequente .

    Após a conclusão do One Tap UX, você pode exibir o fluxo de UX subsequente dentro do iframe intermediário. Assim, One Tap e UX subsequente podem ser incorporados na página de conteúdo atual. Veja um exemplo abaixo.

    Um exemplo de UX integrado com 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.

  • Integre uma vez e exiba em todos os lugares .

    Todo o código de integração do One Tap (invocação da API One Tap e tratamento de UX subsequente) são encapsulados no iframe intermediário. Nas páginas de conteúdo, onde o One Tap pode ser exibido, tudo que você precisa fazer é incorporar o iframe intermediário.

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

  • Limite o escopo de exposição do token de identificação .

    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.

    A forma de iframe intermediário também funciona bem com sites que já têm um subdomínio dedicado relacionado ao login (digamos, login.example.com) e vários subdomínios relacionados ao conteúdo (digamos, esportes.example.com e games.example.com) .

  • Um toque para exibir 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 API do Google. Com a integração normal do One Tap, os desenvolvedores precisam pré-registrar todos os domínios que o One Tap pode exibir, já que os tokens de ID serão devolvidos a esses domínios. Alguns sites permitem que seus usuários criem subdomínios dinamicamente, os quais são impossíveis de serem pré-registrados. Como resultado, o One Tap não pode ser exibido nesses subdomínios criados dinamicamente.

    Esse problema pode ser corrigido aproveitando o iframe intermediário. Nesse caso, apenas o domínio do iframe intermediário precisa ser pré-registrado. Não há necessidade de registrar os domínios da página de conteúdo, uma vez que os tokens de ID não são expostos a essas páginas de conteúdo.

  • Suporte AMP .

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

    1. Biblioteca ou código JS personalizado não é permitido.

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

    Esse problema pode ser corrigido aproveitando a arquitetura iframe intermediária. Depois que a integração do One Tap é feita em um iframe intermediário, os desenvolvedores podem incorporá-lo às 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 devem tomar medidas para evitar que iframes intermediários sejam incorporados em domínios inesperados. Por exemplo, malicioso.com pode incorporar seu iframe intermediário e, assim, exibir seu One Tap UX em seu site. Isso certamente causará muitas preocupações com a privacidade dos usuários finais.

  • Riscos de segurança .

    Devido ao problema de enquadramento inesperado mencionado acima, seu iframe intermediário nunca deve enviar dados confidenciais de segurança ou privacidade para seu frame pai, como tokens de ID, valores de cookies de sessão, dados de usuário etc. perigo.

Renderizar um toque no iframe intermediário

Para exibir o One Tap 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. Você pode 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 suportados.

(Opcional) Renderizar UX subsequente no Iframe intermediário

Na resposta de login, você pode retornar qualquer código HTML, que pode exibir algum conteúdo visível para os usuários finais. Por exemplo, pedir informações adicionais sobre o perfil ou concordar com os TOS, etc. Assim que a página for enviada, você poderá exibir outras páginas. Por exemplo, para pagamento ou assinatura, etc.

Você também tem a opção de redimensionar o iframe intermediário como abaixo.

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

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

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

  1. O iframe intermediário é definido como oculto quando One Tap UX é concluído.

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

Na primeira chamada, você pode redimensionar a altura do iframe para 1px apenas para torná-lo visível. Então, depois que o valor do atributo offsetHeight estiver disponível, você pode redimensioná-lo para uma 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 o One Tap UX.

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

Remover o Iframe intermediário no UX Concluído

Você deve notificar a página de conteúdo pai para remover o iframe intermediário quando o fluxo de UX for concluído. Para esse fim, você pode colocar o seguinte trecho de código em 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 em seu lugar.

Incorporar iframe intermediário em páginas HTML

Coloque o seguinte snippet de código em qualquer página HTML que você deseja 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 de seu iframe intermediário.