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.

  

  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.

  Aviso: sua UX subsequente também é exposta a um enquadramento inesperado. Atacantes pode forjar um URL para incorporar diretamente uma interface da sua UX subsequente. Tenha verifique a origem do iframe pai em todas as etapas da UX subsequente.
  Importante :verifique a origem do pai chamando a API verifyParentOrigin em a biblioteca de suporte iframe intermediária em todas as etapas do seu fluxos de UX subsequentes.
  Observação: não é necessário chamar a API verifyParentOrigin ao exibir um toque. Um toque já realiza a verificação. Chame apenas o método verifyParentOrigin ao implementar a UX seguinte.

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

  Aviso: o iframe intermediário não pode enviar tokens OAuth, cookies de sessão valores ou dados do usuário para o frame pai.

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.

Aviso: adicione o atributo allow="identity-credentials-get" a todos os níveis de frames pais se o app chamar a API One Tap de iframes de origem cruzada. Caso seu aplicativo use a API de iframe intermediária para incorporar um toque, não atributo adicional é necessário, já que ele oferece suporte a iframes de origem cruzada do FedCM. No entanto, se você incorporar uma página usando a API de iframe intermediária no outro iframe, é preciso adicionar o atributo a todos os iframes pais.

Observação: o iframe intermediário precisa estar em um iframe. Confirme se as configurações de front-end permitem isso.

Observação: use o atributo data-skip_prompt_cookie para alternar a exibição com um toque. com base no status do cookie da sua sessão.

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

Observação: para fins de simplicidade e segurança, o iframe intermediário e todas as As interfaces precisam ter a mesma origem.

Aviso: verifique o domínio da página mãe em cada carregamento de página para evitar erros iframe.

Dica :use os métodos utilitários na biblioteca de suporte intermediária iframe para verifique a origem do frame pai ou redimensione o iframe intermediário.

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.

Importante :chame notifyParentDone() ou notifyParentClose() quando o fluxo de UX é concluído ou ignorado, para permitir que o frame pai remova o iframe intermediário.

Observação :é possível retornar uma página HTML sem conteúdo visível, apenas para chamar a o método notifyParentDone ou notifyParentClose.

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.

Observação: duas bibliotecas JavaScript são fornecidas para intermediários baseados em iframe integração total. A biblioteca intermediária de iframe (com URLs como ".../gsi/intermediate") é usado para incorporar iframes intermediários no conteúdo HTML. páginas de destino. A biblioteca de suporte intermediária iframe (com URLs como ".../gsi/intermediatesupport") é usado pela UX subsequente para manipular o inframe intermediário.

Observação: consulte Mostrar um toque em páginas AMP para saber como incorporar o iframe intermediário. em páginas AMP.