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

3. 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"
></id3-kyc>

Properties

| Name | Type | Default | Description | | ----------------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | authorization | string | default | Bearer token returned by the authentication process | | apiUrl | string | default | Base URL of the API | | language | LanguageSupportedType | | Set the language manually (LanguageSupportedType = 'en' | 'fr' | 'es'). If the parameter is not filled in and the browser language is not supported, spanish is used. | | blinkIdLicenseKey | string | | Blink ID license key |

Events

| Name | Parameters | Description | | ------------------ | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | startEvent | | Callback invoked when the process is started. | | endEvent | Document information and match decision | Callback invoked when the process is done. | | cancelEvent | | Callback invoked on cancel button click. | | authTimeOutHandler | | Callback invoked on secured session invalid. Authorization token has to be renewed by authenticating to the API. |

Exemple of information returned by endEvent:

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