Nesta seção, você entrará os componentes de experiência que podem ser utilizados com o by Unico
Loading...
Loading...
Loading...
Loading...
Nesta seção, você encontrará como implementar o SDK da Unico na sua aplicação web para uso do by Unico
O uso de integrações que não estejam em conformidade com os padrões estabelecidos nesta documentação pode resultar em interrupções inesperadas no funcionamento do sistema, as quais não serão cobertas ou suportadas pelo by Unico.
Ex: Implementar o SDK (iFrame) dentro de uma webview, implementar iFrame através de uma tag de HTML, etc.
Para utilizar o by Unico por meio do SDK do by Unico, o primeiro passo é cadastrar os domínios que serão utilizados como host para exibir o iFrame da jornada do usuário no by Unico.
Sinalize o responsável pelo seu projeto de integração ou o time de suporte da Unico para realizar essa configuração.
Para começar a usar o SDK, é necessário realizar a instalação do SDK Web da Unico. Vale destacar que o "by Unico" utiliza o mesmo SDK empregado no IDPay.:
Quando instalar o pacote do SDK da Unico, implemente sem especificar a versão que está utilizando e de modo que seu gerenciador de dependências atualize sempre os minors e patches para a versão mais recente.
Para verificar versões anteriores, acesse https://www.npmjs.com/package/idpay-b2b-sdk?activeTab=versions.
Esse método inicializa o SDK, fazendo um pré-carregamento de assets, criando a experiência mais fluida para o usuário final. Nesse momento é preciso enviar o token recebido como resultado do CreateProcess.
Parâmetros:
options - é um objeto com as seguintes propriedades de configuração:
type
O tipo de fluxo que será inicializado. No by Unico utilizamos a opção "IFRAME".
token
Recebe o token do processo criado. Esse token é importante para conseguirmos autenticar a jornada e garantir que somente domínios autorizados utilizem-na (pode ser obtido na criação do processo via API).
Esse método realiza a abertura da experiência do by Unico. Para o fluxo do tipo IFRAME, essa função exibe o iframe já pré-carregado, e inicia o fluxo de mensageria entre a página do cliente e a experiência do by Unico.
Parâmetros:
options - é um objeto com propriedades de configuração:
processId
Recebe o ID do processo criado. Esse ID é importante para conseguirmos obter os detalhes do processo e realizarmos todo o fluxo da maneira correta (pode ser obtido na criação do processo via API).
token
Recebe o token do processo criado. Esse token é importante para conseguirmos autenticar a jornada e garantir que somente domínios autorizados utilizem-na (pode ser obtido na criação do processo via API).
onFinish(process)
Recebe uma função de callback que será executada no término da jornada do by Unico, passando como argumento o objeto do processo com os seguintes dados: { captureConcluded, concluded, id }
O diagrama de sequência abaixo demonstra como utilizar o SDK e o resultado da API do by Unico para configurar o iFrame:
Após uma análise cuidadosa das necessidades e desafios que enfrentamos, decidimos adotar uma solução baseada em iframes com tokens de autenticação ao invés de implementar uma política de Content Security Policy (CSP). Essa escolha foi motivada por diversas considerações relacionadas à segurança e à flexibilidade necessárias para atender às demandas dos nossos clientes.
O Content Security Policy (CSP) é uma ferramenta poderosa para proteger aplicações web contra diversos tipos de ataques, como Cross-Site Scripting (XSS) e injeção de código. No entanto, ao configurar uma política CSP, é necessário definir uma lista rígida de domínios confiáveis. Essa abordagem é eficaz quando os domínios são fixos e previsíveis. No entanto, para nossos clientes, que frequentemente utilizam domínios dinâmicos e variáveis, essa configuração rígida apresenta desafios significativos.
Os domínios dinâmicos representam um risco substancial para a segurança ao usar CSP. Quando um cliente possui domínios que mudam com frequência ou são criados dinamicamente, seria necessário atualizar constantemente a política CSP para incluir esses novos domínios. Isso não só aumenta o esforço de manutenção, mas também expõe os domínios aos quais a política CSP se aplica. Cada domínio adicionado à política CSP é potencialmente um ponto de vulnerabilidade se não for adequadamente gerenciado.
Para mitigar esses riscos e atender à flexibilidade exigida pelos nossos clientes, optamos por utilizar iframes combinados com tokens de autenticação. Esta solução oferece uma camada adicional de segurança e evita a necessidade de expor ou gerenciar uma lista extensa e dinâmica de domínios.
Autenticação Segura: Cada iframe é carregado com um token de autenticação exclusivo para cada transação, garantindo que apenas usuários autorizados possam acessar o conteúdo. Esse token é verificado em tempo real, proporcionando uma camada adicional de segurança e controle.
Isolamento de Conteúdo: O uso de iframes permite isolar o conteúdo em um contexto separado, reduzindo o risco de interferência entre diferentes origens e mitigando potenciais ataques.
Flexibilidade para Domínios Dinâmicos: Ao não depender de uma política CSP estática, nossa solução se adapta facilmente aos domínios dinâmicos dos clientes, sem a necessidade de atualização constante das políticas de segurança.
Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.
Nesta seção, você encontrará como informações redirecionar um usuário em suas aplicações na experiência do by Unico
O campo userRedirectUrl é usado para direcionar o usuário. Esse campo é recebido na resposta de sucesso da criação do processo ao realizar a requisição CreateProcess.
Aqui você encontrará as 3 formas de gerenciar a experiência do usuário em suas aplicações:
Recomenda-se seguir os seguintes passos:
Em seu fluxo comum (que está inserido o Cadastro by Unico) você irá redirecionar o cliente para o link gerado através da API;
Após isso o cliente de dentro da plataforma realiza os procedimentos necessários para continuar o fluxo;
Quando concluído, ele é redirecionado para a sua página (utilizando o redirectUrl passado na criação do processo).
window.open()
:A opção window.open()
consiste em abrir uma nova aba do navegador do usuário para que ele possa completar o processo. Ao final essa aba é fechada e redirecionada para sua aplicação.
Para isso é recomendado:
Seguir a documentação pública sobre isso, que se encontra aqui;
Monitorar se houve alteração de URL (para a redirectUrl) e então fechar a aba utilizando window.close().
1 - Insira no app/build.gradle
a dependência necessária para o uso de CustomTabs:
Coloque no AndroidManifest.xml as permissões e intents necessários na Activity que deseja receber a callback_uri.
É necessário incluir o atributo android:launchMode="singleTop"
como também a tag <data>
informando os dados da URI.
As seguintes permissões são necessárias para funcionar corretamente:
Câmera;
Geolocalização.
Para pegar as informações de redirect com os dados fornecidos, você pode usar o seguinte código no método onNewIntent
da sua Activity:
1 - O primeiro passo é criar o controlador de autenticação, e, para isso crie uma classe chamada UnicoAuthenticationController
(ou como preferir chamar).
2 - Na sequência, importe o framework AuthenticationServices
no topo da classe.
3 - Declare a classe como NSObject e implemente o protocolo ASWebAuthenticationPresentationContextProviding
.
O resultado deve ser:
1 - Abra o arquivo onde você executa a autenticação e adicione as importações necessárias (como exemplo, o ContentView.swift é usado).
2 - Para controlar o estado do fluxo é preciso criar a propriedade @State
.
3 - Crie uma instância da classe UnicoAuthenticationController
fora do corpo da estrutura ContentView.
4 - Para a validação do processo, crie uma função chamada redirectUser
.
Ambientes:
Lembre-se de alterar a url URL_AUTHENTICATION
para a URL de autenticação recebida em seu processo e também o callbackURLScheme BUNDLE
para o redirect informado na criação do processo (o uso do Bundle Identifier de seu aplicativo é recomendado).
Autenticação única:
É importante setar prefersEphemeralWebBrowserSession
para true para garantir uma autenticação única por processo.
A integração da WebView na sua aplicação é de total responsabilidade do cliente, uma vez que esta funcionalidade não é oferecida como parte das bibliotecas ou SDKs da Unico. Por conta disso, não oferecemos suporte técnico para dúvidas ou problemas relacionados à implementação da WebView em seu aplicativo. Para obter orientações sobre a configuração, recomendamos consultar a documentação oficial da tecnologia utilizada em seu projeto (por exemplo, React Native, Flutter, etc).
Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.
Nesta seção, você encontrará todas as personalizações disponíveis no by Unico
O by Unico disponibiliza algumas personalizações em sua interface, adaptando-se às preferências do cliente para proporcionar uma experiência personalizada e significativa.
É possível personalizar a logo que é apresentada para o usuário final, conforma imagem abaixo:
Para solicitar a inclusão desta logo, é necessário enviar ao time Unico uma URL da logotipo, de modo que essa esteja hospedada em um diretório online (ou seja, esta logo precise ser acessível via URL no navegador).
Não é possível cadastrar uma URL que seja um base64 (geralmente essas URLs iniciam em "data:image/jpeg;base64,/9j/4AAQ...").
Para uma melhor renderização do logotipo, orientamos que utilize uma imagem iconográfica.
Ao longo do processo de implantação, é possível solicitar a configuração da cor e formato dos botões na interface no By Unico, de acordo com a identidade visual da empresa, conforme imagens abaixo:
Para realizar essa configuração, é só enviar as seguintes informações ao time Unico:
Código hexadecimal da cor de background no botão.
Ex: #000000.
Código hexadecimal da cor de texto no botão.
Ex: #ffffff.
Arredondamento dos cantos no botão em pixels.
Ex: 10px.
É possível personalizar a tela de contextualização que é apresentada para o usuário final no início da jornada, conforma imagem abaixo:
Para personalizar as informações na tela de contextualização, você deve alterar os valores dos parâmetros contidos no objeto contexualization
, no momento de realizar a chamada CreateProcess. O trecho na requisição que deve ser alterado é o seguinte:
Dúvidas?
Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.
Nesta seção, você encontrará o funcionamento do fluxo com QR Code para experiências desktop
O by Unico disponibiliza a funcionalidade de QR code para facilitar o fluxo em dispositivos desktop. Através do QR code, é possível iniciar o By Unico em uma experiência web sem ter que se preocupar se o dispositivo do usuário possui câmera ou não. Dessa forma:
Diminuímos a chance de falha na captura biométrica;
Garantimos uma melhor experiência em outras capacidades;
Aumentamos as chances de conversão.
Solicite a ativação da funcionalidade para o responsável pelo seu projeto.
Quando o usuário inicia o By Unico através de um dispositivo desktop:
Identificamos que é um dispositivo desktop e oferecemos o QR code para possa continuar a jornada pelo celular:
Uma vez escaneado, o usuário segue sua jornada no celular normalmente, enquanto o dispositivo desktop aguarda sua conclusão:
O dispositivo desktop identifica que a jornada foi concluída no celular e redireciona o usuário para a experiência de origem:
O usuário pode continuar sua jornada na experiência de origem no desktop normalmente:
Tamanho da tela: mínimo de 961px de largura;
Orientação da tela: paisagem;
User-Agent: não ser um dispositivo móvel.
Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.