1 de 8

Web SDK

In this section, you will find all the necessary information to implement the Web SDK of the Unico IDCloud platform

Installation Guide

In this section, you will find all the information needed to install the Unico IDCloud platform SDK in your Web applications

Compatible Browsers

The capture frame provided through the SDK is compatible with the following combinations of browsers and operating systems:

Operational System

Chrome

Firefox

Safari

Samsung Internet

Opera

Edge

In general, the SDK supports WebRTC and newer versions of the browsers listed above. Due to compatibility and security reasons, functionality in very old versions of these browsers is not guaranteed.

The capture component provided through the Flutter SDK supports versions equal to or higher for the following technologies:

Android: 5.0 (API 21);
iOS: 11.

Webview Operation

It is a system component that allows Android or iOS applications to display web content directly inside the app, based on the same code project. It is responsible for navigation on websites and web content within apps.

Preconditions

It is necessary to have implemented the Web SDK in an application that contains a secure domain with the https protocol.

Compatibility with Operating Systems

Android:

The Web SDK is compatible with webviews running on Android 8 (API 26) or higher. For the SDK to function correctly, it is necessary to add some permissions and configurations to the AndroidManifest file, which are as follows:

It is recommended to use Chromium-based webviews with some customizations for better JavaScript performance. You can find an implementation example through our PoCs here.

iOS

The Web SDK is compatible with webviews running on iOS 13 or higher. For the SDK to function correctly, it is necessary to add some permissions and configurations to the info.plist file, which are as follows:

iOS provides two ways to use Webviews in applications: WKWebView and SFSafariViewController. We recommend using SFSafariViewController for better compatibility with DOM features. You can find an implementation example through our PoCs here.

Compatibility with Hybrid Frameworks

The component is certified only for native layers. To be used in hybrid frameworks (Flutter or React Native), it is necessary to implement it in the native layer of Android and/or iOS.

When running, the SDK will request permission to open the camera for the webview, which will then request the same permission from the native application. It is mandatory for your native application to have the necessary permissions set in the configuration files.

Our support is restricted to applications developed directly on native Android and iOS platforms, using their respective native modules. Currently, we do not offer support for applications developed in hybrid frameworks, such as React Native, Ionic, or other cross-platform development technologies.

Installing the Web SDK

To implement the Unico IDCloud Web SDK into your Android app, follow the steps listed below:

Content Security Policy (CSP) Setting

The Web SDK employs the use of Web Workers to enhance security and performance. Therefore, you need to add the following settings to your Content Security Policy (CSP):

If your application has a CSP, this configuration is mandatory to ensure the correct functioning of the SDK.

Obtaining Credentials

Contact the CSs and/or Onboarding team.
Request the SDK Key by entering the identifiers of your applications. Bundle Identifier for iOS, PackageID for Android and Host for WEB.
The identifiers of your applications will be linked to the SDK Key by the Unico team.
You receive your SDK Key to implement the AccessBioConfigDataSource.

Embedding the Credentials in Your Project

Implement the UnicoConfig class in your class:

Depracated Method:

Embedding Other Files in Your Project

The table below lists additional resource files available for inclusion in your project. You must download them and include them in your project to perform the life proof capture:

Download the AI files for the SDK

All additional files must be in a publicly accessible and visible location within your project.

Installation

The Web SDK is available through an npm package or cdn. For installation, follow the steps below according to your preference:

Or via yarn, with the following command:

To install the SDK into your project through the cdn, simply download the file below and import it into your project.

Importing

After installing the SDK, simply import it correctly into your project.

If you installed the package via npm:

If you installed the package via cdn:

Once the SDK installation is complete, proceed to the implementation by reading the following Usage and Integration Guide:

Usage and Integration Guide

In this section, you will find all the necessary information for using and integrating the Unico IDCloud platform SDK into your Webapplications

Selfie Capture

In this section, you will find all the necessary information for using and integrating the Unico IDCloud platform SDK into your Web applications for selfie capture

This guide has been designed to help you quickly and easily implement the Web SDK. Below, you'll find the step-by-step process for the complete integration. If you wish to customize the experience further, check out the Web Customization section.

Initializing the SDK

To get started, follow these 3 simple steps in your project:

Instantiate a new Builder:

Specify the path of additional files (if added to your project):

