NetkiSDK - React Native

Below you will find an overview on how to get going with the React Native installation of the Netki SDK.

Prerequisites

Netki stores our application files in a private repository. This is to protect the proliferation of our code and to control access to a sensitive piece of compliance technology.

Because our repositories are private you will need to be granted access. There are two locations that you will need access to. The npm repository and the Artifactory repository (Android only).

• Provide an email for Netki ops to add Artifactory access
• Provide an NPM username to get NPM access - created at npmjs.com

Supported Versions

We have tested and deployed the Netki React Native SDK on the following versions. These are not exclusive but are what we support currently. You may have luck with other versions. If you run into issues our team may be able to help you get around it or to build a compatible version.

• npm:
• gradle:
• xcode: >=10
• React Native: >=0.60.0

Setup

Due to the similarities we have a unified document for installing both iOS and Android. Most of our clients work inside the OSX ecosystem, but we have successfully onboarded clients in Windows and Linux environments.

There is no preferential order here. Start with what you feel the most comfortable with.

General npm Configuration

1 - Login to npm

CD into your project directory. Then login to npm.

cd <YOUR PROJECT DIR>
npm login

2 - npm Install

Once you have a React Native project created, go to the root folder and execute.

npm install @netki/netki-mobilesdk

Android Setup

1 - Define NetkiSDK version

In the app level $PROJECT/android/build.gradle file add the next information replacing: LATEST.VERSION for the correspond information.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ...
    ext {
        ...
        NETKI_SDK_VERSION = "LATEST.VERSION"
    }
    ...
}

2a - Update your gradle file (.kts)

In the app level $PROJECT/android/build.gradle file add the required repositories.

allprojects {
    repositories {
        ...  
        // Add this repositories
        maven { url "https://art.myverify.io//netki/libs-release-local/" }
        maven { url "https://developer.huawei.com/repo/" }

        // Verify you have this repositories
        google()
        mavenCentral()
        jcenter()
    }
}

2b - Update your gradle file (Code configuration)

In the more recent versions of ReactNative, where the gradle file is configured through code we have to add the following lines to the code.

// In com/facebook/react/utils/DependencyUtils.kt add the  in the 


fun configureRepositories(project: Project, reactNativeDir: File) {
    project.rootProject.allprojects { eachProject ->
        with(eachProject) {

            ...

            // Make sure you have this repositories
            repositories.google()
            repositories.jcenter()

            // Add this repositories
            mavenRepoFromUrl("https://art.myverify.io//netki/libs-release-local/")
            mavenRepoFromUrl("https://developer.huawei.com/repo/")
        }
    }
}

Expo setup

Configuration

The Expo Config Plugin will allow users on the managed workflow to use the Netki React Native SDK by automating the steps listed in the readme, and running them during expo prebuild (automatically run during eas build).

In order to use this, users will need to update their app.json file to include:

    "plugins": [
        "@netki/netki-mobilesdk"
    ],

After that depending your project you can keep configuring the plugin by either using EAS Build or EAS prebuild

If you decide to use EAS Build, make sure to configure a distribution channel and modify the generated package depending your needs.

Usage

To use the NetkiSDK in you .js file you can import it as follows:

// Accesing NetkiSDK
const netkiSDK = require("@netki/netki-mobilesdk").default;

To validate that the SDK is ready to be used you can do it with the method

  netkiSDK.isAvailable(
    (status) => {
        console.log('NetkiSDK available:', status);
    }
  );

The available methods for the SDK are:

// Configure the bussiness context with the token provided
netkiSDK.configureToken(
  API_KEY,
  successCallback,
  errorCallback
);

// Request access code, the phone number needs to start with + sign and the international Code
// This is optional
netkiSDK.requestCode(
  phoneNumber,
  successCallback,
  errorCallback
);

// Validate access code, the phone number needs to start with + sign and the international Code
// This is optional
netkiSDK.validateCode(
  phoneNumber,
  confirmationCode,
  successCallback,
  errorCallback
);

// Set the 2 letter country code before starting the identificationFlow
// To fetch all the countries use netkiSDK.getCountryList(callback)
netkiSDK.setCountry("us");


// Set the document type before starting the identificationFlow
// To fetch all the document types use netkiSDK.getDocumentType(callback)
netkiSDK.setDocumentType("DRIVERS_LICENSE");

// You can set a unique GUID using the method
netkiSDK.setClientGuid("GUID")

