Captura de documento
Nesta seção, você encontrará todas as informações necessárias para o uso e integração do SDK da plataforma Unico IDCloud em suas aplicações Web para a captura do documento
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.
A SDK não realiza nenhum tipo de validação do que está sendo capturado.
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.
Nas versões Web Desktop, é possível restringir o tamanho do frame para que o mesmo não utilize toda a dimensão de seu WebApp. Para isto, basta envolver o frame (id="box-camera") em outra tag html, como no exemplo abaixo:
<div class="container">
<div id="box-camera"></div>
</div>Idealmente, você deve tentar manter uma proporção adequada entre altura e largura, o que irá facilitar o enquadramento da face do usuário. A seguir um exemplo:
.container {
width: 800px;
height: 600px;
position: relative;
}Seguindo o exemplo acima, o frame respeita o tamanho do elemento "pai", neste caso representado pelo container. Desta forma, você tem a flexibilidade para implementar o frame da forma mais conveniente para sua aplicação (como em um modal, por exemplo).
Testes alterando o tamanho da tela através do modo desenvolvedor de seu browser não funcionam. É recomendado que este tipo de teste seja feito alterando o tamanho da janela de seu browser.
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:
DocumentCameraTypes.CPF
Frame para captura da frente do CPF
DocumentCameraTypes.CNH
Frame para captura da CNH aberta
DocumentCameraTypes.CNH_FRENTE
Frame para captura da frente da CNH
DocumentCameraTypes.CNH_VERSO
Frame para captura do verso da CNH
DocumentCameraTypes.RG_FRENTE
Frame para captura da frente do RG
DocumentCameraTypes.RG_VERSO
Frame para captura do verso do RG
DocumentCameraTypes.RG_FRENTE_NOVO
Frame para captura da frente do novo RG
DocumentCameraTypes.RG_VERSO_NOVO
frame para captura da parte traseira do novo RG
DocumentCameraTypes.OTHERS("descrição")
Frame para captura de qualquer outro documento
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
});Caso precise capturar um documento que não possuímos um frame específico (ex: RNE, entre outros), utilize o frame DocumentCameraType.None, que irá te possibilitar um frame genérico, retangular, que pode ser utilizado para orientar qualquer captura.
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.
Atualizado
Isto foi útil?