Specify the path of the AI model files if you are using the Smart Camera functionality:

Starting from version 3.18.0, to have the SDK automatically fetch additional resources, simply omit the setResourceDirectory method and ensure the CSP settings are correctly applied for SDK usage.

Environment Configuration

By default, the SDK Web uses the production environment.

It is possible to configure which environment will be used during SDK execution. Use the SDKEnvironmentTypes enumeration, which includes the following options:

SDKEnvironmentTypes.PROD: for the Production environment;
SDKEnvironmentTypes.UAT: for the Staging environment.

Here is an example of how to implement it:

Implementing the Callback Functions

One of the objects that must be passed as a parameter to the method responsible for rendering the capture frame is the callback object. This object should contain callback functions for success and error cases, as shown below:

his object is mandatory, and if not implemented correctly (covering all success or error events), it will throw an exception that, if not handled, will be displayed in the user's console.

The encrypted attribute is strictly intended for sending the image through the by Client APIs. It should not be opened or serialized, as its characteristics may change without prior notice. Its use must be exclusive to interactions with the APIs to ensure the integrity and security of the data. Unico is not responsible for any damages arising from this practice, as modifications may occur unexpectedly.
The base64 and encrypted files can vary in size due to several factors, including the quality of the devices and the photos generated, as well as Unico's business rules. To avoid issues in your application, do not restrict the size of the string generated by the SDK for these files in your programming logic or infrastructure.

Configure and Start

To start the camera with the settings made so far, you need to create an instance of the builder using the build() method.

Then, once the camera is "built", you need to configure the camera capture mode. The camera setup will be done through the prepareSelfieCamera() method available from the builder. This method takes 2 parameters:

The UnicoConfig class obtained in this step;
The desired camera mode, which can be:
- SelfieCameraTypes.NORMAL for normal camera mode;
- SelfieCameraTypes.SMART for smart camera mode.

This method returns a promise that, when resolved, provides an object used to actually open the camera through the open method, which takes the callback functions as parameters.

To optimize camera startup, you can separate the calls to the prepareSelfieCamera() and open() methods.

To use automatic capture, pass the Unico.SelfieCameraTypes.SMART parameter to the prepareSelfieCamera method. For smart capture, the computer vision models must also be loaded through the setModelsPath method, as explained in the first step of this guide.

Using the UnicoConfig class:

Configure Capture Mode in iFrames

It is possible to use the SDK Web with Interactive Liveness embedded in an iFrame. To do this, follow a similar implementation to the previous section in preparing the camera. The camera setup will be done through the prepareSelfieCameraForIFrame() method, also available from the builder. This method takes the same parameters as prepareSelfieCamera():

The prepareSelfieCameraForIFrame() method only works if the implementation is within an iFrame. Using it outside of an iFrame results in error 73724. Similarly, using prepareSelfieCamera() within an iFrame also results in error 73724.

Implementing the iFrame Element

For the capture to work correctly, the <iframe> element must be implemented as shown below:

Fullscreen Behavior

To execute the capture, the browser must be in fullscreen mode so that the SDK can automatically resize itself. Therefore, when starting the capture, the SDK will display a screen requesting the frame to open in fullscreen mode. See the following example:

After allowing fullscreen usage, the capture frame will open normally:

Apple restricts the use of fullscreen APIs specifically on iPhones (iPads are acceptable). Therefore, for captures on iPhones, it is necessary to configure the positioning of the iFrame manually.

Making a POST Request to the Client API

After capturing images, the next step is to send the generated encrypted image from the SDK to the Client APIs.

For security reasons, the interval between the generation of the encrypted data and the sending through one of the available flows must be no more than 10 minutes. Submissions made beyond this period will be automatically rejected by the API.

Document Capture

In this section, you will find all the necessary information for using and integrating the Unico IDCloud SDK into your Web applications for document capture

This guide has been designed to help you implement the Web SDK quickly and easily. Below, you will find a step-by-step process for the entire integration. After that, if you wish to customize the experience, be sure to check the Web Customization section.

Available Document Frames

In this camera mode, there is a capture frame to assist the user in positioning the document correctly. Once the document is properly positioned, the user must click the button to take a photo of the document.

The SDK does not perform any validation of what is being captured.

In this camera mode, it is possible to capture the following documents:

