Este guia foi elaborado para ajudá-lo a implementar o SDK Web de forma rápida e fácil. Abaixo veja o passo a passo de todo o processo de integração. Após isso, caso deseje personalizar a experiência, não deixe de ver a seção Personalização Web.

Inicializar o SDK

Para começar, você deve efetuar 3 passos simples em seu projeto:

Instancie um novo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique o caminho dos arquivos adicionais (caso adicionados em seu projeto):

unicoCameraBuilder.setResourceDirectory("/resources");

Especifique o caminho dos arquivos dos modelos de IA, caso utilize a funcionalidade de Câmera Inteligente

unicoCameraBuilder.setModelsPath("https://meusite.com.br/models");

Configuração de ambientes

É possível configurar o ambiente que será utilizado na execução da SDK. Utilize o enumerado SDKEnvironmentTypes que contém os seguintes enumerados:

• SDKEnvironmentTypes.PROD: para ambiente de Produção;

• SDKEnvironmentTypes.UAT: para ambiente de Homologação.

Veja como implementar no exemplo abaixo:

import {
  ...
  UnicoCheckBuilder,
  SDKEnvironmentTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementar as funções de callback

Um dos objetos que deve ser passado como parâmetro ao método responsável por renderizar o frame de captura é o de callback. Este objeto deverá conter funções de callback para casos de sucesso e erro, como exemplificados abaixo.

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);        
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      }
    }
  };

Este objeto é obrigatório e caso não seja corretamente implementado (contemplando todos os eventos de success ou error) gera uma exceção, que caso não tratada, é exibida no console do usuário.

Configurar e iniciar

Para iniciar a câmera com as configurações feitas até aqui, é preciso criar uma instância do builder através do método build().

const unicoCamera = unicoCameraBuilder.build();

Em seguida, com a câmera "montada", deve-se configurar o modo de captura da câmera.

A preparação da câmera será efetuada a partir do método prepareSelfieCamera(), disponibilizado a partir do builder. Este método recebe 2 parâmetros:

• A classe UnicoConfig obtida neste passo;

• Modo de câmera desejado, sendo eles:

  • SelfieCameraTypes.NORMAL para o modo de câmera normal;

  • SelfieCameraTypes.SMART para o modo de câmera inteligente.

Este método gera uma promise que ao ser resolvida, devolve um objeto que é utilizado para efetivamente abrir a câmera através do método open, que recebe como parâmetro as funções de callback configuradas no passo acima.

Caso deseje utilizar a captura automática, passe o parâmetro Unico.SelfieCameraTypes.SMART para o método prepareSelfieCamera.

Para a captura inteligente, os modelos de visão computacional também devem ser carregados através do método setModelsPath, conforme explicado no primeiro passo deste guia.

Usando a classe UnicoConfig:

const config = new UnicoConfig()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCamera(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Configurar modo de captura em iFrame's

É possível utilizar o SDK Web com Liveness Interativo embarcado em um iFrame, para isso é preciso realizar uma implementação semelhante a seção anterior na preparação da câmera.

A preparação da câmera será efetuada através do método prepareSelfieCameraForIFrame(), também disponibilizado a partir do builder. Este método recebe os mesmos parâmetros do prepareSelfieCamera():

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCameraForIFrame(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Implementação do elemento iFrame

Para que a captura funcione corretamente é necessário implementar o elemento <iframe> como no exemplo abaixo:

<iframe allow="fullscreen;camera;geolocation" allowFullScreen src="your_app_url"></iframe>

Comportamento em tela cheia​

Para executar a captura é necessário estar no modo tela cheia do browser para que o SDK possa se redimensionar automaticamente. Sendo assim, ao executar a captura, o SDK apresenta uma tela solicitando a abertura do frame em modo tela cheia. Veja no exemplo a seguir:

Após permitir o uso de tela cheia, o frame de captura abrirá normalmente:

Realize um requisição POST na API REST do by Client

A captura das imagens é apenas a primeira parte da jornada. Após capturar a imagem, é necessário enviar o encrypted gerado pelo SDK para as APIs REST do by Client. Saiba mais na seção CreateProcess do by Client.

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.

Este guia foi elaborado para ajudá-lo a implementar o SDK Web de forma rápida e fácil. Abaixo veja o passo a passo de todo o processo de integração. Após isso, caso deseje personalizar a experiência, não deixe de ver a seção Personalização Web.

Frames de documentos disponíveis

Neste modo de câmera, existe um frame de captura para auxiliar o usuário a posicionar o documento corretamente. Após posicionar o documento corretamente, o usuário deve clicar no botão para realizar a captura da foto do documento.

Neste modo de câmera é possivel capturar os documentos:

• CPF: Captura da frente do CPF;

• CNH: Captura da CNH aberta;

• CNH frente: Captura da frente da CNH;

• CNH verso: Captura do verso da CNH;

• RG frente: Captura da frente do RG;

• RG verso: Captura do verso do RG;

• Outros: Captura de qualquer outro documento.

Inicializar o SDK

Para começar, você deve efetuar 2 passos simples em seu projeto:

Instancie um novo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique o caminho dos arquivos adicionais (caso adicionados em seu projeto):

unicoCameraBuilder.setResourceDirectory("/resources");

Configurar tamanho do frame

É recomendado que você configure o tamanho do frame dentro de sua aplicação, a fim de otimizar a área de captura dentro de seu WebApp. Confira abaixo como fazer esta configuração para Web Desktop ou Mobile.

<div class="container">
  <div id="box-camera"></div>
</div>

.container {
  width: 800px;
  height: 600px;
  position: relative;
}

Implementar as funções de callback

Um dos objetos que é necessário passar como parâmetro ao método responsável por renderizar o frame de captura é o de callback. Este objeto deve conter funções de callback para casos de sucesso e erro, como exemplificados abaixo.

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      },
    }
  };

Este objeto é obrigatório e caso não seja corretamente implementado (contemplando todos os eventos de success ou error gera uma exceção, que caso não tratada, é exibida no console do usuário).

Configurar e iniciar câmera

Para iniciar a câmera com as configurações feitas até aqui, é preciso criar uma instância do builder através do método build().

const unicoCamera = unicoCameraBuilder.build();

Em seguida, com a câmera "montada", deve-se configurar o modo de captura da câmera.

A preparação da câmera é efetuada a partir do método prepareDocumentCamera(), disponibilizado a partir do builder. Este método recebe 2 parâmetros:

• A classe UnicoConfig obtida neste passo;

• Tipo de documento a ser capturado, sendo eles:

Este método gera uma promise que ao ser resolvida, devolve um objeto que é utilizado para efetivamente abrir a câmera através do método open, que recebe como parâmetro as funções de callback configuradas no passo acima.

Abaixo um exemplo utilizando a captura de CNH:

Usando a classe UnicoConfig:

  const config = new UnicoConfig()
    .setProjectNumber("<YOUR_PROJECT_NUMBER>")
    .setProjectId("<YOUR_PROJECT_ID>")
    .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
    .setHostname("<YOUR_HOSTNAME>")
    .setHostInfo("<YOUR_HOST_INFO>")
    .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareDocumentCamera(
    config, 
    DocumentCameraTypes.CNH
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Realize um requisição POST na API REST do by Client

A captura das imagens é apenas a primeira parte da jornada. Após capturar a imagem, é necessário enviar o base64 gerado pelo SDK para as APIs REST do by Client. Saiba mais na seção CreateProcess do by Client.

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.