My Demo SDK

A custom React Native SDK for identity verification. This SDK provides a set of components and APIs to easily integrate identity verification flows into your React Native application.

Getting Started

This guide will walk you through the process of installing, configuring, and using the SDK in your React Native project.

Prerequisites

• Node.js >= 18
• Watchman (for macOS)
• A React Native project setup. See the React Native Environment Setup documentation for more details.

Installation

1. Install the SDK and its dependencies:

   From your project's root directory, run one of the following commands:

   # Using npm
   npm install @react-native-ml-kit/text-recognition @react-navigation/native @react-navigation/native-stack dynamsoft-capture-vision-react-native react-native-device-info react-native-fs react-native-geolocation-service react-native-image-resizer react-native-vision-camera react-native-exif
   
   # Using Yarn
   yarn add @react-native-ml-kit/text-recognition @react-navigation/native @react-navigation/native-stack dynamsoft-capture-vision-react-native react-native-device-info react-native-fs react-native-geolocation-service react-native-image-resizer react-native-vision-camera react-native-exif

2. Install iOS dependencies:

   cd ios && pod install

Configuration

iOS

In your ios/YourProjectName/Info.plist file, add the following keys:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera for identity verification.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your location for identity verification.</string>

Android

In your android/app/src/main/AndroidManifest.xml file, add the following permissions:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Babel (for Frame Processors)

If you plan to use Frame Processors with react-native-vision-camera (e.g., for real-time analysis), you need to add the react-native-reanimated babel plugin.

In your babel.config.js file, add the following:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // ... other plugins
    'react-native-reanimated/plugin',
  ],
};

Usage

The main component of this SDK is IDMScan. You can use it in your application like this:

import React from 'react';
import { IDMScan } from 'demo-testing-sdk';

const App = () => {
  const config = {
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    environment: 'sandbox',
    requestData: {
        requestID: 'YOUR_REQUEST_ID'
    }
  };

  return <IDMScan {...config} />;
};

export default App;

IDMScan Props

The IDMScan component accepts a single idmConf object with the following properties:

| Parameter | Type | Description | | ---------------- | ---------------------------------- | --------------------------------------------------------------------------- | | clientID | string | Required. Your client ID for the service. | | clientSecret | string | Required. Your client secret for the service. | | environment | 'sandbox' \| 'production' | Required. The environment to use for the API. | | requestData | RequestData | Required. An object containing the requestID. | | configuration | Configuration | Optional. See Configuration section below for details. | | requestConfiguration | RequestConfiguration | Optional. See RequestConfiguration section below for details. | | accessToken | string | Optional. An existing access token to use for API requests. | | theme | 'light' \| 'dark' \| Theme | Optional. The theme for the UI. Can be 'light', 'dark', or a custom theme object. |

Configuration Object

| Parameter | Type | Description | | ----------------------------- | --------- | --------------------------------------------------------------------------- | | logo | string | Optional. A URL to a custom logo to be displayed in the UI. | | hideFooter | boolean | Optional. If true, the footer will be hidden. | | skipInputName | boolean | Optional. If true, the user will not be prompted to input their name. | | enableLiveVideo | boolean | Optional. If true, the live video feature will be enabled. | | defaultWebTemplate | boolean | Optional. If true, the default web template will be used. | | tenantName | string | Optional. The name of the tenant to be displayed in the UI. | | geoLocationRequired | boolean | Optional. If true, the user will be required to provide their location. | | showEndUserVerificationHistory | boolean| Optional. If true, the end user's verification history will be shown. | | enableLiveVideoMode | boolean | Optional. If true, the live video mode will be enabled. | | showFooterTenantName | boolean | Optional. If true, the tenant name will be shown in the footer. |

RequestConfiguration Object

| Parameter | Type | Description | | --------------------- | --------- | --------------------------------------------------------------------------- | | requestID | string | Optional. A request ID to be used for the verification process. | | callbackURL | string | Optional. A callback URL to which the results will be sent. | | uniqueID | string | Optional. A unique ID for the user. | | documentType | string | Optional. The type of document to be scanned (e.g., 'ID_CARD', 'PASSPORT'). | | skipBarcode | boolean | Optional. If true, the barcode scanning step will be skipped. | | skipLiveness | boolean | Optional. If true, the liveness check will be skipped. | | enableCardBackCapture| boolean| Optional. If true, the back of the card will be captured. |

Project Structure

The project is structured as follows:

• src/: Contains the source code for the SDK.
  • apis/: Functions for interacting with the backend API.
  • components/: Reusable UI components.
  • context/: React context providers for managing state.
  • hooks/: Custom React hooks.
  • pages/: The main screens of the SDK flow.
  • services/: Services for handling tasks like geolocation and device info.
  • styles/: Stylesheets for the components and screens.
  • types/: TypeScript type definitions.

Troubleshooting

Issue: "Permission not granted" error on iOS or Android.

• Solution: Ensure that you have added the necessary permissions to your Info.plist (for iOS) and AndroidManifest.xml (for Android) as described in the "Configuration" section.

Issue: App crashes on startup after installing dependencies.

• Solution: Make sure you have run cd ios && pod install after installing the npm packages. If you are still having issues, try cleaning your project's build folder and reinstalling the dependencies.

Issue: react-native-reanimated is not working correctly.

• Solution: Ensure that you have added the react-native-reanimated/plugin to your babel.config.js file as described in the "Configuration" section. You may also need to clean your project and restart the metro bundler.

Direct API Usage

You can also use the exported API functions directly to have more control over the verification flow.

generateAccessToken

Generates an OAuth2 access token.

Signature:

generateAccessToken(idmConf: IDMConf): Promise<string>

Example:

import { generateAccessToken } from 'demo-testing-sdk';

const idmConf = {
  clientID: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET',
  environment: 'sandbox',
};

try {
  const accessToken = await generateAccessToken(idmConf);
  console.log('Access Token:', accessToken);
} catch (error) {
  console.error('Error generating access token:', error);
}

generateRequest

Initiates a verification request.

Signature:

generateRequest(idmConf: IDMConf, requestData: RequestData): Promise<any>

Example:

import { generateRequest } from 'demo-testing-sdk';

const idmConf = {
  accessToken: 'YOUR_ACCESS_TOKEN',
  environment: 'sandbox',
};

const requestData = {
  requestID: 'YOUR_REQUEST_ID',
  // ... other request data
};

try {
  const response = await generateRequest(idmConf, requestData);
  console.log('Verification Code:', response.verificationCode);
} catch (error) {
  console.error('Error generating request:', error);
}

checkLiveness

Performs a liveness check on a captured selfie.

Signature:

checkLiveness(idmConf: IDMConf, photoData: any): Promise<any>

Example:

import { checkLiveness } from 'demo-testing-sdk';

// photoData should be a FormData object with the image file
const photoData = new FormData();
photoData.append('file', {
  uri: 'file:///path/to/selfie.jpg',
  type: 'image/jpeg',
  name: 'selfie.jpg',
});
// ... add other required data to photoData

try {
  const livenessResult = await checkLiveness(idmConf, photoData);
  console.log('Liveness Result:', livenessResult);
} catch (error) {
  console.error('Error checking liveness:', error);
}