CPF: Capture the front of the CPF;
CNH: Capture the open CNH;
CNH Front: Capture the front of the CNH;
CNH Back: Capture the back of the CNH;
RG Front: Capture the front of the RG;
RG Back: Capture the back of the RG;
Others: Capture any other document.

Initializing the SDK

To get started, you need to perform 2 simple steps in your project:

Instantiate a new Builder:

Specify the path for additional files (if added to your project):

Configure Frame Size

It is recommended that you configure the size of the frame within your application to optimize the capture area within your WebApp. Below is how to configure this for both Web Desktop and Mobile.

The functionality of the frame can often be affected by certain design systems that have some type of grid system, such as Bootstrap or Material-UI. To minimize this risk, make sure to position the frame (id="box-camera") in a part of the code that does not inherit unwanted CSS rules.

For Web Desktop versions, it is possible to restrict the size of the frame so that it does not take up the entire dimension of your WebApp. To do this, simply wrap the frame (id="box-camera") in another HTML tag, as shown below:

Ideally, you should try to maintain an appropriate aspect ratio between height and width, which will make it easier to frame the user's face. Here’s an example:

Following the example above, the frame respects the size of the parent element, represented here by the container. This way, you have the flexibility to implement the frame in the most convenient manner for your application (such as in a modal, for example).

Testing by resizing the screen through your browser's developer mode does not work. It is recommended that this type of testing be done by resizing the window of your browser.

For a Web Mobile view, it is recommended that the capture frame occupies 100% of the screen to avoid issues with computer vision algorithms. If the capture area is distorted, the automatic capture functionality (Smart Camera) may experience problems with face tracking calculations.

Therefore, it is recommended that in the Web Mobile view:

The capture frame occupies 100% of the device screen (100vw/vh);
Avoid horizontal or vertical scrolling (this can be minimized with a modal);

Testing devices using your browser's developer mode does not work, as the camera used by your browser is the same as that of your desktop, which has a completely different resolution than a mobile device's camera. We recommend that this type of testing be conducted directly on the device.

Implementing the Callback functions

This object is mandatory, and if it is not correctly implemented (covering all success or error events), it will generate an exception, which, if unhandled, will be displayed in the user's console.

Configure and Start Camera

To start the camera with the configurations made so far, you need to create an instance of the builder using the build() method:

Next, with the camera "assembled," you need to configure the capture mode of the camera. The camera preparation is done using the prepareDocumentCamera() method, provided by the builder. This method takes 2 parameters:

The UnicoConfig class obtained in this step;
The type of document to be captured.

This method returns a promise that, when resolved, returns an object that is used to actually open the camera through the open method, which takes the callback functions configured in the step above as a parameter.

Below is an example using the capture of a driver's license (CNH): Using the UnicoConfig class:

If you need to capture a document for which there is no specific frame (e.g., RNE, among others), use the DocumentCameraType.None frame, which will allow you to use a generic rectangular frame to guide any capture.

Making a POST Request to the Client API

After capturing images, the next step is to send the generated base64 image from the SDK to the Client APIs.

Error Handling Guide

In this section, you will find all the necessary information for handling errors from the Unico IDCloud SDK in your Web applications

`ErrorBio` Object

This object is returned whenever an error occurs in the Web SDK.

Available Methods

Method Name

Description

Below is a list of possible error codes from the Web SDK, in the prepareCamera method:

Web Customization

In this section, you will find all the information necessary for customizing the SDK of the Unico IDCloud platform in your Web applications

The Web SDK allows for some customizations to be made. Below are all the possible customizations for this SDK.

Customize Language

It is possible to configure the experience of the informational messages in the capture frames by changing their language. Use the enumerated type LocaleTypes, which contains the following values:

LocaleTypes.PT_BR: for Portuguese(Brazil);
LocaleTypes.ES_MX: for Spanish(Mexico);
LocaleTypes.ES_ES: for Spanish(Spain);
LocaleTypes.EN_US: for English(USA).

See how to implement it in the example below:

