Skip to content

Latest commit

 

History

History
374 lines (272 loc) · 9.7 KB

README.md

File metadata and controls

374 lines (272 loc) · 9.7 KB

Kvalifika SDK React Native Sample

Use Kvalifika SDK to easily integrate into your React Native app

Table of content:

 

Installation

Add NPM dependency by running

npm install @kvalifika/react-native-sdk

or

yarn add @kvalifika/react-native-sdk

 

For React Native <0.60

If your React Native version is larger than >= 0.60, you can ignore this step. Otherwise, please run the following command:

react-native link @kvalifika/react-native-sdk

 

iOS Specific Steps

Add sources to Podfile and use minimum iOS version 11.0

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/Kvalifika/kvalifika-cocoapods-specs.git'
source 'https://github.com/Kvalifika/zoom-cocoapods-specs.git'

platform :ios, '11.0'

Then navigate to ios folder and run pod install or pod update

Note: pod install might take long time

 

Please add the following permissions to your app's Info.plist, so that the Kvalifika iOS SDK can access a user's camera to run a verification. You can do this in the property list view or by code. Right-click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the 

<!-- permission strings to be include in info.plist -->
<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera, to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>

 

Create Objective C Bridging Header

After the pods are installed, open your project's .xcworkspace file in Xcode. Add a blank Swift file to your project (File -> New -> Swift File), with a bridging header (it will prompt you to auto-create one).

Right click on project's name & select new file.

docs/1.png

Choose and create empty Swift file docs/2.png

Give name to your file docs/3.png

Select Create Bridging Header docs/4.png

 

Android Specific Parts

After installing NPM package, please do following steps to set up Android environment:

Please add following lines to android/build.gradle file:

  1. Set minSdkVersion to 21 or higher
  2. Add maven url to repositories maven { url 'https://s3.eu-central-1.amazonaws.com/com.kvalifika.sdk' }

Code Example

// Top-level build.gradle file

buildscript {
  ext {
    minSdkVersion = 21
  }
}

allprojects {
  repositories {
    google()
    jcenter()
    maven { url 'https://s3.eu-central-1.amazonaws.com/com.kvalifika.sdk' }
  }
}

 

Initialize the SDK

import {
  KvalifikaSDK,
  KvalifikaSDKLocale,
  KvalifikaSDKError,
} from '@kvalifika/react-native-sdk';

After that you need to initialize SDK in useEffect with your appId.

const App = () => {
  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Text>Kvalifika SDK Sample</Text>
    </View>
  );
};

 

Start Verification

Call KvalifikaSDK.startSession() on button press

const App = () => {
  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Button
        onPress={() => KvalifikaSDK.startSession()}
        title="Start Session"
      />
    </View>
  );
};

 

Handling Verifications

It's useful to know if a user has completed the verification flow or canceled it. For this, you can implement the callback methods.

 

Callback Methods

Method Description
onInitialize This callback method is triggered when SDK initializes.
onStart This callback method is triggered when user starts verification.
onFinish This callback method is triggered when user completes verification. Get session data here.
onError This callback method is triggered on error. Error Codes.

 

KvalifikaSDK uses NativeEventEmitter to communicate between Android and iOS native modules.
Make sure to remove callbacks on unmount.

const App = () => {
  useEffect(() => {
    KvalifikaSDK.onInitialize(() => {
      Alert.alert('Kvalifika', 'Kvalifika SDK Initialized');
    });

    KvalifikaSDK.onStart(sessionId => {
      console.log(`Started with id: ${sessionId}`);
    });

    KvalifikaSDK.onFinish(sessionId => {
      Alert.alert('Kvalifika', `Session finished with id: ${sessionId}`);
    });

    KvalifikaSDK.onError((error, message) => {
      console.log(error, message);

      if (error === KvalifikaSDKError.INVALID_APP_ID) {
      }

      if (error === KvalifikaSDKError.USER_CANCELLED) {
      }

      if (error === KvalifikaSDKError.TIMEOUT) {
      }

      if (error === KvalifikaSDKError.USER_CANCELLED) {
      }

      if (error === KvalifikaSDKError.SESSION_UNSUCCESSFUL) {
      }

      if (error === KvalifikaSDKError.ID_UNSUCCESSFUL) {
      }

      if (error === KvalifikaSDKError.CAMERA_PERMISSION_DENIED) {
      }

      if (error === KvalifikaSDKError.LANDSCAPE_MODE_NOT_ALLOWED) {
      }

      if (error === KvalifikaSDKError.REVERSE_PORTRAIT_NOT_ALLOWED) {
      }

      if (error === KvalifikaSDKError.FACE_IMAGES_UPLOAD_FAILED) {
      }

      if (error === KvalifikaSDKError.DOCUMENT_IMAGES_UPLOAD_FAILED) {
      }
      
      if (error === KvalifikaSDKError.NO_MORE_ATTEMPTS) {
      }

      if (error === KvalifikaSDKError.UNKNOWN_INTERNAL_ERROR) {
      }
    });

    return () => {
      // Remove callbacks to avoid duplicate listeners if useEffect runs multiple times or remounts
      KvalifikaSDK.removeCallbacks();
    };
  }, []);

  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Button
        onPress={() => KvalifikaSDK.startSession()}
        title="Start Session"
      />
    </View>
  );
};

 

Error Codes

Error Code Description
INVALID_APP_ID Kvalifika App Id is incorrect
USER_CANCELLED User cancelled before completing verification.
TIMEOUT Cancelled due to inactivity.
SESSION_UNSUCCESSFUL The Session was not performed successfully.
ID_UNSUCCESSFUL The ID Scan was not performed successfully and identity document data was not generated.
CAMERA_PERMISSION_DENIED Camera is required but access prevented by user settings.
LANDSCAPE_MODE_NOT_ALLOWED Verification cancelled because device is in landscape mode.
REVERSE_PORTRAIT_NOT_ALLOWED Verification cancelled because device is in reverse portrait mode.
FACE_IMAGES_UPLOAD_FAILED Could not upload face images. Internal request failed.
DOCUMENT_IMAGES_UPLOAD_FAILED Could not upload ID card or passport images. Internal request failed.
NO_MORE_ATTEMPTS User has reached maximum limit of attempts
UNKNOWN_INTERNAL_ERROR Session failed because of an unhandled internal error. This error comes with message.

 

UI Customizations

Appearance

You can customize logo and icons. Add image in Android drawable resources folder (res/drawable folder) and reference it with filename

KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  locale: KvalifikaSDKLocale.EN,
  logo: 'logo',
  documentIcon: 'document_icon',
  cancelIcon: 'cancel_icon',
  activeFlashIcon: 'active_flash_icon',
  inactiveFlashIcon: 'inactive_flash_icon',
});

 

Language

You can set locale when initializing SDK Supported locales are:

Code Language
EN English
GE Georgian
RU Russian
SP Spanish 
KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  locale: KvalifikaSDKLocale.EN,
});

 

Development Mode

Without specifying mode SDK uses https://api.kvalifika.com

With development mode ON SDK uses https://apistaging.kvalifika.com

KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  development: true,
});

 

ProGuard (Android)

If you are using ProGuard in Android release build add following options to ProGuard file:

-keep class com.facetec.sdk.** { *; }