Skip to main content

Get started

This page demonstrates how to configure your account to use the SDK, as well as how to install and configure it in your project.

CONFIGURATION OF CONTENT SECURITY POLICY (CSP)​

The Web SDK employs the use of Web Workers to improve security and performance. Therefore, you need to add the following settings to your 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"
/>
Attention

If your application has a CSP configured, this setting is mandatory.

Configure your credentials​

To use the SDK, you need to get valid credential keys. The following steps show you how to get these client keys and configure it in your project:

Get your credentials​

To use the WEB SDK you need to obtain the SDK Key credential, a unique customer identification key generated by the Unico team.

  1. contact the CSs and/or Onboarding team.
  2. Request the SDK Key by entering the identifiers of your applications. Bundle Identifier for iOS, PackageID for Android and Host for WEB.
  3. The identifiers of your applications will be linked to the SDK Key by the Unico team.
  4. You receive your SDK Key to implement the AccessBioConfigDataSource.
Credentials (Client API Key) - Deprecated Method

To import the credentials (Client API Key) into your project, use the following guide:

  1. Log in to the Unico Customer Area;
  2. Go to Configurações (Configurations), then Integração (Integrations) and finally to API Key;
  3. Generate or edit an existing API Key;
  4. If you want to use the Smartlive with interaction functionality in your app, check if the field "Utiliza liveness com interação" is enabled (this field must be showing you the word "SIM"). Otherwise, contact the support team to request the activation.
Smartlive with interaction

Learn more about Smartlive with interaction in the key concepts section.

  1. Select SIM (Yes) in the field "Utiliza autenticação segura na SDK" (Asking if use secure authentication in SDK);
  2. Expand the JS SDK section and add your application name and the hostname (including http or https);
  3. Save your changes.

Add the credentials to your app​

  1. Log in to your Customer Area;
  2. Go to Configurações (Configurations), then Integração (Integrations) and finally to API Key;
  3. Select the Download option on the desired API Key;
  4. Select the JS option;
  5. Click on "Gerar";
  6. A new tab will open in your browser containing project information in JSON format..
Problems with pop-up blockers

You may need to temporarily disable your pop-up blocker to see the download window.

  1. Save the content of this new tab in a JSON file;
  2. Keep the file to add it in your project latter. This configuration is explained latter in this SDK guides.
File location

The JSON file must be in a public, web-accessible location within your project.

EMBARKING CREDENTIALS INTO YOUR PROJECT​

To add the SDK Key to the project, implement the UnicoConfig class.

import { UnicoConfig } from "unico-webframe"

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

Embed additional Unico Check files in your project​

optional step

This step is optional and depends on the configuration you use in your project.

The table below lists additional resource files available for inclusion in your project. You must download and include them in your project depending on the features you want to use. Additional features of unico check for FaceTec proof of life capture with interaction:

SDK ReleaseFaceTec Release (Click on the number to download additional files)
3.18.99.7.36
3.18.89.7.33
3.18.79.7.31
3.18.49.7.25
3.18.0 -> 3.18.39.6.92
3.16.4 -> 3.17.09.6.89
3.16.39.6.85
3.16.29.6.84
3.14.1 -> 3.16.19.6.73
3.11.1 -> 3.14.09.6.65
3.10.2 -> 3.11.09.6.56
3.10.19.6.53
3.9.1 -> 3.10.09.6.40
3.9.09.6.38
3.8.39.6.33
3.8.29.6.30
3.8.0 -> 3.8.19.6.26
3.7.1 -> 3.7.29.6.24
3.6.5 -> 3.7.09.6.16
3.6.3 -> 3.6.49.6.11
3.6.1 -> 3.6.29.6.4
3.5.4 -> 3.6.09.4.18
3.5.39.4.14
3.5.0 -> 3.5.29.4.11

To download the AI file of the unico check Web SDK click here.

File location in your project

The above files also must be in a public, web-accessible location within your project.

Installation​

Install the SDK from npm or cdn:

Use the Unico Check npm package, or embed the Unico Check script (from CDN) into your js files:

tip

We suggest you to always keep the SDK updated to its latest version. You can check the most recent version at the Release notes.

Installation through npn or yarn packages​

Using npn:

npm install unico-webframe

Using yarn:

yarn add unico-webframe

Installation through CDN​

Download the file and import it in your project:

NOTE ON SMART CAMERA AND AI MODELS

To use the Smart camera functionality, you must include the IA models in your projects, so that everything works fine. To achieve this, download the file and add it to your project.

The models must be available in a public folder named models, through the application base path. Example: https://www.yourdomain.com/models or https://localhost:8000/models.

Import the files​

Import Unico Check SDK in your application, depending on the installation mode:

Installed using npm or yarn packages​

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

Installed using cnd​

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

Rendering​

The rendering method depends on if you have enabled Smart live with interaction or no.

If you are not using Smartlive with interaction FaceTec​

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

Create a DOM container element on your page (div) where you want the capture frame to be rendered. Make sure to name the container element as "box-camera".

Exemplo:

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

Make sure your div id is equal to 'box-camera', otherwise the frame won't load.

If you are using Smartlive with interaction FaceTec​

If you have configured Smartlive with interaction FaceTec in your project, you don't need to create a placeholder in your code to render the frame. In this case, Unico Check SDK opens a modal that takes 100% of users' screen.

Getting help​

Help with some frameworks

If you are using Angular oor React-scripts 5, you could find some problems. Take a look in some quick solutions at the troubleshooting articles.

Are you missing something or still need help? Please, please get in touch with the support team at help center.

Next steps​