import {
  ...
  UnicoCheckBuilder,
  LocaleTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setLocale(LocaleTypes.EN_US);

A remote activation may be required to be used, if you wish to use it, notify your project manager or Unico support.
If not configured, the SDK will use Portuguese as the default language.

Customize Capture Experience

This step is optional, but highly recommended for aligning the capture process with your company's visual identity.

To customize the capture frame using the Theme Builder, simply create an instance of the UnicoThemeBuilder class and invoke the methods that customize each of the properties of the capture frame, as shown in the example below:

const unicoTheme = new UnicoThemeBuilder()
.setColorSilhouetteSuccess("#0384fc")
.setColorSilhouetteError("#D50000")
.setColorSilhouetteNeutral("#fcfcfc")
.setBackgroundColor("#dff1f5")
.setColorText("#0384fc")
.setBackgroundColorComponents("#0384fc")
.setColorTextComponents("#dff1f5")
.setBackgroundColorButtons("#0384fc")
.setColorTextButtons("#dff1f5")
.setBackgroundColorBoxMessage("#fff")
.setColorTextBoxMessage("#000")
.setColorCancelButton("#0384fc")
.setColorProgressBar("#0384fc")
.setHtmlPopupLoading(`<div style="position: absolute; top: 45%; right: 50%; transform:
translate(50%, -50%); z-index: 10; text-align: center;">Carregando...</div>`)
.build();

After generating the theme object as exemplified above, it should be passed as a parameter to the setTheme method of the unicoCameraBuilder:

unicoCameraBuilder.setTheme(unicoTheme);

Still need help?

Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.

Release notes

In this section, you will find all the updates for the Unico IDCloud Web SDK

Keep your Android SDK always up to date with the latest available version. Semantic versioning is used to number the versions. For more information, please refer to the article Overview.

Version 3.18.9 - 11/18/2024

Updated Liveness SDK and Interactive Server.

Version 3.18.8 - 10/24/2024

Updated Liveness SDK and Interactive Server;
Resolution of conflicts between observability tools.

Versão 3.18.7 - 10/15/2024

SDK Update and Liveness Server Interaction.

Still need help?

Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.

Selfie Capture

In this section, you will find all the necessary information for using and integrating the Unico IDCloud platform SDK into your Web applications for selfie capture

Initializing the SDK

To get started, follow these 3 simple steps in your project:

Instantiate a new Builder:

Specify the path of additional files (if added to your project):

Specify the path of the AI model files if you are using the Smart Camera functionality:

Starting from version 3.18.0, to have the SDK automatically fetch additional resources, simply omit the setResourceDirectory method and ensure the CSP settings are correctly applied for SDK usage.

Environment Configuration

By default, the SDK Web uses the production environment.

It is possible to configure which environment will be used during SDK execution. Use the SDKEnvironmentTypes enumeration, which includes the following options:

SDKEnvironmentTypes.PROD: for the Production environment;
SDKEnvironmentTypes.UAT: for the Staging environment.

Here is an example of how to implement it:

import {
  ...
  UnicoCheckBuilder,
  SDKEnvironmentTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementing the Callback Functions

  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
      }
    }
  };

his object is mandatory, and if not implemented correctly (covering all success or error events), it will throw an exception that, if not handled, will be displayed in the user's console.

The encrypted attribute is strictly intended for sending the image through the by Client APIs. It should not be opened or serialized, as its characteristics may change without prior notice. Its use must be exclusive to interactions with the APIs to ensure the integrity and security of the data. Unico is not responsible for any damages arising from this practice, as modifications may occur unexpectedly.
The base64 and encrypted files can vary in size due to several factors, including the quality of the devices and the photos generated, as well as Unico's business rules. To avoid issues in your application, do not restrict the size of the string generated by the SDK for these files in your programming logic or infrastructure.

If it is necessary to convert the base64 string to a bitmap, the standard method does not work for Android. You need to perform a split at the comma (,) for it to function correctly. If you want to learn more, read the article:.

Configure and Start

To start the camera with the settings made so far, you need to create an instance of the builder using the build() method.

const unicoCamera = unicoCameraBuilder.build();

The UnicoConfig class obtained in this step;
The desired camera mode, which can be:
- SelfieCameraTypes.NORMAL for normal camera mode;
- SelfieCameraTypes.SMART for smart camera mode.

This method returns a promise that, when resolved, provides an object used to actually open the camera through the open method, which takes the callback functions as parameters.

To optimize camera startup, you can separate the calls to the prepareSelfieCamera() and open() methods.

