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.