React Native 2.0.x ui only

Installation

Common

1. Add Trust Vision React Native lib

Add to package.json file under dependencies group:

"react-native-trust-vision-SDK": "git+https://github.com/tsocial/react-native-trust-vision-SDK#<version_tag_name>"

2. Run

$ yarn

iOS

1. Add to podfile

...
pod 'RNTrustVisionRnsdkFramework', path: '../node_modules/react-native-trust-vision-SDK'

2. Run

$ pod install

Android

Add to root-level build.gradle file (host app):

maven {
     url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
}

eg:

allprojects {
    repositories {
        mavenLocal()
        ...
        maven {
             url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
        }
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

Add to app/build.gradle

android {
    ...
    aaptOptions {
        noCompress "tflite"
        noCompress "lite"
    }
}

Usage

JavaScript
import { NativeEventEmitter } from "react-native";

import RNTrustVisionRnsdkFramework, {
  TVConst,
  TVErrorCode,
} from "react-native-trust-vision-SDK";

Full steps:

JavaScript
try {
  await RNTrustVisionRnsdkFramework.initialize(
    clientSettingJsonString,
    "vi",
    true
  );

  const tvsdkEmitter = new NativeEventEmitter(RNTrustVisionRnsdkFramework);
  const subscription = tvsdkEmitter.addListener("TVSDKEvent", (event) => {
    console.log("TVSDK - " + event.name + " - " + event.params.page_name);
  });

  const cardType = {
    id: "card_id",
    name: "card_name",
    orientation: TVConst.Orientation.LANDSCAPE,
    hasBackSide: true,
  };
  const idConfig = {
    cardType: cardType,
    isEnableSound: false,
    isReadBothSide: true,
    cardSide: TVConst.CardSide.FRONT,
  };
  console.log("Id Config", idConfig);
  const idResult = await RNTrustVisionRnsdkFramework.startIdCapturing(idConfig);
  console.log("Id Result", idResult);
} catch (e) {
  console.log("Error: ", e.code, " - ", e.message);
}

1. Initialize SDK

SDK needs to be initialized first

JavaScript
await RNTrustVisionRnsdkFramework.initialize(
  clientSettingJsonString,
  "vi", // language code
  true // enable event or not
);

Options:

  • clientSettingsJsonString: string. The jsonConfigurationByServer is optional but recommended. It's the setting specialized for each client from TS server. It's the response json string get by API https://ekyc.trustingsocial.com/api-reference/customer-api/#get-client-settings. When it's null or unmatched with the expected type then the default setting in the SDK will be used.
  • languageCode: string. Language code. vi or en
  • enableEventTracking: bool. Enable event tracking or not

2. Start the SDK

The SDK provides some built in functions to capture id, selfie, liveness...

2.2. Start ID card capturing

2.2.1. Set config parameters
JavaScript
const idConfig = {
  cardType: cardType,
  cardSide: TVConst.CardSide.FRONT,
  isEnableSound: false,
  isReadBothSide: true,
  skipConfirmScreen: true,
  isEnablePhotoGalleryPicker: false,
};

Options:

  • cardType: CardType. Card type
  • cardSide: TVConst.CardSide. Card side
  • isEnableSound: bool. Sound is played or not
  • isReadBothSide: bool. Read both sides of id card or not
  • skipConfirmScreen: bool. Skip confirmation screen or not
  • isEnablePhotoGalleryPicker: bool. Allow user select id card image from phone gallery
2.2.2. Start flow
JavaScript
const result = await RNTrustVisionRnsdkFramework.startIdCapturing(config);
2.2.3. Handle Id card images

if result.frontIdQr.is_required is true then result.frontIdQr.images array should be non-empty. Otherwise, clients should be warned to re-capture id card photos.

QR imagegs will be uploaded with this api: https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-image

  • Fields:
    • data: result.frontIdQr.images[i].raw_image_base64
    • label: result.frontIdQr.images[i].label
    • metadata: result.frontIdQr.images[i].metadata

*The same logic will be applied to result.backIdQr

2.3. Start selfie capturing

2.3.1. Set config parameters
JavaScript
const config = {
  cameraOption: TVConst.SelfieCameraMode.FRONT,
  isEnableSound: true,
  livenessMode: TVConst.LivenessMode.PASSIVE,
  skipConfirmScreen: true,
};

Options:

  • cameraOption: TVConst.SelfieCameraMode. Camera option
  • isEnableSound: bool. Sound is played or not
  • livenessMode: TVConst.LivenessMode. Liveness mode
  • skipConfirmScreen: bool. Skip confirmation screen or not
2.3.2. Start flow
JavaScript
const result = await RNTrustVisionRnsdkFramework.startSelfieCapturing(config);
2.3.3. Handle selfie image list
2.3.3.1. Use this api to get image id:

https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-image

id of frontal image i = image id of result.selfieImages[i].frontal_image.raw_image_base64 id of gesture image i = image id of result.selfieImages[i].gesture_image.raw_image_base64

2.3.3.2. Use this api to get video id:

https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-videoaudioframes id of selfie video i = video id of result.livenessVideos[i]

2.3.3.3. Call this api to check liveness

https://ekyc.trustingsocial.com/api-reference/customer-api/#verify-face-liveness with params

  • images field, each element contains:
JSON
{
  "id": "<id of frontal image i>"
}
  • gesture_images field, each element contains:
JSON
{
  "gesture": "lower case string of <result.selfieImages[i].gesture_type>",
  "images": [
    {
      "id": "<id of gesture image i>"
    }
  ]
}

  • videos field is a list which comprises 2 lists:

    • (i) Liveness videos. Each element contains:
    {
    "id": "<id of selfie video i>" (step 2)
}
    • (ii) Liveness frames list:
    result.livenessVideoFramesList

  • metadata field is result.livenessMetadata

3. Result Handling:

  • result:

    • cardType: CardType. Card type

    • actionMode: TVConst.ActionMode. Action Mode

    • selfieImages: [SelfieImage]. List of selfie image objects

    • livenessVideos: [Base64 String]. List of liveness videos data base64

    • livenessMetadata: json

    • livenessVideoFramesList: [json]

    • idFrontImage: ImageClass. Id front image object

    • idBackImage: ImageClass. Id back image object

    • frontIdQr: TVCardQr. Front Id card's QR info

    • backIdQr: TVCardQr. Back Id card's QR info

    • frontIdCapturingVideoFramesList: json

    • backIdCapturingVideoFramesList: json

  • SelfieImage:

    • gesture_type: String. UP | DOWN | LEFT | RIGHT | FRONTAL
    • frontal_image: ImageClass. Frontal image object
    • gesture_image: ImageClass. Gesture image object

  • ImageClass:

    • raw_image_base64: String. Base64 string of image data
    • label: String. Image label
    • metadata: json. Image metadata

  • TVCardQr:

    • is_required: Bool. This side of card contains QR or not
    • images: [ImageClass]. QR images

  • Error:

    • errorCode: String. The specific error code
    • description: String. The human-readable error description can be show to end user