Using the UnicoConfig class:

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.prepareSelfieCamera(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Configure Capture Mode in iFrames

const unicoCamera = unicoCameraBuilder.build();

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.prepareSelfieCameraForIFrame(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Implementing the iFrame Element

For the capture to work correctly, the <iframe> element must be implemented as shown below:

<iframe allow="fullscreen;camera;geolocation" allowFullScreen src="your_app_url"></iframe>

Fullscreen Behavior

After allowing fullscreen usage, the capture frame will open normally:

Apple restricts the use of fullscreen APIs specifically on iPhones (iPads are acceptable). Therefore, for captures on iPhones, it is necessary to configure the positioning of the iFrame manually.

Making a POST Request to the Client API

After capturing images, the next step is to send the generated encrypted image from the SDK to the Client APIs.

Still need help?

Didn't find something or still need help? If you're already a client or partner, you can reach out through our .

Document Capture

In this section, you will find all the necessary information for using and integrating the Unico IDCloud SDK into your Web applications for document capture

Available Document Frames

The SDK does not perform any validation of what is being captured.

In this camera mode, it is possible to capture the following documents:

CPF: Capture the front of the CPF;
CNH: Capture the open CNH;
CNH Front: Capture the front of the CNH;
CNH Back: Capture the back of the CNH;
RG Front: Capture the front of the RG;
RG Back: Capture the back of the RG;
Others: Capture any other document.

Initializing the SDK

To get started, you need to perform 2 simple steps in your project:

Instantiate a new Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Specify the path for additional files (if added to your project):

unicoCameraBuilder.setResourceDirectory("/resources");

Configure Frame Size

It is recommended that you configure the size of the frame within your application to optimize the capture area within your WebApp. Below is how to configure this for both Web Desktop and Mobile.

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

Ideally, you should try to maintain an appropriate aspect ratio between height and width, which will make it easier to frame the user's face. Here’s an example:

.container {
  width: 800px;
  height: 600px;
  position: relative;
}

Testing by resizing the screen through your browser's developer mode does not work. It is recommended that this type of testing be done by resizing the window of your browser.

Therefore, it is recommended that in the Web Mobile view:

The capture frame occupies 100% of the device screen (100vw/vh);
Avoid horizontal or vertical scrolling (this can be minimized with a modal);

Implementing the Callback functions

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);
      },
      error: (error) => {
        console.error(error)
      },
    }
  };

This object is mandatory, and if it is not correctly implemented (covering all success or error events), it will generate an exception, which, if unhandled, will be displayed in the user's console.

Configure and Start Camera

To start the camera with the configurations made so far, you need to create an instance of the builder using the build() method:

const unicoCamera = unicoCameraBuilder.build();

The UnicoConfig class obtained in this step;
The type of document to be captured.

Parameter

Description

Below is an example using the capture of a driver's license (CNH): Using the UnicoConfig class:

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

Making a POST Request to the Client API

After capturing images, the next step is to send the generated base64 image from the SDK to the Client APIs.

Still need help?

Didn't find something or still need help? If you're already a client or partner, you can reach out through our .

Installation Guide

In this section, you will find all the information needed to install the Unico IDCloud platform SDK in your Web applications

Compatible Browsers

The capture frame provided through the SDK is compatible with the following combinations of browsers and operating systems:

Operational System

Chrome

Firefox

Safari

Samsung Internet

Opera

Edge

In general, the SDK supports WebRTC and newer versions of the browsers listed above. Due to compatibility and security reasons, functionality in very old versions of these browsers is not guaranteed.

The capture component provided through the Flutter SDK supports versions equal to or higher for the following technologies:

Android: 5.0 (API 21);
iOS: 11.

Webview Operation

Preconditions

It is necessary to have implemented the Web SDK in an application that contains a secure domain with the https protocol.

Compatibility with Operating Systems

Android:

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera2.full" />
<uses-feature android:name="android.hardware.camera2.autofocus" />

It is recommended to use Chromium-based webviews with some customizations for better JavaScript performance. You can find an implementation example through our PoCs here.

iOS

info.plist

<key>NSCameraUsageDescription</key>
<string>Camera usage description</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Mensagem da cliente</string>

Compatibility with Hybrid Frameworks

The component is certified only for native layers. To be used in hybrid frameworks (Flutter or React Native), it is necessary to implement it in the native layer of Android and/or iOS.

