Integrar com um toque usando um iframe

O Google One Tap pode ser renderizado em um iframe (doravante denominado iframe intermediário) hospedado pelo seu próprio site. Não há nada perceptível mudar na UX com um toque quando um iframe intermediário for usado.

A integração intermediária baseada em iframe traz algumas flexibilidade 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 dentro do iframe intermediário. Assim, a experiência de um toque e a UX subsequente podem ser incorporadas na 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 você precisa de uma navegação de página inteira para exibir o fluxo de UX subsequente, que pode ser intrusivo em alguns casos.

  • Integre de uma vez e exiba em todos os lugares.

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

    Essa arquitetura permite a separação de problemas e diminui custos de integração e manutenção.

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

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

    A maneira intermediária com iframe também funciona bem com sites que já têm um subdomínio relacionado a login dedicado (por exemplo, login.example.com) e diversos subdomínios relacionados a conteúdo (por exemplo, esportes.example.com e games.example.com).

  • Exibição de domínios com um toque.

    Conforme exigido pelas políticas de OAuth do Google, todos os domínios que recebem OAuth as respostas precisam ser pré-registradas no console do Google Cloud. Com One normal Integração de toque, os desenvolvedores precisam fazer o pré-registro de todos os domínios com um toque poderão ser exibidos, pois os tokens de ID serão retornados a esses domínios. Algumas sites permitem que os usuários criem dinamicamente subdomínios, que são que não é possível fazer o pré-registro. Como resultado, não é possível mostrar um toque em esses subdomínios criados dinamicamente.

    Esse problema pode ser corrigido aproveitando 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, pois os tokens de ID não são expostos a essas páginas de conteúdo.

  • Riscos de privacidade.

    Os desenvolvedores precisam tomar medidas para evitar que os iframes intermediários sejam em domínios inesperados. Por exemplo, malicioso.com pode incorporar seu iframe intermediário e, assim, mostrar a UX de um toque no site. Isso com certeza causará muitas preocupações de privacidade dos usuários finais.

  • Riscos de segurança.

    Devido ao problema de enquadramento inesperado mencionado acima, sua equipe o iframe nunca deve enviar dados sensíveis de segurança ou privacidade ao pai. como tokens de ID, valores de cookies de sessão, dados do usuário etc. seguir essa regra pode colocar seus sites em perigo.

Renderizar com um toque no iframe intermediário

Para mostrar um toque dentro do iframe intermediário, insira o seguinte 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 for usado, o Google One Tap será executado no modo iframe intermediário. É possível definir um domínio ou uma lista de domínios como o valor do atributo. Subdomínios curinga também são aceitos.

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

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

É possível redimensionar o iframe intermediário:

<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 completos de UX de login ou inscrição podem ser implementados como UX incorporada.

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

  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 está oculto.

Na primeira chamada, você pode redimensionar a altura do iframe para 1 px apenas para que visíveis. Em seguida, depois que o valor do atributo offsetHeight estiver disponível, será possível redimensioná-la 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 interface após a UX com 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

Você precisa notificar a página de conteúdo principal para remover o iframe intermediário quando o fluxo de UX está concluído. Para isso, você pode colocar o seguinte snippet 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. como alternativa.

Incorporar iframe intermediário em páginas HTML

Coloque o snippet de código a seguir nas páginas HTML que você quer usar com o Google One Tap 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.