Instalação

OBTENDO AS CREDENCIAIS

Para utilizar o SDK é necessário importar as credenciais (Client API Key) em seu projeto. Utilize o passo-a-passo a seguir para gerar e importar as credenciais.

1. Acesse a sua instância com o login e senha;
2. 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;
3. Para criar uma API Key clique em + Nova API Key ou para editar clique sob a API Key desejada;
4. Se desejar utilizar o modo câmera de selfie com prova de vida da FaceTec, 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 SMARTLIVE COM INTERAÇÃO (LIVENESS COM INTERAÇÃO), clique aqui.
5. No campo Utiliza autenticação segura na SDK selecione a opção Sim;
6. Expanda a seção SDK JS, adicione o nome de sua aplicação JS e hostname (incluindo http/https);
7. Salve as alterações;
8. Volte para a seção APIKey;
9. Escolha a API Key configurada, na coluna Bundle, clique no botão de Download;
10. 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.

11. Clique em Gerar e automaticamente uma nova aba é aberta em seu navegador contendo informações do projeto em formato JSON;
12. Salve esse JSON.

EMBARCANDO AS CREDENCIAIS EM SEU PROJETO

Existem duas opções para embarcar as informações contidas no JSON ao projeto:

• Implementando a classe UnicoConfig (Método recomendado);
• Embarcando o arquivo JSON (Método depreciado).

IMPLEMENTANDO A CLASSE UnicoConfig (MÉTODO RECOMENDADO)

Implemente a classe UnicoConfig.

Copie e cole as informações contidas no JSON em seus respectivos métodos:

Arquivo JSON

{
    "project_info":{
        "project_number":"<YOUR_PROJECT_NUMBER>",
        "project_id":"<YOUR_PROJECT_ID>"
    },
    "client_info":{
        "mobilesdk_app_id":"<YOUR_MOBILE_SDK_APP_ID>",
        "js_client_info":{
            "hostname":"<YOUR_HOSTNAME>"
        }
    },
    "host_info":{
        "host_info":"<YOUR_HOST_INFO>",
        "host_key":"<YOUR_HOST_KEY>"
    }
}

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 O ARQUIVO JSON (MÉTODO DEPRECIADO)

Localização do arquivo em seu projeto

O arquivo JSON deve estar em um local público e visível para a Web dentro de seu projeto.

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 a prova de vida da FaceTec com interação:

Release do SDK	Release da FaceTec (Clique na numeração para fazer o download dos arquivos adicionais)
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.

Utilização de Web Workers no SDK

O SDK Web emprega Web Workers para aprimorar a segurança e a performance. Para garantir a funcionalidade desses workers ao usar a Content Security Policy (CSP), adicione as seguintes configurações à sua política:

Content-Security-Policy: ...; worker-src 'self' blob:; child-src 'self' blob:

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.16.1

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 Smartlive (Prova de vida) com interação.

Sem utilizar o Smartlive com interação FaceTec

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 Smartlive com interação FaceTec

Caso seu projeto utilize o Smartlive 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.