Installing the Web SDK

To implement the Unico IDCloud Web SDK into your Android app, follow the steps listed below:

Content Security Policy (CSP) Setting

The Web SDK employs the use of Web Workers to enhance 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"
/>

If your application has a CSP, this configuration is mandatory to ensure the correct functioning of the SDK.

Obtaining Credentials

Contact the CSs and/or Onboarding team.
Request the SDK Key by entering the identifiers of your applications. Bundle Identifier for iOS, PackageID for Android and Host for WEB.
The identifiers of your applications will be linked to the SDK Key by the Unico team.
You receive your SDK Key to implement the AccessBioConfigDataSource.

Embedding the Credentials in Your Project

Implement the UnicoConfig class in your class:

import { UnicoConfig } from "unico-webframe"

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

Depracated Method:

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

Embedding Other Files in Your Project

The table below lists additional resource files available for inclusion in your project. You must download them and include them in your project to perform the life proof capture:

Release do SDK

Release from FaceTec

Download the AI files for the SDK

To download the AI file for the Unico Check Web SDK, click .

All additional files must be in a publicly accessible and visible location within your project.

Installation

The Web SDK is available through an npm package or cdn. For installation, follow the steps below according to your preference:

Installation via NPM package

To install the SDK into your project via , simply run the following command:

npm install unico-webframe

Or via yarn, with the following command:

yarn add unico-webframe

Installation via CDN

To install the SDK into your project through the cdn, simply download the file below and import it into your project.

version 3.18.9.

Importing

After installing the SDK, simply import it correctly into your project.

If you installed the package via npm:

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

If you installed the package via cdn:

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

Once the SDK installation is complete, proceed to the implementation by reading the following Usage and Integration Guide:

Still need help?

Didn't find something or still need help? If you're already a client or partner, you can reach out through our .

Web SDK

Installation Guide

Compatible Browsers

Webview Operation

Preconditions

Compatibility with Operating Systems

Android:

iOS

Compatibility with Hybrid Frameworks

Installing the Web SDK

Content Security Policy (CSP) Setting

Obtaining Credentials

Embedding the Credentials in Your Project

Embedding Other Files in Your Project

Download the AI files for the SDK

Installation

Importing

Usage and Integration Guide

Selfie Capture

Initializing the SDK

Environment Configuration

Implementing the Callback Functions

Configure and Start

Configure Capture Mode in iFrames

Implementing the iFrame Element

Fullscreen Behavior

Making a POST Request to the Client API

Document Capture

Available Document Frames

Initializing the SDK

Configure Frame Size

Implementing the Callback functions

Configure and Start Camera

Making a POST Request to the Client API

Error Handling Guide

ErrorBio Object

Available Methods

Below is a list of possible error codes from the Web SDK, in the prepareCamera method:

Web Customization

Customize Language

Customize Capture Experience

Release notes

Version 3.18.9​ - 11/18/2024

Version 3.18.8​ - 10/24/2024

Versão 3.18.7​ - 10/15/2024

Release notes

Version 3.18.9​ - 11/18/2024

Version 3.18.8​ - 10/24/2024

Versão 3.18.7​ - 10/15/2024

Web Customization

Customize Language

Customize Capture Experience

Usage and Integration Guide

Selfie Capture

Initializing the SDK

Environment Configuration

Implementing the Callback Functions

Configure and Start

Configure Capture Mode in iFrames

Implementing the iFrame Element

Fullscreen Behavior

Making a POST Request to the Client API

Document Capture

Available Document Frames

Initializing the SDK

Configure Frame Size

Implementing the Callback functions

Configure and Start Camera

Making a POST Request to the Client API

Error Handling Guide

ErrorBio Object

Available Methods

Below is a list of possible error codes from the Web SDK, in the prepareCamera method:

Below is a list of possible error codes from the Web SDK, in the openCamera method:

Installation Guide

Compatible Browsers

Webview Operation

Preconditions

Compatibility with Operating Systems

Android:

`ErrorBio` Object

Version 3.18.9 - 11/18/2024

Version 3.18.8 - 10/24/2024

Versão 3.18.7 - 10/15/2024

Version 3.18.9 - 11/18/2024

Version 3.18.8 - 10/24/2024

Versão 3.18.7 - 10/15/2024

`ErrorBio` Object