@vouched.id/vouched-react-native

1.3.0 • Public • Published

Vouched React Native

npm version

Get Started

If this is your first time here, Run the Example to get familiar.
If you're ready to add this to your existing project, Install the Package.

Run Example

Clone this repo and change directory to example

git clone https://github.com/vouched/vouched-react-native
cd vouched-react-native/example

Then, follow steps listed on the example README

Prerequisites

  • An account with Vouched
  • Your Vouched Public Key

Install

Add the package to your existing project

yarn add @vouched.id/vouched-react-native

Link the package

react-native link @vouched.id/vouched-react-native

iOS pods are not automatically installed, so we'll need to manually install them

 cd ios && pod install

Ensure all prerequisites have been met.

Create Verification Flow

Note: Be sure to review the IDScreen, BackIDScreen and FaceScreen in the example app to get a sense of possible behaviors you can use in your app's verification flow. Some IDs require processing both front and back sides.

  1. Determine the steps needed (ID, ID + Selfie, Reverification)
  2. Create the Component/Screen(s) for each step
  3. Use the appropriate Camera (IdCamera or FaceCamera) for the step.
  4. Ensure session.confirm is called once verification is complete to recieve finalized job data.

Reference

VouchedSession

This class handles a user's Vouched session. It takes care of the API calls

Initialize a session
const session = new VouchedSession(apiKey, sessionParams);

Parameters - String, SessionParams

POST Front Id image
const job = await session.postFrontId(cardDetectionResult, params);

Parameters - CardDetectResult, Params
Returns - Job

POST Back Id image
const job = await session.postBackId(cardDetectionResult, params);

Parameters - CardDetectResult, Params Returns - Job

POST Selfie image
const job = await session.postFace(faceDetectionResult);

Parameters - FaceDetectResult
Returns - Job

POST Re-verification

Reverification requires a job ID to match against, and photoType of "selfie" or "id", which indicates whether to match the reverification selfie against the original selfie or photo ID

const authResult = await session.postReverify(
  faceDetectionResult,
  jobId,
  photoType
);

Parameters - FaceDetectResult, String, String
Returns - Job

POST confirm verification
const job = await session.confirm();

Returns - Job

VouchedUtils

Utility class

Extract Job Insights
const insights = await VouchedUtils.extractInsights(job);

Parameters - Job
Returns - Insight[]

IdCamera

Import and add to View

import { VouchedIdCamera } from '@vouched.id/vouched-react-native';
...

    <VouchedIdCamera
        ref={cameraRef}
        enableDistanceCheck={true}
        onIdStream={async (cardDetectionResult) => {
            const { instruction, step } = cardDetectionResult;
            if (step === "POSTABLE") {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postFrontId(cardDetectionResult);
                    let insights = await VouchedUtils.extractInsights(job);
                    // optionally retry based on insights
                    // proceed to next step
                } catch (e) {
                    // handle error
                }
            } else {
                setMessage(instruction)
            }
        }}
    />
Properties Type Default
enableDistanceCheck Boolean false
onIdStream Callback<CardDetectResult>
Stop IdCamera
cameraRef.current.stop();
Restart IdCamera
cameraRef.current.restart();

FaceCamera

Import and add to View

import { VouchedFaceCamera } from '@vouched.id/vouched-react-native';
...

    <VouchedFaceCamera
        ref={cameraRef}
        livenessMode="DISTANCE"
        onFaceStream={async (faceDetectionResult) => {
            const { instruction, step } = faceDetectionResult;
            if (step === "POSTABLE") {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postFrontId(faceDetectionResult);
                    let insights = await VouchedUtils.extractInsights(job);
                    // optionally retry based on insights
                    // proceed to next step
                } catch (e) {
                    // handle error
                }
            } else {
                setMessage(instruction)
            }
        }}
    />
Properties Type Default
livenessMode LivenessMode "NONE"
onFaceStream Callback<FaceDetectResult>
Stop FaceCamera
cameraRef.current.stop();
Restart FaceCamera
cameraRef.current.restart();

BarcodeCamera

Import and add to View

import { BarcodeCamera } from '@vouched.id/vouched-react-native';
...

    <VouchedBarcodeCamera
        ref={cameraRef}
        onBarcodeStream={async (barcodeResult) => {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postBarcode(barcodeResult);
                    let insights = await VouchedUtils.extractInsights(job);
                    // optionally retry based on insights
                    // proceed to next step
                } catch (e) {
                    // handle error
                }
            } else {
                setMessage(instruction)
            }
        }}
    />
Properties Type Default
onBarcodeStream Callback<BarcodeResult>
Stop FaceCamera
cameraRef.current.stop();
Restart FaceCamera
cameraRef.current.restart();

Types

CardDetectResult Object
{
    "instruction" : String,
    "step": String,
    "image": String?,
    "distanceImage": String?
}

Note: shouldn't be POSTed until the step is "POSTABLE"

FaceDetectResult Object
{
    "instruction" : String,
    "step": String,
    "image": String?,
    "userDistanceImage": String?
}
BarcodeResult Object
{
    "image": String?,
    "value": String?
}

Note: shouldn't be POSTed until the step is "POSTABLE"

Job Object
{
    "result": JobResult,
    "id": String,
    "errors": JobError[],
    "token": String 
}
JobResult Object
{
    "id": String?,
    "issueDate": String?,
    "country": String?,
    "confidences": JobConfidence,
    "expireDate": String?,
    "success": Boolean,
    "state": String?,
    "lastName": String?,
    "firstName": String?,
    "birthDate": String?,
    "type": String?
}
JobConfidence Object
{
    "id": Number?,
    "faceMatch": Number?,
    "idGlareQuality": Number?,
    "idQuality": Number?,
    "idMatch": Number?,
    "nameMatch": Number?,
    "selfie": Number?,
    "birthDateMatch": Number?,
    "idQuality": Number?
}
JobError Object
{
    "type" : String,
    "message": String
}
AuthenticateResult Object
{
    "match": Number
}
SessionParams Object
{
    "callbackURL": String?,
    "groupId": String?,
    "properties": Property[]?
}
Property Object
{
    "name": String,
    "value": String,
}
Params Object
{
    "birthDate": String?,
    "email": String?,
    "firstName": String?,
    "lastName": String?,
    "phone": String?
}
LivenessMode String

"DISTANCE" | "MOUTH_MOVEMENT" | "BLINKING" | "NONE"

Step String

"PRE_DETECTED" | "DETECTED" | "POSTABLE"

Instruction String

"ONLY_ONE" | "MOVE_CLOSER" | "MOVE_AWAY" | "HOLD_STEADY" | "OPEN_MOUTH" | "CLOSE_MOUTH" | "LOOK_FORWARD" | "BLINK_EYES" | "NO_CARD" | "NO_FACE"

Insight String

"UNKNOWN" | "NON_GLARE" | "QUALITY" | "BRIGHTNESS" | "FACE" | "GLASSES"

Package Sidebar

Install

npm i @vouched.id/vouched-react-native

Homepage

vouched.id

Weekly Downloads

737

Version

1.3.0

License

Apache-2.0

Unpacked Size

755 kB

Total Files

122

Last publish

Collaborators

  • imrank1
  • vouchedjayl
  • aaronhill
  • vouched