@id3/kyc

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:

• The front-end application calls the application back-end for a temporary authentication token.
• 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" }
  

• The application backend transmit the bearer token to the application front-end.
• 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
}