Aziface sdk adapter to react native. π±
- Installation
- Usage
- API
-
Types
AzifaceSdkProps.Params
AzifaceSdkProps.Headers
AzifaceSdkProps.Theme
AzifaceSdkProps.ButtonLocation
AzifaceSdkProps.StatusBarColor
AzifaceSdkProps.FeedbackBackgroundColor
AzifaceSdkProps.Point
AzifaceSdkProps.DefaultMessage
AzifaceSdkProps.DefaultScanMessage
AzifaceSdkProps.Errors
AzifaceSdkProps.MatchType
AzifaceSdkProps.MatchData
- Native Events
- How to add images in AzifaceSDK module?
- Limitations and Features
- Contributing
- License
npm install @azify/aziface-mobile
import * as React from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
ScrollView,
NativeEventEmitter,
} from 'react-native';
import AzifaceSdk, {
AzifaceSdkProps,
initialize,
faceMatch,
photoMatch,
} from '@azify/aziface-mobile';
export default function App() {
const init = async () => {
/*
* The SDK must be initialized first
* so that the rest of the library
* functions can work!
*
* */
const headers = {
'clientInfo': 'YUOR_CLIENT_INFO',
'contentType': 'YOUR_CONTENT_TYPE',
'device': 'YOUR_DEVICE',
'deviceid': 'YOUR_DEVICE_ID',
'deviceip': 'YOUR_DEVICE_IP',
'locale': 'YOUR_LOCALE',
'xForwardedFor': 'YOUR_X_FORWARDED_FOR',
'user-agent': 'YOUR_USER_AGENT',
};
const params = {
device: 'YOUR_DEVICE',
url: 'YOUR_BASE_URL',
key: 'YOUR_KEY',
productionKey: 'YOUR_PRODUCTION_KEY',
};
const isInitialized = await initialize({
params,
headers,
});
console.log(isInitialized);
};
const emitter = new NativeEventEmitter(AzifaceSdk);
emitter.addListener('onCloseModal', (event: boolean) =>
console.log('onCloseModal', event)
);
const onPressPhotoMatch = async () => {
try {
const isSuccess = await photoMatch();
console.log(isSuccess);
} catch (error: any) {
console.error(error.message);
}
};
const onPressFaceMatch = async (
type: AzifaceSdkProps.MatchType,
data?: AzifaceSdkProps.MatchData
) => {
try {
const isSuccess = await faceMatch(type, data);
console.log(isSuccess);
} catch (error: any) {
console.error(error.message);
}
};
return (
<ScrollView style={styles.container}>
<View style={styles.content}>
<TouchableOpacity style={styles.button} onPress={init}>
<Text style={styles.text}>Init Aziface Module</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={onPressPhotoMatch}>
<Text style={styles.text}>Open Photo Match</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={async () => await onPressFaceMatch('enroll')}
>
<Text style={styles.text}>Open Enroll</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={async () =>
await onPressFaceMatch('authenticate', { id: '123456' })
}
>
<Text style={styles.text}>Open Authenticate</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={async () => await onPressFaceMatch('liveness')}
>
<Text style={styles.text}>Open Liveness</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
content: {
justifyContent: 'center',
alignItems: 'center',
marginVertical: 30,
},
button: {
width: '100%',
backgroundColor: '#4a68b3',
padding: 20,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
marginVertical: 20,
},
text: {
color: 'white',
fontWeight: '700',
fontSize: 22,
},
});
Methods | Return Type | iOS | Android |
---|---|---|---|
initialize(init: AzifaceSdkProps.Initialize) |
Promise<boolean> |
β | β |
faceMatch(type: AzifaceSdkProps.MatchType, data?: AzifaceSdkProps.MatchData |
Promise<boolean> |
β | β |
photoMatch(data?: Object) |
Promise<boolean> |
β | β |
setTheme(options?: AzifaceSdkProps.Theme) |
void |
β | β |
This is the principal method to be called, he must be called first to initialize the Aziface SDK. If he doens't be called the other methods don't works!
AzifaceSdkProps.Initialize |
type | Required | Default |
---|---|---|---|
params |
AzifaceSdkProps.Params |
β | - |
headers |
AzifaceSdkProps.Headers |
β | undefined |
This method is called to make enrollment, authenticate and liveness available. The type is required and it must provided to select which flow you are interested.
- Enrollment: This method makes a 3D reading of the user's face. But, you must use to subscribe user in Aziface SDK or in your server.
- Authenticate: This method makes a 3D reading of the user's face. But, you must use to authenticate user in Aziface SDK or in your server.
- Liveness: This method makes a 3D reading of the user's face.
Object |
type | Required | Default |
---|---|---|---|
type |
AzifaceSdkProps.MatchType |
β | - |
data |
AzifaceSdkProps.MatchData |
β | undefined |
This method make to read from face and documents for user, after comparate face and face documents from user to check veracity.
Object |
type | Required | Default |
---|---|---|---|
data |
Object |
β | undefined |
This method must be used to set the theme of the Aziface SDK screen.
AzifaceSdkProps.Theme |
type | Required | Default |
---|---|---|---|
options |
AzifaceSdkProps.Theme |
β | undefined |
AzifaceSdkProps - Types |
iOS | Android |
---|---|---|
AzifaceSdkProps.Params |
β | β |
AzifaceSdkProps.Headers |
β | β |
AzifaceSdkProps.Theme |
β | β |
AzifaceSdkProps.ButtonLocation |
β | β |
AzifaceSdkProps.StatusBarColor |
β | β |
AzifaceSdkProps.FeedbackBackgroundColor |
β | β |
AzifaceSdkProps.Point |
β | β |
AzifaceSdkProps.DefaultMessage |
β | β |
AzifaceSdkProps.Errors |
β | β |
AzifaceSdkProps.MatchType |
β | β |
AzifaceSdkProps.MatchData |
β | β |
Here must be passed to initialize the Aziface SDK! Case the parameters isn't provided the Aziface SDK goes to be not initialized.
AzifaceSdkProps.Params |
type | Required |
---|---|---|
device |
string |
β |
url |
string |
β |
key |
string |
β |
productionKey |
string |
β |
isDeveloperMode |
boolean |
β |
Here you can add your headers to send request when some method is called. Only values from type string, null or undefined are accepts!
AzifaceSdkProps.Headers |
type | Required | Default |
---|---|---|---|
[key: string] |
string , null or undefined
|
β | undefined |
This is a list of theme properties that can be used to styling. We recommend that you use hexadecimal values for colors. RGB, RGBA, HSL and HSLA colors are also supported.
AzifaceSdkProps.Theme |
type | iOS | Android | Required | Default |
---|---|---|---|---|---|
logoImage |
string |
β | β | β | facetec_your_app_logo.png |
cancelImage |
string |
β | β | β | facetec_cancel.png |
cancelButtonLocation |
AzifaceSdkProps.ButtonLocation |
β | β | β | TOP_RIGHT |
defaultStatusBarColorIos |
AzifaceSdkProps.StatusBarColor |
β | β | β | DARK_CONTENT |
frameCornerRadius |
number |
β | β | β |
10 (iOS) and 20 (Android) |
frameBackgroundColor |
string |
β | β | β | #FFFFFF |
frameBorderColor |
string |
β | β | β | #FFFFFF |
overlayBackgroundColor |
string |
β | β | β | #FFFFFF |
guidanceBackgroundColorsAndroid |
string |
β | β | β | #FFFFFF |
guidanceBackgroundColorsIos |
string[] |
β | β | β | ["#FFFFFF", "#FFFFFF"] |
guidanceForegroundColor |
string |
β | β | β | #272937 |
guidanceButtonBackgroundNormalColor |
string |
β | β | β | #026FF4 |
guidanceButtonBackgroundDisabledColor |
string |
β | β | β | #B3D4FC |
guidanceButtonBackgroundHighlightColor |
string |
β | β | β | #0264DC |
guidanceButtonTextNormalColor |
string |
β | β | β | #FFFFFF |
guidanceButtonTextDisabledColor |
string |
β | β | β | #FFFFFF |
guidanceButtonTextHighlightColor |
string |
β | β | β | #FFFFFF |
guidanceRetryScreenImageBorderColor |
string |
β | β | β | #FFFFFF |
guidanceRetryScreenOvalStrokeColor |
string |
β | β | β | #FFFFFF |
ovalStrokeColor |
string |
β | β | β | #026FF4 |
ovalFirstProgressColor |
string |
β | β | β | #0264DC |
ovalSecondProgressColor |
string |
β | β | β | #0264DC |
feedbackBackgroundColorsAndroid |
string |
β | β | β | #026FF4 |
feedbackBackgroundColorsIos |
AzifaceSdkProps.FeedbackBackgroundColor |
β | β | β | FeedbackBackgroundColor |
feedbackTextColor |
string |
β | β | β | #FFFFFF |
resultScreenBackgroundColorsAndroid |
string |
β | β | β | #FFFFFF |
resultScreenBackgroundColorsIos |
string[] |
β | β | β | ["#FFFFFF", "#FFFFFF"] |
resultScreenForegroundColor |
string |
β | β | β | #272937 |
resultScreenActivityIndicatorColor |
string |
β | β | β | #026FF4 |
resultScreenResultAnimationBackgroundColor |
string |
β | β | β | #026FF4 |
resultScreenResultAnimationForegroundColor |
string |
β | β | β | #FFFFFF |
resultScreenUploadProgressFillColor |
string |
β | β | β | #026FF4 |
idScanSelectionScreenBackgroundColorsAndroid |
string |
β | β | β | #FFFFFF |
idScanSelectionScreenBackgroundColorsIos |
string[] |
β | β | β | ["#FFFFFF", "#FFFFFF"] |
idScanSelectionScreenForegroundColor |
string |
β | β | β | #272937 |
idScanReviewScreenForegroundColor |
string |
β | β | β | #FFFFFF |
idScanReviewScreenTextBackgroundColor |
string |
β | β | β | #026FF4 |
idScanCaptureScreenForegroundColor |
string |
β | β | β | #FFFFFF |
idScanCaptureScreenTextBackgroundColor |
string |
β | β | β | #026FF4 |
idScanButtonBackgroundNormalColor |
string |
β | β | β | #026FF4 |
idScanButtonBackgroundDisabledColor |
string |
β | β | β | #B3D4FC |
idScanButtonBackgroundHighlightColor |
string |
β | β | β | #0264DC |
idScanButtonTextNormalColor |
string |
β | β | β | #FFFFFF |
idScanButtonTextDisabledColor |
string |
β | β | β | #FFFFFF |
idScanButtonTextHighlightColor |
string |
β | β | β | #FFFFFF |
idScanCaptureScreenBackgroundColor |
string |
β | β | β | #FFFFFF |
idScanCaptureFrameStrokeColor |
string |
β | β | β | #FFFFFF |
autheticanteMessage |
AzifaceSdkProps.DefaultMessage |
β | β | β | DefaultMessage |
enrollMessage |
AzifaceSdkProps.DefaultMessage |
β | β | β | DefaultMessage |
livenessMessage |
AzifaceSdkProps.DefaultMessage |
β | β | β | DefaultMessage |
photoIdMatchMessage |
AzifaceSdkProps.DefaultScanMessage and AzifaceSdkProps.DefaultMessage
|
β | β | β |
DefaultScanMessage and DefaultMessage
|
This type must be used to position of the cancel button on screen.
AzifaceSdkProps.ButtonLocation |
Description |
---|---|
DISABLED |
Disable cancel button and doesn't show it. |
TOP_LEFT |
Position cancel button in top right. |
TOP_RIGHT |
Position cancel button in top right. It's default position. |
This type must be used to status bar color.
AzifaceSdkProps.StatusBarColor |
Description |
---|---|
DARK_CONTENT |
Default color to status bar. |
DEFAULT |
Status bar color that's set from the device. |
LIGHT_CONTENT |
Light color to status bar. |
This type must be used to set the theme of the feedback box.
AzifaceSdkProps.FeedbackBackgroundColor |
Description | type | Required | Default |
---|---|---|---|---|
colors |
An array of colors defining the color of each gradient stop. | string[] |
β | ["#026FF4", "#026FF4"] |
locations |
It's accepts only two values between 0 and 1 that defining the location of each gradient stop. | [number, number] |
β | [0, 1] |
startPoint |
The start point of the gradient when drawn in the layerβs coordinate space. | Point |
β |
x: 0 and y: 0
|
endPoint |
The end point of the gradient when drawn in the layerβs coordinate space. | Point |
β |
x: 1 and y: 0
|
This interface defines the drawn in the layer's coordinate space.
AzifaceSdkProps.Point |
type | Required | Default |
---|---|---|---|
x |
number |
β | undefined |
y |
number |
β | undefined |
This interface represents the success message and loading data message during to AzifaceSDK flow. It interface is used more by processors's authenticate and enroll processors.
AzifaceSdkProps.DefaultMessage |
type | iOS | Android | Required | Default |
---|---|---|---|---|---|
successMessage |
string |
β | β | β |
Liveness Confirmed (Exception to authenticate method: Autheticated ) |
uploadMessageIos |
string |
β | β | β | Still Uploading... |
This interface represents the all scan messages during to AzifaceSDK flow. It interface is used by photoMatch processors.
AzifaceSdkProps.DefaultScanMessage |
type | iOS | Android | Required | Default |
---|---|---|---|---|---|
frontSideUploadStarted |
string |
β | β | β | Uploading Encrypted ID Scan |
frontSideStillUploading |
string |
β | β | β | Still Uploading... Slow Connection |
frontSideUploadCompleteAwaitingResponse |
string |
β | β | β | Upload Complete |
frontSideUploadCompleteAwaitingResponse |
string |
β | β | β | Processing ID Scan |
backSideUploadStarted |
string |
β | β | β | Uploading Encrypted Back of ID |
backSideStillUploading |
string |
β | β | β | Still Uploading... Slow Connection |
backSideUploadCompleteAwaitingResponse |
string |
β | β | β | Upload Complete |
backSideUploadCompleteAwaitingProcessing |
string |
β | β | β | Processing Back of ID |
userConfirmedInfoUploadStarted |
string |
β | β | β | Uploading Your Confirmed Info |
userConfirmedInfoStillUploading |
string |
β | β | β | Still Uploading... Slow Connection |
userConfirmedInfoUploadCompleteAwaitingResponse |
string |
β | β | β | Upload Complete |
userConfirmedInfoUploadCompleteAwaitingProcessing |
string |
β | β | β | Processing |
nfcUploadStarted |
string |
β | β | β | Uploading Encrypted NFC Details |
nfcStillUploading |
string |
β | β | β | Still Uploading... Slow Connection |
nfcUploadCompleteAwaitingResponse |
string |
β | β | β | Upload Complete |
nfcUploadCompleteAwaitingProcessing |
string |
β | β | β | Processing NFC Details |
skippedNFCUploadStarted |
string |
β | β | β | Uploading Encrypted ID Details |
skippedNFCStillUploading |
string |
β | β | β | Still Uploading... Slow Connection |
skippedNFCUploadCompleteAwaitingResponse |
string |
β | β | β | Upload Complete |
skippedNFCUploadCompleteAwaitingProcessing |
string |
β | β | β | Processing ID Details |
successFrontSide |
string |
β | β | β | ID Scan Complete |
successFrontSideBackNext |
string |
β | β | β | Front of ID Scanned |
successFrontSideNFCNext |
string |
β | β | β | Front of ID Scanned |
successBackSide |
string |
β | β | β | ID Scan Complete |
successBackSideNFCNext |
string |
β | β | β | Back of ID Scanned |
successPassport |
string |
β | β | β | Passport Scan Complete |
successPassportNFCNext |
string |
β | β | β | Passport Scanned |
successUserConfirmation |
string |
β | β | β | Photo ID Scan Complete |
successNFC |
string |
β | β | β | ID Scan Complete |
retryFaceDidNotMatch |
string |
β | β | β | Face Didnβt Match Highly Enough |
retryIDNotFullyVisible |
string |
β | β | β | ID Document Not Fully Visible |
retryOCRResultsNotGoodEnough |
string |
β | β | β | ID Text Not Legible |
retryIDTypeNotSupported |
string |
β | β | β | ID Type Mismatch Please Try Again |
skipOrErrorNFC |
string |
β | β | β | ID Details Uploaded |
This enum represents all errors that are encountered on the AziFace SDK.
AzifaceSdkProps.Errors |
Description | iOS | Android |
---|---|---|---|
AziFaceHasNotBeenInitialized |
When some processors method is runned, but AzifaceSDK has not been initialized. | β | β |
AziFaceValuesWereNotProcessed |
When the image sent to the processors cannot be processed due to inconsistency. | β | β |
HTTPSError |
When exists some network error. | β | β |
JSONError |
When exists some problem in getting data in request of base URL information. | β | β |
NoConfigurationsProvided |
When the configurations faceMatch doesn't provided. |
β | β |
AziFaceInvalidSession |
When session status is invalid. | β | β |
AziFaceLivenessWasntProcessed |
When the image user sent to the processors cannot be processed due to inconsistency. | β | β |
AziFaceScanWasntProcessed |
When the image ID sent to the processors cannot be processed due to inconsistency. | β | β |
This enum represents all the possible types of flow that can be used on the faceMatch
method.
AzifaceSdkProps.MatchType |
Description | iOS | Android |
---|---|---|---|
authenticate |
When you want to make authenticate flow. | β | β |
enroll |
When you want to make enrollment flow. | β | β |
liveness |
When you want to make liveness flow. | β | β |
The authenticate flow depends on to enrollment flow to work because the authenticate flow is done using an UUID that's was created by enrollment flow.
The object with properties that will be sent to native modules to make the requests, change text labels and sent parameters via headers.
AzifaceSdkProps.MatchData |
type | iOS | Android | Required | Default |
---|---|---|---|---|---|
endpoint |
string or null
|
β | β | β |
Authenticated (authenticate) or Liveness\nConfirmed (enrollment and liveness) |
parameters |
string or null
|
β | β | β | null |
successMessage |
string or null
|
β | β | β |
/match-3d-3d (authenticate) or /enrollment-3d (enrollment) or /liveness-3d (liveness) |
uploadMessageIos |
string or null
|
β | β | β | Still Uploading... |
Methods | Return Type | iOS | Android |
---|---|---|---|
addListener(eventType: string, callback: (event: boolean) => void) |
EmitterSubscription |
β | β |
This is a list of event types that can be used on addListener
.
eventType |
Return | Description |
---|---|---|
onCloseModal |
boolean |
This event listener verify if Aziface modal biometric is open. Return true if modal is open, false otherwise. |
The logoImage
and cancelImage
properties represents your logo and icon of the button cancel. Does not possible to remove them from the module. Default are Azify images and .png
format. By default in Android
the logo image is shown, but on iOS
it isn't shown, It's necessary to add manually.
To add your images in Android
, you must go to your project's android/src/main/res/drawable
directory. If in your project drawable
folder doesn't exist, it create one. Inside the drawable
folder, you must put your images and done!
In iOS
, open your XCode and go to your project's ios/<YOUR_PROJECT_NAME>/Images.xcassets
directory. Open the Images.xcassets
folder and only put your images inside there.
Now, go back to where you want to apply the styles, import setTheme
method and add only the image name, no extension format, in image property (logoImage
or cancelImage
). Note: If the image is not founded the default image will be showed. Check the code example below:
import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import {
initialize,
faceMatch,
setTheme,
} from '@azify/aziface-mobile';
export default function App() {
useEffect(() => {
const params = {
device: 'YOUR_DEVICE',
url: 'YOUR_URL',
key: 'YOUR_PUBLIC_KEY',
productionKey: 'YOUR_PRODUCTION_KEY',
};
async function initialize() {
await initialize({ params });
setTheme({
logoImage: 'yourLogoImage', // yourLogoImage.png
cancelImage: 'yourCancelImage', // yourCancelImage.png
});
}
initialize();
}, []);
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
}}
>
<TouchableOpacity
style={{
width: '100%',
height: 64,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
}}
onPress={async () => {
try {
const isSuccess = await faceMatch('enroll');
console.log(isSuccess);
} catch (error: any) {
console.error(error);
}
}}
>
<Text style={{ textAlign: 'center', fontSize: 24, color: 'white' }}>
Open!
</Text>
</TouchableOpacity>
</View>
);
}
See the native implementation to learn more about the limitations and features that will need improving in the aziface-mobile-sdk
.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT License. π
Made with create-react-native-library. π