O Google One Tap pode ser renderizado dentro de um iframe (doravante denominado iframe intermediário) hospedado por seu próprio site. Não há mudanças perceptíveis na UX de um toque quando um iframe intermediário é usado.
A integração intermediária baseada em iframe traz algumas flexibilidades e riscos:
UX integrada para um toque e fluxo de UX subsequente.
Depois que a UX de um toque for concluída, será possível exibir o fluxo subsequente de UX dentro do iframe intermediário. Assim, um toque e a UX subsequente podem ser incorporados à página de conteúdo atual. Veja um exemplo a seguir.
Sem o iframe intermediário, normalmente é necessário uma navegação de página inteira para exibir o fluxo subsequente da UX, que pode ser intrusivo em alguns casos.
Integrar e exibir em qualquer lugar.
Todo o código de integração de um toque (invocação da API One Tap e processamento de UX subsequente) são encapsulados no iframe intermediário. Nas páginas de conteúdo, onde um toque pode ser exibido, basta incorporar o iframe intermediário.
Essa arquitetura permite a separação de problemas e, portanto, diminui o custo de integração e manutenção.
Limite o escopo da exposição do token de ID.
Os tokens de ID são consumidos diretamente pelo iframe intermediário. Elas nunca são expostas às páginas de conteúdo. Essa arquitetura pode reduzir drasticamente o escopo da exposição dos tokens de ID.
O iframe intermediário também funciona bem com sites que já têm um subdomínio dedicado relacionado ao login (por exemplo, login.example.com) e vários subdomínios relacionados ao conteúdo (por exemplo, esportes.example.com e games.example.com).
Um toque para exibir domínios.
Conforme exigido pelas políticas de OAuth do Google, todos os domínios que recebem respostas de OAuth precisam ser pré-registrados no Console de APIs do Google. Com a integração normal com um toque, os desenvolvedores precisam fazer o pré-registro de todos os domínios que um toque pode exibir, já que os tokens de ID serão retornados a esses domínios. Alguns sites permitem que os usuários criem dinamicamente subdomínios, que são impossíveis de serem pré-registrados. Como resultado, um toque não pode ser exibido nesses 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, já que os tokens de ID não são expostos a essas páginas.
Suporte a AMP.
Por padrão, o Google One Tap não pode ser exibido nas páginas AMP por alguns motivos abaixo.
Não é permitido usar códigos ou bibliotecas JS personalizados.
O cache de AMP pode renderizar o domínio da página como outro domínio (visualizador de AMP).
Esse problema pode ser corrigido aproveitando a arquitetura de iframe intermediária. Depois que a integração com um toque for feita em um iframe intermediário, os desenvolvedores poderão incorporá-lo a páginas AMP adicionando um componente <amp-onetap-google>.
O mesmo iframe intermediário pode ser reutilizado por páginas AMP e HTML não AMP.
Riscos de privacidade.
Os desenvolvedores precisam tomar medidas para impedir que os iframes intermediários sejam incorporados a domínios inesperados. Por exemplo, o site malicioso.com pode incorporar seu iframe intermediário e exibir sua UX de um toque no site dele. Isso causa muitas preocupações com a privacidade dos usuários finais.
Riscos de segurança.
Devido ao problema de enquadramento inesperado mencionado acima, o iframe intermediário nunca deve enviar dados confidenciais de segurança ou privacidade para o frame pai, como tokens de ID, valores de cookies de sessão, dados do usuário etc. Se você não seguir essa regra, seus sites poderão ficar em perigo.
Renderizar um toque no iframe intermediário
Para exibir um toque 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. É possível definir um domínio ou uma lista de domínios separados por vírgulas como o valor do atributo. Subdomínios com caracteres curinga também são aceitos.
(Opcional) Renderizar a UX subsequente no iframe intermediário
Na resposta de login, é possível retornar qualquer código HTML que possa exibir conteúdo visível aos usuários finais. Por exemplo, peça mais informações sobre o perfil, concorde com os TOS etc. Depois que a página for enviada, você vai poder exibir mais páginas. Por exemplo, pagamento ou assinatura etc.
Você também tem a opção de redimensionar o iframe intermediário, como mostrado abaixo.
<script src="https://accounts.google.com/gsi/intermediatesupport"></script> <script> google.accounts.id.intermediate.notifyParentResize(320); </script>
Em resumo, com o iframe intermediário, os fluxos completos de UX de login ou inscrição podem ser implementados como uma UX incorporada.
Na primeira página após a UX com um toque, é necessário chamar o método notifyParentResize()
duas vezes pelos motivos abaixo.
O iframe intermediário é definido como oculto quando a UX de um toque é concluída.
O valor de atributo
offsetHeightde um elemento é 0 quando ele está oculto.
Na primeira chamada, você pode redimensionar a altura do iframe para 1 px apenas para torná-lo
visível. Depois, quando o valor do atributo offsetHeight estiver disponível,
você poderá redimensioná-lo para a altura adequada.
O código de exemplo a seguir mostra como validar a origem do pai e redimensionar o iframe intermediário para a IU 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 da UX concluída
Você precisa notificar a página de conteúdo pai para remover o iframe intermediário quando o fluxo de UX for concluído. Para isso, coloque o snippet de código a seguir no 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.
Incorporar iframe intermediário em páginas HTML
Coloque o snippet de código a seguir em qualquer página HTML que você quer que o Google One Toque 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.