// To add extra data to the identification process you can do it with the method
netkiSDK.setBusinessMetadata(JSON.stringify({ key: "value: }));
For example:
netkiSDK.setBusinessMetadata(JSON.stringify({ passport_number: "1234", dui_number: "567" }));

// Start the identificationFlow
netkiSDK.identificationFlow();

// To receive back the information of this flow you should declare DeviceEventEmitter and declare listeners for the following events
DeviceEventEmitter.addListener('identificationSuccess', (event) => {
  console.log("Success identification");
});
DeviceEventEmitter.addListener('identificationError', (error) => {
  // If the 'error' is empty means that the user cancelled the operation, otherise will contain the error description
  console.log(error);
});

// Only after we get a success response from the previous call do we invoke this method
// Submit all the information
netkiSDK.validateInformation(
  successCallback,
  errorCallback
);

// Example
DeviceEventEmitter.addListener('identificationSuccess', (event) => {
    netkiSDK.validateInformation(
      successCallback,
      errorCallback
    );
});

Example

You can find an example of the NetkiSDK integrated in a ReactNative App.tsx file.

Individual Controllers

Also you can make use of the camera controls independentely to capture specific documents, to do that you can use the method

netkiSDK.captureDocument(DOCUMENT_TYPE, DOCUMENT_SIDE);

Where:

DocumentType {
    DRIVERS_LICENSE,
    PASSPORT,
    GOVERNMENT_ID;
}

DocumentSide {
    FRONT,
    BACK,
    SELFIE
}

If you want to enable the liveness detection for the selfie you can do it with the method:

netkiSDK.enableLivenessDetection(true);

// To receive back the information of this capture you should dedclare DeviceEventEmitter and declare listeners for the following events
DeviceEventEmitter.addListener('captureDocumentSuccess', (pictures) => {
  console.log("Success picture");
  console.log(pictures);
});
DeviceEventEmitter.addListener('captureDocumentError', (error) => {
  // If the 'error' is empty means that the user cancelled the operation, otherise will contain the error description
  console.log(error);
});

The result of this actions, will be an array in JSON format of the pictures obtained, the detail of the fields that you will get back is:

data class Picture(
    val path: String,
    val barcodes: List<Barcode> = mutableListOf(),
    val passportContent: PassportContent? = null,
    val livenessActionAttempts: LivenessActionAttempts? = null,
    val type: Picture.Type
)

where:

path: where the image was saved, this is an internal memory that is only accesible to the app, it is not accesible for external app or the user
barcodes: List of all the information extracted from the barcodes found in the identification, this could be empty. This will be available in case that back of DriverLicense was selected
passportContent: Information readed from the MRZ in the passport, this could be null. This will be available in case that front of Passport was selected
type: the type of picture returned

enum class Type {
    FRONT,
    BACK,
    SELFIE,
    FACE_EXTRACTED
}

The barcode object has the following structure:

data class Barcode(
    val rawValue: String,
    val displayValue: String,
    val valueFormat: Int = 0,
    val email: Barcode.Email,
    val phone: Barcode.Phone,
    val sms: Barcode.Sms,
    val wifi: Barcode.WiFi,
    val url: Barcode.UrlBookmark,
    val geoPoint: Barcode.GeoPoint,
    val calendarEvent: Barcode.CalendarEvent,
    val contactInfo: Barcode.ContactInfo,
    val driverLicense: Barcode.DriverLicense
) {

    data class Email(
        val type: Int = 0,
        val address: String,
        val subject: String,
        val body: String
    ) {
        companion object {
            const val UNKNOWN = 0
            const val WORK = 1
            const val HOME = 2
        }
    }

    data class Phone(
        val type: Int = 0,
        val number: String
    ) {
        companion object {
            const val UNKNOWN = 0
            const val WORK = 1
            const val HOME = 2
            const val FAX = 3
            const val MOBILE = 4
        }
    }

    data class Sms(
        val message: String,
        val phoneNumber: String
    )

    data class WiFi(
        val ssid: String,
        val password: String,
        val encryptionType: Int = 0
    )

    data class UrlBookmark(
        val title: String,
        val url: String
    )

    data class GeoPoint(
        val lat: Double = 0.toDouble(),
        val lng: Double = 0.toDouble()
    )

    data class CalendarEvent(
        val summary: String,
        val description: String,
        val location: String,
        val organizer: String,
        val status: String,
        val start: Barcode.CalendarDateTime,
        val end: Barcode.CalendarDateTime
    )

    data class CalendarDateTime(
        val year: Int = 0,
        val month: Int = 0,
        val day: Int = 0,
        val hours: Int = 0,
        val minutes: Int = 0,
        val seconds: Int = 0,
        val isUtc: Boolean = false,
        val rawValue: String
    )

    data class ContactInfo(
        val name: Barcode.PersonName,
        val organization: String,
        val title: String,
        val phones: Array<Barcode.Phone>,
        val emails: Array<Barcode.Email>,
        val urls: Array<String>,
        val addresses: Array<Barcode.Address>
    )

    data class PersonName(
        val formattedName: String,
        val pronunciation: String,
        val prefix: String,
        val first: String,
        val middle: String,
        val last: String,
        val suffix: String
    )

    data class Address(
        val type: Int = 0,
        val addressLines: Array<String>
    ) {
        companion object {
            const val UNKNOWN = 0
            const val WORK = 1
            const val HOME = 2
        }
     }

    data class DriverLicense(
        val documentType: String,
        val firstName: String,
        val middleName: String,
        val lastName: String,
        val gender: String,
        val addressStreet: String,
        val addressCity: String,
        val addressState: String,
        val addressZip: String,
        val licenseNumber: String,
        val issueDate: String,
        val expiryDate: String,
        val birthDate: String,
        val issuingCountry: String
    )
}

The passport object has the following structure:

data class PassportContent(
    val text: String,
    val nameGroup: String,
    val givenName: String,
    val surName: String,
    val birthDate: String,
    val docType: String,
    val issuer: String,
    val documentNumber: String,
    val nation: String,
    val sex: String,
    val expiryDate: String,
    val personalNumber: String,
    val visaId: String,
    val invitNumber: String
)

The livenessActionAttempts are the values resulted of the liveness validation if it was executed.