Vouched React Native
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.
- Determine the steps needed (ID, ID + Selfie, Reverification)
- Create the Component/Screen(s) for each step
- Use the appropriate Camera (IdCamera or FaceCamera) for the step.
- 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
Object
CardDetectResult {
"instruction" : String,
"step": String,
"image": String?,
"distanceImage": String?
}
Note: shouldn't be POSTed until the step is "POSTABLE"
Object
FaceDetectResult {
"instruction" : String,
"step": String,
"image": String?,
"userDistanceImage": String?
}
Object
BarcodeResult {
"image": String?,
"value": String?
}
Note: shouldn't be POSTed until the step is "POSTABLE"
Object
Job {
"result": JobResult,
"id": String,
"errors": JobError[],
"token": String
}
Object
JobResult {
"id": String?,
"issueDate": String?,
"country": String?,
"confidences": JobConfidence,
"expireDate": String?,
"success": Boolean,
"state": String?,
"lastName": String?,
"firstName": String?,
"birthDate": String?,
"type": String?
}
Object
JobConfidence {
"id": Number?,
"faceMatch": Number?,
"idGlareQuality": Number?,
"idQuality": Number?,
"idMatch": Number?,
"nameMatch": Number?,
"selfie": Number?,
"birthDateMatch": Number?,
"idQuality": Number?
}
Object
JobError {
"type" : String,
"message": String
}
Object
AuthenticateResult {
"match": Number
}
Object
SessionParams {
"callbackURL": String?,
"groupId": String?,
"properties": Property[]?
}
Object
Property {
"name": String,
"value": String,
}
Object
Params {
"birthDate": String?,
"email": String?,
"firstName": String?,
"lastName": String?,
"phone": String?
}
String
LivenessMode "DISTANCE"
| "MOUTH_MOVEMENT"
| "BLINKING"
| "NONE"
String
Step "PRE_DETECTED"
| "DETECTED"
| "POSTABLE"
String
Instruction "ONLY_ONE"
| "MOVE_CLOSER"
| "MOVE_AWAY"
| "HOLD_STEADY"
| "OPEN_MOUTH"
| "CLOSE_MOUTH"
| "LOOK_FORWARD"
| "BLINK_EYES"
| "NO_CARD"
| "NO_FACE"
String
Insight "UNKNOWN"
| "NON_GLARE"
| "QUALITY"
| "BRIGHTNESS"
| "FACE"
| "GLASSES"