ℹ️ Conteúdo em atualização

Estamos revisando estes procedimentos. Pessoas técnicas podem encontrar ajustes em códigos de erro ou mapeamentos de payload; valide com os logs e o OpenAPI mais recente. Pessoas não técnicas podem continuar usando o passo a passo e acionar o time de suporte caso algo pareça diferente do descrito.

🌐 Utilizando a WebView em Janela Popup (Web)

Este documento explica como utilizar a WebView de biometria como uma janela popup na aplicação web.

Visão Geral

Também é possível utilizar a WebView como uma janela popup na web. Nesse cenário, a biometria deixa de ser utilizada em uma WebView embarcada, mas continuaremos utilizando esse termo para referência.

Implementação Básica

Abrindo a Biometria via Popup

let popupWindow = undefined;

function abrirBiometria() {
  const params = `width=${innerWidth - 14},height=${innerHeight},top=${screenTop + 10},left=${screenLeft + 7}`
  
  // Se já está aberta, então apenas foca no popup
  if (popupWindow) {
    popupWindow.focus();
    return;
  }
  
  // Abrir a janela pop-up
  popupWindow = window.open(
    'https://credline-angular.web.app/unico/#/com-interacao',
    'Popup',
    params
  );
  
  // Adicionar um evento para escutar mensagens do pop-up
  window.addEventListener('message', event => {
    // Verificar se a mensagem veio do pop-up
    if (event.source === popupWindow) {
      if (event.data === 'loaded') { // DOM da webview carregou
        // Evento OnInit deve ser disparado após o DOM da webview ter sido carregado
        popupWindow.postMessage(
          {
            type: 'OnInit',
            detail: {
              authorization: 'token_de_authorization',
              token: 'token_do_cliente',
              theme: {
                primaryColor: '#000000',
              },
              allowedOrigin: location.origin,
              isOperador: false,
            }
          },
          '*' // é necessário para que o browser envie a mensagem para a janela popup
        );
        return;
      }
      
      // Exibir a mensagem recebida do pop-up
      console.log('Mensagem recebida do pop-up:', event.data);
      
      switch (event.data.type) {
        case 'OnFinished':
          fecharPopup();
          
          if (event.data.detail.decision === 'CLOSE') {
            exibirErro('Janela de captura fechada pelo usuário');
            return;
          }
          
          enviarFotoAPI(event.data.detail.base64);
          break;
        case 'OnError':
          fecharPopup();
          exibirErro(event.data.detail.message || 'Houve um erro durante o processo de captura');
          break;
        default:
          break;
      }
    }
  });
}

Tratamento de Eventos

Evento 'loaded'

Quando o DOM da WebView é carregado, ela envia a mensagem 'loaded'. Neste momento, você deve disparar o evento OnInit com os parâmetros necessários.

Evento 'OnFinished'

Indica que o processo de captura foi concluído. Verifique o campo decision para determinar o resultado:

• CLOSE: Usuário fechou a janela
• APPROVED ou DENIED: Resultado da validação

Evento 'OnError'

Indica que ocorreu um erro durante o processo. Trate o erro apropriadamente e feche o popup.

Janela Popup em Dispositivos Móveis

No caso dos dispositivos móveis, podemos enfrentar algumas dificuldades para detectar o fechamento da janela popup, visto que no mobile o cenário de eventos disparados pelo navegador é diferente.

Solução com Polling

Para evitar problemas de detecção, recomenda-se utilizar um polling para detectar se a janela foi fechada pelo usuário:

const interval = setInterval(() => {
  if (popupWindow?.closed || popupWindow === undefined) {
    exibirErro('Janela de captura fechada pelo usuário');
    popupWindow = undefined;
    clearInterval(interval);
  }
}, 1000);

Pontos Importantes

• allowedOrigin: É importante passar o location.origin no evento OnInit para garantir a segurança da comunicação
• Target '*': Necessário no postMessage para que o navegador envie a mensagem para a janela popup
• Foco do Popup: Se o popup já estiver aberto, apenas focar nele evita múltiplas janelas abertas
• Polling Mobile: Implementar verificação periódica do estado do popup em dispositivos móveis para detectar fechamento manual

Funções Auxiliares Necessárias

Você precisará implementar as seguintes funções auxiliares:

• fecharPopup(): Fecha a janela popup
• exibirErro(mensagem): Exibe mensagens de erro para o usuário
• enviarFotoAPI(base64): Envia a imagem capturada para sua API