Announcements

• 🙏 If you have a question, please opening a new issue.

viettel-ekyc-sdk

Setup

This library is available on npm, install it with: npm i viettel-ekyc-sdk or yarn add viettel-ekyc-sdk. This library depends on some common react-native packages:

• react-native-camera
• react-native-vector-icons
• react-native-fs
• react-native-rectangle-scanner
• react-native-screens
• react-native-sound
• react-native-svg
• react-native-image-picker
• react-native-image-resizer

npm i react-native-vector-icons react-native-fs react-native-rectangle-scanner react-native-screens react-native-sound react-native-svg react-native-image-picker react-native-image-resizer react-native-safe-area-context @react-native-community/image-editor react-native-camera@git+https://github.com/danieloprado/react-native-camera.git#feature/euler-angle-x

Or

yarn add react-native-vector-icons react-native-fs react-native-rectangle-scanner react-native-screens react-native-sound react-native-svg react-native-image-picker react-native-image-resizer react-native-safe-area-context @react-native-community/image-editor react-native-camera@git+https://github.com/danieloprado/react-native-camera.git#feature/euler-angle-x

Permissions

To use this package,

1. On Android you must ask for permission:

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

2. On iOS, you must update Info.plist with a usage description

...
<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>
...
	

Config

1. react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in android/app/src/main/java//MainActivity.java.

Add the following code to the body of MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and make sure to add an import statement at the top of this file:

import android.os.Bundle;

2. react-native-camera package requires one additional configuration step to properly work on Android devices. Edit build.gradle file which is located in android/app/build.gradle

Add the following code:

defaultConfig {
    ....
    missingDimensionStrategy 'react-native-camera', 'mlkit'
}

3. react-native-rectangle-scanner requires one additional configuration step to properly work on Android devices. Edit settings.gradle file which is located in android/settings.gradle

Add the following code:

include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-rectangle-scanner/android/openCVLibrary310')

4. If has bug when compile "Execution failed for task ':app:packageDebug'. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable. > Java heap space", edit file gradle.properties file which is located in android/gradle.properties

Add the following code to bottom file:

org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true
org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=4096m -XX:+HeapDumpOnOutOfMemoryError

Usage

1. Import viettel-ekyc-sdk:

import {configApi, ViettelEkycScreen} from "viettel-ekyc-sdk";

2. Create a <ViettelEkycSdk> component and nest its content inside of it:

const screen = () => {
  return (<ViettelEkycScreen
    type='ocrFront'
    enableCheckSanity={true}
    enableCheckTempering={true}
    enableAddFace={false}
    showResultScreen={true}
    enableAutoCaptureCard={true}
    enableAutoCaptureFace={false}
    initialCamera={initialCamera}
    faceLivenessConfiguration={faceConfiguration}
    getResult={(response) => {
      console.log(response.cardInfo)
      console.log(response.faceMatching)
    }}
  />)
}

A complete example

import React, {useEffect} from 'react';
import {configApi, ViettelEkycScreen} from 'viettel-ekyc-sdk';

const initialCamera = {
  flash: 'off',
  zoom: 1,
  autoFocus: 'on',
  ratio: '16:9',
  type: 'back',
  canDetectFaces: true,
};

const faceConfiguration = {
  yawAngle: 20,
  pitchAngle: 10,
  rollAngle: 0,
  smilingProbability: 0.5,
  requireList: ['smile'],
};

const token = ''; // Add token here
const clientCode = ''; // Add clientCode here
const App = () => {
  useEffect(() => {
    configApi(token, clientCode).then(() => console.log('Config api done'));
  }, []);

  return (
    <ViettelEkycScreen
      type="ocrFront"
      enableCheckSanity={true}
      enableCheckTempering={true}
      enableAddFace={false}
      showResultScreen={true}
      enableAutoCaptureCard={true}
      enableAutoCaptureFace={false}
      initialCamera={initialCamera}
      faceLivenessConfiguration={faceConfiguration}
      getResult={response => {
        console.log(response.cardInfo);
        console.log(response.faceMatching);
      }}
    />
  );
};