Popup vs. iFrame

O magic link pode ser aberto de 3 formas distintas: por meio de redirecionamento, de um popup ou dentro de um iFrame (no nosso projeto chamado Connect Start).


1. Redirecionamento

A forma mais simplista mas nem tão fluida de abrir o Connect é redirecionar o usuário para o magic link. Depois que o usuário passar por todas as telas do Connect, quando o usuário clicar no botão "Compartilhar" na nossa última tela, nós enviaremos o usuário de volta para a página de sucesso do cliente, a callback_url, e dentro dessa URL como query parameter enviaremos o código de autorização que representa o consentimento deste usuário.

COPIAR
// redirect()
window.location.href = MAGIC_LINK
// receiving the authorization code on my success page
https://meu-site.com.br/sucesso?code=<AUTH_CODE>

2. Popup

A segunda forma de disponibilizar o magic link é abrir um popup na página do cliente. O link pode ser aberto por meio de um CTA (call to action) de um botão por exemplo. Neste caso, depois que o usuário passar por todas as telas do Connect, nós simplesmente fecharemos o popup e enviaremos o código de autorização através de um evento chamado "message".

COPIAR
<button onclick="openGuiabolsoConnect()">Guiabolso Connect</button>
<script>
const openGuiabolsoConnect = () => {
window.open(MAGIC_LINK, 'gbConnectWindow', 'width=992,height=800');
};
</script>
COPIAR
window.addEventListener("message", handleGBData, false);
const handleGBData = message => {
const hasAuthCode = message?.data?.authcode;
const isGBCOrigin =
message?.origin === 'https://connect.guiabolso.com.br';
if (isGBCOrigin && hasAuthCode) {
const oauthcode = message?.data?.authcode;
console.log('@oauthcode', oauthcode);
}
};

3. iFrame (Connect Start)

Por fim a terceira forma de abrir o Connect é utilizando um iFrame de forma embedada na sua página. A experiência fica mais fluida e simples de ser gerenciada pelo cliente. Basta importar um pacote NPM na sua página e chamar uma função e você estará pronto para usar o Connect.

Para mais detalhes sobre como usar o Connect Start clique aqui

Anterior
1. Magic Link
Próximo
3. Como obter os Tokens?

© GuiaBolso Finanças Correspondente Bancário e Serviços LTDA 2020

O Guiabolso Connect utiliza cookies e tecnologias similares, como pixels e tags, para oferecer a melhor experiência para o usuário. Ao utilizar nossos serviços, você concorda com essa utilização. Mais detalhes no item 5 da nossa Política de Privacidade