Instalação

CONFIGURAÇÕES DE CONTENT SECURITY POLICY (CSP)

O SDK Web emprega o uso de Web Workers para aprimorar a segurança e a performance. Por isso é necessário adicionar as seguintes configurações à sua Content Security Policy (CSP)

<meta
  http-equiv="Content-Security-Policy"
  content="
      script-src 'self' 'unsafe-eval' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app; 
      worker-src 'self' blob:; 
      child-src 'self' blob:;
            style-src 'self' 'unsafe-inline' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app;
            font-src 'self' https://fonts.gstatic.com *.acesso.io *.unico.run *.unico.io *.unico.app;
            img-src 'self' data: blob: *.acesso.io *.unico.run *.unico.io *.unico.app;
            media-src 'self' data: *.acesso.io *.unico.run *.unico.io *.unico.app;
      script-src-elem 'self' 'unsafe-inline' blob: *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app"
/>

Atenção

Se a sua aplicação possui uma CSP, essa configuração é obrigatória para garantir o funcionamento correto do SDK.

OBTENDO AS CREDENCIAIS

Para utilizar o SDK WEB é necessário obter a credencial SDK Key, uma chave única de identificação do cliente gerada pela equipe da Unico.

Entre em contato com o CSs e/ou time de Onboarding.
Solicite a SDK Key informando os identificadores de suas aplicações. Bundle Identifier para iOS, PackageID para Android e Host para WEB.
Os identificadores de suas aplicações serão vinculados a SDK Key pela equipe da Unico.
Você recebe a sua SDK Key para implementar o AcessoBioConfigDataSource

Credenciais (Client API Key) - Método Depreciado

Para importar as credenciais (Client API Key) em seu projeto, utilize o guia a seguir:

Acesse a sua instância com o login e senha;
Role a barra de menus para baixo e clique no menu Configurações, em seguida clique no menu Integração e por fim clique no menu API Key;
Para criar uma API Key clique em + Nova API Key ou para editar clique sob a API Key desejada;
Se desejar utilizar o modo câmera de selfie com Liveness, verifique se o campo Utiliza liveness com interação está preenchido com a opção SIM. Se estiver preenchido com NÃO, ou não estiver aparecendo, entre em contato com o suporte através da Central de ajuda e solicite a ativação; Para mais informações sobre LIVENESS COM INTERAÇÃO, clique aqui.
No campo Utiliza autenticação segura na SDK selecione a opção Sim;
Expanda a seção SDK JS, adicione o nome de sua aplicação JS e hostname (incluindo http/https);
Salve as alterações;
Volte para a seção APIKey;
Escolha a API Key configurada, na coluna Bundle, clique no botão de Download;
Uma nova seção é aberta, selecione a opção JS;
NOTA
Se a aba não abrir, verifique se o seu navegador está bloqueando os pop-ups.
Clique em Gerar e automaticamente uma nova aba é aberta em seu navegador contendo informações do projeto em formato JSON;
Salve esse JSON.

Para embarcar a SDK Key ao projeto, implemente a classe UnicoConfig.

import { UnicoConfig } from "unico-webframe"

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

Credenciais (Client API Key) - Método Depreciado

import { UnicoConfig } from "unico-webframe"

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>");

EMBARCANDO OUTROS ARQUIVOS DO UNICO CHECK EM SEU PROJETO

Passo opcional

Este passo é opcional e depende da configuração e opções utilizadas em seu projeto

A tabela abaixo lista arquivos de recursos adicionais disponíveis para inclusão em seu projeto. Você deve baixa-los e incluí-los em seu projeto dependendo das funcionalidades que deseja utilizar. Recursos adicionais do Unico Check para a captura com Liveness:

Release do SDK	Release da FaceTec (Clique na numeração para fazer o download dos arquivos adicionais)
3.18.9	9.7.36
3.18.8	9.7.33
3.18.7	9.7.31
3.18.6	9.7.29
3.18.5	9.7.27
3.18.4	9.7.25
3.18.0 -> 3.18.3	9.6.92
3.16.4 -> 3.17.0	9.6.89
3.16.3	9.6.85
3.16.2	9.6.84
3.14.1 -> 3.16.1	9.6.73
3.11.1 -> 3.14.0	9.6.65
3.10.2 -> 3.11.0	9.6.56
3.10.1	9.6.53
3.9.1 -> 3.10.0	9.6.40
3.9.0	9.6.38
3.8.3	9.6.33
3.8.2	9.6.30
3.8.0 -> 3.8.1	9.6.26
3.7.1 -> 3.7.2	9.6.24
3.6.5 -> 3.7.0	9.6.16
3.6.3 -> 3.6.4	9.6.11
3.6.1 -> 3.6.2	9.6.4
3.5.4 -> 3.6.0	9.4.18
3.5.3	9.4.14
3.5.0 -> 3.5.2	9.4.11

Para realizar o download do arquivo de AI do Unico Check SDK Web clique aqui.

Localização do arquivo em seu projeto

Da mesma forma que o JSON do passo anterior, os arquivos adicionais devem estar em um local público e visível para a Web dentro de seu projeto.

INSTALAÇÃO

O SDK Web é disponibilizado através de um pacote npm ou cdn. Para a instalação, siga os passos abaixo de acordo com sua preferência:

Dica

É recomendado o uso das versões mais recentes dos SDKs. Para isto, fique atento aos Release notes.

INSTALAÇÃO ATRAVÉS DO PACOTE NPM

Para instalar o SDK em seu projeto através do npm, basta executar o comando abaixo:

npm install unico-webframe

Ou pelo yarn, com o comando abaixo:

yarn add unico-webframe

INSTALAÇÃO ATRAVÉS DO CDN

Para instalar o SDK em seu projeto por meio do cdn, basta efetuar o download do arquivo abaixo e importa-lo em seu projeto.

Download da versão 3.18.9

Nota sobre o Câmera Inteligente e modelos de IA

Para utilizar o Câmera Inteligente, é necessário adicionar ao projeto alguns modelos de IA para que tudo funcione bem. Para isto, faça download dos modelos neste link e os adicione ao seu projeto.

Os modelos deveM estar disponíveis em uma pasta de nome models acessível publicamente através da url base de sua aplicação. Por exemplo: https://www.seudominio.com/models ou https://localhost:8000/models.

IMPORTAÇÃO

Após a instalação dO SDK, basta importa-lo da maneira correta em seu projeto.

Caso tenha instalado o pacote através do npm:

import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'unico-webframe'

Caso tenha instalado o pacote através do cdn:

import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'UnicoCheckBuilder.min.js'

RENDERIZAÇÃO

A forma que o componente é renderizada depende de ter ou não a funcionalidade de Liveness com interação.

Sem utilizar o Liveness com interação

O frame para captura é renderizado dentro de um div que deve possuir seu id necessáriamente igual a "box-camera".

Exemplo:

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

Atenção

O identificador deste div deve ser sempre igual a id='box-camera'.

Utilizando o Liveness com interação

Caso seu projeto utilize o Liveness com interação você não precisa criar um div em seu código para a renderização. Neste caso, um modal é abeto dentro da mesma janela.

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.

CONFIGURAÇÕES DE CONTENT SECURITY POLICY (CSP)​

OBTENDO AS CREDENCIAIS​

EMBARCANDO OUTROS ARQUIVOS DO UNICO CHECK EM SEU PROJETO​

INSTALAÇÃO​

INSTALAÇÃO ATRAVÉS DO PACOTE NPM​

INSTALAÇÃO ATRAVÉS DO CDN​

IMPORTAÇÃO​

RENDERIZAÇÃO​

Sem utilizar o Liveness com interação​

Utilizando o Liveness com interação​

Dúvidas?​