@id3/kyc v2.1.0

Id3 KYC - Angular web component

This component offers the following features:

• Live capture or from gallery import of Columbian identity documents thanks to Blink ID in browser SDK.
• Liveness detection from a camera thanks to id3 Face PAD web component.
• A face match process between the ID card photo and the photo captured during liveness detection.
• Display of ID card information.

You can find a live demo here

Table of content

• Id3 KYC - Angular web component
  • Table of content
    • Integration instructions
      • Authentication requirements
        • Web component authentication

Integration instructions

Authentication requirements

An API key, an API url and a Blink ID license key are required to use this web component.

Web component authentication

The authentication process shall be performed from the application backend to avoid making the API key in website source code.

The authentication process consists in the following steps: 1. The front-end application calls the application back-end for a temporary authentication token. 2. Call to API /authenticate from the back-end with the API Key

 POST Request
 Url : api_url/authenticate
 Body (json): { "key" : "$your_api_key_to_insert_here" }
 Response (json) : { "bearerToken" : "the_generated_token_to_give_to_the_web_component" }
 ```
4. The application backend transmit the bearer token to the application front-end.
4. Set the Bearer Token to the attribute `authorization` of the web component.

#### Installation

npm i @id3/kyc --save

#### Usage
The web component can be imported into an Angular application using the following code instruction:

import { Id3KycModule } from '@id3/kyc';

Then, the **Id3KycModule** has to be imported in the app.module.ts file:

... imports: ..., Id3KycModule, ... , ...

#### Assets

The Kyc component uses images and Microblink SDK contained in its assets folder. So, glob patterns have to be included in the `assets` section of the `build` section of the angular.json file:

... "assets": { "glob": "/*", "input": "node_modules/@id3/kyc/assets/", "output": "/assets/" }, { "glob": "/*", "input": "node_modules/@microblink/blinkid-in-browser-sdk/resources/", "output": "/assets/lib/" } ... , ...

#### Apply styles

The component uses bootstrap for theming, so that bootstrap css and js and jquery js have to be included in the `style` and `script` sections of the `build` section of the angular.json file:

... "styles": "node_modules/bootstrap/dist/css/bootstrap.min.css", ... , "scripts": "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", ... ...

##### Minimal example

The Id3 KYC web component hasto be added into an html page or a template file:

<id3-kyc authorization="$apiKey" apiUrl="$apiEndpoint" language="$language" blinkIdLicenseKey="$blinkIdLicenseKey"

Properties

Events

Exemple of information returned by endEvent:

{
    biographics: {
        NUIP: "__",
        lastNames: "__",
        firstNames: "__",
        particle: "__",
        sex: "__"
    },
    faceMatch: boolean
}