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.
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.
O iframe intermedi�rio � definido como oculto quando a UX com um toque � conclu�da.
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.