PassiveFaceLiveness
Importando o SDK
Para utilizar o DocumentDetector, você pode tanto importar remotamente o arquivo .js
como baixá-lo localmente.
Remotamente
Inclua o arquivo .js
diretamente do CDN:
<script src="https://repo.combateafraude.com/javascript/release/passive-face-liveness/<VERSION>.umd.js" type="text/javascript"></script>
Você pode recuperar a classe do SDK utilizando o seguinte código:
const { PassiveFaceLivenessSdk } = window['@combateafraude/passive-face-liveness'];
Localmente
Baixe o arquivo .js
e importe-o como um módulo ES6:
import { PassiveFaceLivenessSdk } from '../assets/js/passive-face-liveness-<VERSION>.js'
Construção
No construtor, o SDK recebe um único parâmetro com as configurações:
const sdk = new PassiveFaceLivenessSdk(options);
Parâmetros suportados
Parâmetro | Obrigatório? |
---|---|
token Token de autenticação para consumir o SDK. | Sim |
language Idioma das mensagens padrões, valores válidos: pt_BR , en_US , es_MX . | Não. O padrão é pt_BR |
environmentSettings.disableDesktopExecution Flag indicando se a execução em desktops deve ser bloqueada. | Não. O padrão é false |
environmentSettings.disableVisibilityChangeSecurity Desabilita a melhoria de segurança responsável por fechar o SDK quando o usuário troca a aba do navegador. | Não. O padrão é false |
environmentSettings.disableFaceDetectionSecurity Desabilita a melhoria de segurança responsável por fechar o SDK quando o usuário afasta o rosto da mascara na captura automática | Não. O padrão é false |
capturerSettings.disableAdvancedCapturing Flag indicando se a captura avançada deve ser desabilitada*. | Não. O padrão é false |
capturerSettings.disableVideoCapturing Flag indicando se a captura por vídeo deve ser desabilitada*. | Não. O padrão é false |
appearenceSettings.captureButtonIcon Customização do ícone de captura, aceita valores como url de imagem ou base64 de svgs. | Não |
appearenceSettings.captureIconSize Customização do tamanho do ìcone referente ao campo captureButtonIcon | Não |
appearenceSettings.captureButtonColor Customização da cor do botão default de captura de imagem. | Não |
appearenceSettings.switchButtonIcon Customização do ícone de troca de câmera, aceita valores como url de imagem ou base64 de svgs. | Não |
appearenceSettings.switchIconSize Customização do tamanho do ícone referente ao campo switchButtonIcon. | Não |
appearenceSettings.switchIconColor Customização da cor do ícone default de troca de câmera. | Não |
appearenceSettings.fontFamily Altera a fonte de todos os elementos contidos no Sdk. | Não. O padrão é herdado da página |
textSettings.messages.processMessage Customização da mensagem de processamento de imagem. | Não. O padrão é "Processando sua foto, aguarde um momento" |
textSettings.messages.isNotAliveMessage Customização da mensagem quando o parâmetro isAlive retorna como false . | Não. O padrão é "Não conseguimos capturar seu rosto :( Por favor, tente novamente." |
textSettings.messages.captureFailedMessage Customização da mensagem de falha na captura. | Não. O padrão é "Ops! Tivemos um problema ao processar sua imagem." |
* A captura avançada consiste no uso de APIs mais complexas e não tão estáveis em navegadores que oferecem suporte à mesma (e.g. ImageCapture)
Exemplo
const sdk = new PassiveFaceLivenessSdk({
token: `my-sdk-token`,
language: `pt_BR`,
environmentSettings: {
disableDesktopExecution: false,
},
capturerSettings: {
disableAdvancedCapturing: false,
},
appearenceSettings: {
captureButtonIcon: '',
captureIconSize: '',
captureButtonColor: '',
switchButtonIcon: '',
switchIconSize: '',
switchIconColor: '',
fontFamily: '',
},
textSettings: {
title: '',
messages: {
processMessage: '',
isNotAliveMessage: '',
captureFailedMessage: '',
},
},
});
CaptureStage
O CaptureStage permite que o cliente configure as etapas . Para isso, oferecemos o objeto CaptureStage
, onde você pode definir os seguintes parâmetros:
Parâmetro |
---|
mode Modo de captura desejado. Podendo ser utilizado manual ou automatic . Na captura manual, um botão será habilitado para o usuário realizar a captura. |
attempts Quantidade de tentativas do stage atual. Caso seja o único stage deve ser passado o valor 0 . |
duration Tempo de duração do stage atual. Caso seja configurado mais de um stage, pode ser parametrizado o tempo total de cada stage, onde ao atingir o tempo total, será passado ao stage seguinte. Defina como 0 caso não deseje configurar um tempo para o stage. |
Exemplo CaptureStage
const stages =[{mode: 'automatic', attempts: 3, duration: 60}, {mode: 'manual', attempts: 0, duration: 0}];
São definidos objetos para cada estágio, conform exemplo, o SDK iniciará com a captura automática, onde vão ser efetuadas 3 tentativas de captura ou então o tempo limite de 60 segundos para cada tentativa, após exceder o tempo ou as tentativas, o SDK seguirá automaticamente para o próximo estágio, onde seria realizada a captura manual sem limite de tentativas ou tempo, então o usuário pode efetuar quantas tentativas quiser sem limite de tempo.
Limitar tentativas do SDK
Através do parâmetro totalAttempts
, é possível configurar o total de tentativas de execução do SDK, após atingir o valor limite o SDK encerrará automaticamente.
Exemplo totalAttempts
await sdk.capture(sdkContainer, stages, {personData, totalAttempts: 3});
Inicialização
initialize(): Promise<void>
O SDK conta com um método isolado de inicialização, para permitir um maior controle de quando ela ocorre.
Durante esse processo, o SDK irá inicializar suas variáveis internas e fazer download dos recursos necessários para sua execução.
[!] Você deve chamar este método antes de utilizar outros métodos do SDK.
[!] A inicialização do SDK pode levar alguns segundos. Recomendamos que você chame essa função o mais cedo possível no seu fluxo, para que a abertura do SDK seja suave para o usuário.
Exemplo
await sdk.initialize();
Utilização
Abertura e captura de selfie
capture(container: HTMLElement, stages, {personData?: LivenessPersonData, totalAttempts?: Number}): Promise<Result>
Método utilizado para carregar o SDK na tela e realizar a capture de selfie.
Irá inicializar a stream de vídeo (solicitando permissões se necessário) e carregá-la no container.
Parâmetros
Parâmetro | Tipo |
---|---|
personData.cpf CPF do usuário fazendo a autenticação (opcional). | string |
personData.name Nome do usuário fazendo a autenticação (opcional). | string |
¹ Se não especificado, a captura automática é utilizada.
² Se não especificado, usa-se um valor padrão de 30 segundos.
Exemplo
// div or another element on DOM
const sdkContainer = document.getElementById('sdk-displayer');
const personData = { cpf: 'user-cpf', name: 'user-name' };
await sdk.capture(sdkContainer, stages, {personData, totalAttempts});
Retorno
O retorno consiste em um objeto com o seguintes campos:
Campo | Tipo | Descrição |
---|---|---|
imageUrl | string | Link temporário para a imagem, gerado pela nossa API |
imageKey | string | Chave do objeto |
blob | Blob | Blob da imagem capturada |
Exemplo
const result = await sdk.capture(sdkContainer, stages, {personData, totalAttempts});
// { imageUrl: '[link da imagem]', imageKey: '[key da imagem]', blob: Blob }
Fechar SDK
close(): Promise<void>
Método utilizado para remover o SDK na tela, removendo os elementos visuais do SDK do DOM.
De-inicializar o SDK
dispose(): Promise<void>
Método utilizado para remover o SDK na tela.
Irá de-inicializar a stream de vídeo e limpar as variáveis internas do SDK
Exemplo completo
Em breve.