@azify/aziface-mobile

Azify SDK adapter to react native. 📱

• Installation
• Usage
• API
  • initialize
  • enroll
  • photoMatch
  • setTheme
• Types
  • Params
  • Headers
  • SessionParams
    • SessionBasePathUrl
    • SessionMatchPathUrl
  • Theme
    • ButtonLocation
    • StatusBarColor
    • ThemeImage
    • ThemeFrame
    • ThemeButton
    • ThemeGuidance
      • ThemeGuidanceRetryScreen
    • ThemeOval
    • ThemeFeedback
      • FeedbackBackgroundColor
        • Point
    • ThemeResultScreen
      • ThemeResultAnimation
    • ThemeIdScan
      • ThemeIdScanSelectionScreen
      • ThemeIdScanReviewScreen
      • ThemeIdScanCaptureScreen
    • DefaultMessage
      • DefaultScanMessage
      • DefaultScanMessageFrontSide
      • DefaultScanMessageBackSide
      • DefaultScanMessageUserConfirmInfo
      • DefaultScanMessageNFC
      • DefaultScanMessageSkippedNFC
      • DefaultScanMessageSuccess
      • DefaultScanMessageRetry
  • Errors
• Components
  • FaceView
• How to add images in Aziface SDK module?
  • How to add images in Android?
  • How to add images in iOS?
  • Example with images added
• Limitations and Features
• Contributing
• License

---

Installation

npm install @azify/aziface-mobile
# or
yarn add @azify/aziface-mobile

Only iOS:

cd ios && pod install

---

Usage

import * as React from 'react';

import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { enroll, initialize, 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 = {
      'x-token-bearer': 'YOUR_X_TOKEN_BEARER',
      'x-api-key': 'YOUR_X_API_KEY',
      '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',
      'x-only-raw-analysis': '1',
    };
    const params = {
      isDeveloperMode: false,
      device: 'YOUR_DEVICE',
      url: 'YOUR_BASE_URL',
      key: 'YOUR_KEY',
      productionKey: 'YOUR_PRODUCTION_KEY',
    };

    try {
      const isInitialized = await initialize({
        params,
        headers,
      });

      console.log(isInitialized);
    } catch (error: any) {
      console.error(error.message);
    }
  };

  const onPressPhotoMatch = async () => {
    try {
      const isSuccess = await photoMatch();
      console.log(isSuccess);
    } catch (error: any) {
      console.error(error.message);
    }
  };

  const onPressEnroll = async () => {
    try {
      const isSuccess = await enroll();
      console.log(isSuccess);
    } catch (error: any) {
      console.error(error.message);
    }
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        <TouchableOpacity
          style={styles.button}
          onPress={async () => await 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={onPressEnroll}>
          <Text style={styles.text}>Open Enroll</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,
  },
});

---

API

Methods	Return Type	Platform
initialize	Promise<boolean>	All
enroll	Promise<boolean>	All
authenticate	Promise<boolean>	Unavailable
liveness	Promise<boolean>	Unavailable
photoMatch	Promise<boolean>	All
photoScan	Promise<boolean>	Unavailable
setTheme	void	All

initialize

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!

Initialize	type	Required	Default
params	Params	✅	-
headers	Headers	❌	undefined

enroll

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.

SessionParams<"base">	type	Required	Default
data	SessionBasePathUrl	❌	undefined

photoMatch

This method make to read from face and documents for user, after compare face and face documents from user to check veracity.

SessionParams<"match">	type	Required	Default
data	SessionMatchPathUrl	❌	undefined

setTheme

This method must be used to set the theme of the Aziface SDK screen.

Property	type	Required	Default
options	Theme	❌	undefined

---

Enums

Enums	iOS	Android
Errors	✅	✅

---

Types

Types	Platform
Params	All
Headers	All
SessionParams	All
SessionBasePathUrl	All
SessionMatchPathUrl	All
Theme	All
ButtonLocation	All
StatusBarColor	iOS
ThemeImage	All
ThemeFrame	All
ThemeButton	All
ThemeGuidance	All
ThemeGuidanceRetryScreen	All
ThemeOval	All
ThemeFeedback	All
FeedbackBackgroundColor	iOS
Point	iOS
ThemeResultScreen	All
ThemeResultAnimation	All
ThemeIdScan	All
ThemeIdScanSelectionScreen	All
ThemeIdScanReviewScreen	All
ThemeIdScanCaptureScreen	All
DefaultMessage	All
DefaultScanMessage	All
DefaultScanMessageFrontSide	All
DefaultScanMessageBackSide	All
DefaultScanMessageUserConfirmInfo	All
DefaultScanMessageNFC	All
DefaultScanMessageSkippedNFC	All
DefaultScanMessageSuccess	All
DefaultScanMessageRetry	All

Params

Here must be passed to initialize the Aziface SDK! Case the parameters isn't provided the Aziface SDK goes to be not initialized.

Params	type	Required
device	string	✅
url	string	✅
key	string	✅
productionKey	string	✅
isDeveloperMode	boolean	✅

Headers

Here you can add your headers to send request when some method is called. Only values from type string, null or undefined are accepts!

Headers	type	Required	Default
[key: string]	string, null or undefined	❌	undefined

SessionParams<T>

This type is related to the data that will be sent by the SDK methods. It accepts any key, but has a property called pathUrl. The pathUrl is an object of URLs that will be passed in requests instead of the SDK's default URLs.

SessionParams<T>	type	Required	Default
pathUrl	SessionBasePathUrl or SessionMatchPathUrl	❌	undefined
[key: string]	any	❌	undefined

SessionBasePathUrl

This type is only for SDK methods that perform a single request. It contains the base property, where you can specify the URL you want the request to be made natively. If not specified, the default URL will be used for the request.

If the URL is different from the default and requires passing the processId parameter, you can enter the URL in this style /my-url/:my-id/my-final-url. Internally, our native module will identify the slug /:my-id and replace it with the processId in the parameters.

SessionBasePathUrl	type	Required	Default
base	string	❌	undefined

SessionMatchPathUrl

This type is only for SDK methods that perform a single request. It contains the base and match properties, where you can specify the URL you want the request to be made natively. If not specified, the default URL will be used for the request.

If the URL is different from the default and requires passing the processId parameter, you can enter the URL in this style /my-url/:my-id/my-final-url. Internally, our native module will identify the slug /:my-id and replace it with the processId in the parameters.

This type is specify of the photoMatch method.

SessionMatchPathUrl	type	Required	Default
base	string	❌	undefined
match	string	❌	undefined

Theme

This is a list of theme properties that can be used to styling. Note, we recommend that you use only hexadecimal values to colors, between six and eight characters, because still we don't supported others color type.

Theme	type	Platform	Required	Default
overlayBackgroundColor	string	All	❌	#ffffff
cancelButtonLocation	ButtonLocation	All	❌	TOP_RIGHT
statusBarColor	StatusBarColor	iOS	❌	DARK_CONTENT
authenticateMessage	DefaultMessage	All	❌	undefined
enrollMessage	DefaultMessage	All	❌	undefined
livenessMessage	DefaultMessage	All	❌	undefined
scanMessage	DefaultScanMessage	All	❌	undefined
matchMessage	DefaultScanMessage & DefaultMessage	All	❌	undefined
image	ThemeImage	All	❌	undefined
frame	ThemeFrame	All	❌	undefined
guidance	ThemeGuidance	All	❌	undefined
oval	ThemeOval	All	❌	undefined
feedback	ThemeFeedback	All	❌	undefined
resultScreen	ThemeResultScreen	All	❌	undefined
idScan	ThemeIdScan	All	❌	undefined

ButtonLocation

This type must be used to position of the cancel button on screen.

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.

StatusBarColor (iOS only)

This type must be used to status bar color.

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.

ThemeImage

An object containing the image assets used in the Aziface SDK.

ThemeImage	type	Platform	Required	Default
logo	string	All	❌	facetec_your_app_logo.png
cancel	string	All	❌	facetec_cancel.png

ThemeFrame

An object containing the frame styles used in the Aziface SDK.

ThemeFrame	type	Platform	Required	Default
cornerRadius	number	All	❌	20
borderColor	string	All	❌	#ffffff
backgroundColor	string	All	❌	#ffffff

ThemeButton

An object containing the button styles used in the Aziface SDK.

ThemeButton	type	Platform	Required	Default
backgroundNormalColor	string	All	❌	#026ff4
backgroundDisabledColor	string	All	❌	#b3d4fc
backgroundHighlightColor	string	All	❌	#0264dc
textNormalColor	string	All	❌	#ffffff
textDisabledColor	string	All	❌	#ffffff
textHighlightColor	string	All	❌	#ffffff

ThemeGuidance

An object containing the styles used in the guidance view.

ThemeGuidance	type	Platform	Required	Default
backgroundColor	string or string[]	All	❌	#ffffff (Android) and ['#ffffff', '#ffffff'] (iOS)
foregroundColor	string	All	❌	#272937
button	ThemeButton	All	❌	undefined
retryScreen	ThemeGuidanceRetryScreen	All	❌	undefined

ThemeGuidanceRetryScreen

An object containing the styles used in the guidance retry screen.

ThemeGuidanceRetryScreen	type	Platform	Required	Default
imageBorderColor	string	All	❌	#ffffff
ovalStrokeColor	string	All	❌	#ffffff

ThemeOval

An object containing the oval styles used in the Aziface SDK.

ThemeOval	type	Platform	Required	Default
strokeColor	string	All	❌	#026ff4
firstProgressColor	string	All	❌	#0264dc
secondProgressColor	string	All	❌	#0264dc

ThemeFeedback

An object containing the oval styles used in the Aziface SDK.

ThemeFeedback	type	Platform	Required	Default
backgroundColor	string	Android	❌	#026ff4
backgroundColors	string	iOS	❌	undefined
textColor	string	All	❌	#ffffff

FeedbackBackgroundColor (iOS only)

This type must be used to set the theme of the feedback box.

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, y: 0 }
endPoint	The end point of the gradient when drawn in the layer’s coordinate space.	Point	❌	{ x: 1, y: 0 }

Point (iOS only)

This interface defines the drawn in the layer's coordinate space.

Point	type	Required	Default
x	number	❌	0
y	number	❌	0

ThemeResultScreen

An object containing the styles used in the result screen.

ThemeResultScreen	type	Platform	Required	Default
backgroundColor	string or string[]	All	❌	#ffffff (Android) and ['#ffffff', '#ffffff'] (iOS)
foregroundColor	string	All	❌	#272937
activityIndicatorColor	string	All	❌	#026ff4
uploadProgressFillColor	string	All	❌	#026ff4
resultAnimation	ThemeResultAnimation	All	❌	undefined

ThemeResultAnimation

An object containing the animation styles used in the Aziface SDK result animation.

ThemeResultAnimation	type	Platform	Required	Default
backgroundColor	string	All	❌	#026ff4
foregroundColor	string	All	❌	#ffffff

ThemeIdScan

An object containing the styles used in the ID scan screens.

ThemeIdScan	type	Platform	Required	Default
selectionScreen	ThemeIdScanSelectionScreen	All	❌	undefined
reviewScreen	ThemeIdScanReviewScreen	All	❌	undefined
captureScreen	ThemeIdScanCaptureScreen	All	❌	undefined
button	ThemeButton	All	❌	undefined

ThemeIdScanSelectionScreen

An object containing the styles used in the ID scan selection screen.

ThemeIdScanSelectionScreen	type	Platform	Required	Default
backgroundColor	string or string[]	All	❌	#ffffff (Android) and ['#ffffff', '#ffffff'] (iOS)
foregroundColor	string	All	❌	#272937

ThemeIdScanReviewScreen

An object containing the styles used in the ID scan review screen.

ThemeIdScanReviewScreen	type	Platform	Required	Default
foregroundColor	string	All	❌	#ffffff
textBackgroundColor	string	All	❌	#026ff4

ThemeIdScanCaptureScreen

An object containing the styles used in the ID scan capture screen.

ThemeIdScanCaptureScreen	type	Platform	Required	Default
foregroundColor	string	All	❌	#ffffff
textBackgroundColor	string	All	❌	#ffffff
backgroundColor	string	All	❌	#026ff4
frameStrokeColor	string	All	❌	#ffffff

DefaultMessage

This interface represents the success message and loading data message during to Aziface SDK flow. It interface is used by processors's enroll processor.

DefaultMessage	type	Platform	Required	Default
successMessage	string	All	❌	Face Scanned\n3D Liveness Proven
uploadMessage	string	iOS	❌	Still Uploading...

DefaultScanMessage

This interface represents the all scan messages during to Aziface SDK flow. It interface is used by photoMatch processors.

DefaultScanMessage	type	Platform	Required	Default
skipOrErrorNFC	string	All	❌	ID Details Uploaded
frontSide	DefaultScanMessageFrontSide	All	❌	undefined
backSide	DefaultScanMessageBackSide	All	❌	undefined
userConfirmedInfo	DefaultScanMessageUserConfirmInfo	All	❌	undefined
nfc	DefaultScanMessageNFC	All	❌	undefined
skippedNFC	DefaultScanMessageSkippedNFC	All	❌	undefined
success	DefaultScanMessageSuccess	All	❌	undefined
retry	DefaultScanMessageRetry	All	❌	undefined

DefaultScanMessageFrontSide

Represents the front-side scan messages during to Aziface SDK flow.

DefaultScanMessageFrontSide	type	Platform	Required	Default
uploadStarted	string	All	❌	Uploading Encrypted ID Scan
stillUploading	string	All	❌	Still Uploading... Slow Connection
uploadCompleteAwaitingResponse	string	All	❌	Upload Complete
uploadCompleteAwaitingProcessing	string	All	❌	Processing ID Scan

DefaultScanMessageBackSide

Represents the back-side scan messages during to Aziface SDK flow.

DefaultScanMessageBackSide	type	Platform	Required	Default
uploadStarted	string	All	❌	Uploading Encrypted Back of ID
stillUploading	string	All	❌	Still Uploading... Slow Connection
uploadCompleteAwaitingResponse	string	All	❌	Upload Complete
uploadCompleteAwaitingProcessing	string	All	❌	Processing Back of ID

DefaultScanMessageUserConfirmInfo

Represents the user confirmed information messages during to Aziface SDK flow.

DefaultScanMessageUserConfirmInfo	type	Platform	Required	Default
uploadStarted	string	All	❌	Uploading Your Confirmed Info
stillUploading	string	All	❌	Still Uploading... Slow Connection
uploadCompleteAwaitingResponse	string	All	❌	Upload Complete
uploadCompleteAwaitingProcessing	string	All	❌	Processing

DefaultScanMessageNFC

Represents the NFC scan messages during to Aziface SDK flow.

DefaultScanMessageNFC	type	Platform	Required	Default
uploadStarted	string	All	❌	Uploading Encrypted NFC Details
stillUploading	string	All	❌	Still Uploading... Slow Connection
uploadCompleteAwaitingResponse	string	All	❌	Upload Complete
uploadCompleteAwaitingProcessing	string	All	❌	Processing NFC Details

DefaultScanMessageSkippedNFC

Represents the skipped NFC scan messages during to Aziface SDK flow.

DefaultScanMessageSkippedNFC	type	Platform	Required	Default
uploadStarted	string	All	❌	Uploading Encrypted ID Details
stillUploading	string	All	❌	Still Uploading... Slow Connection
uploadCompleteAwaitingResponse	string	All	❌	Upload Complete
uploadCompleteAwaitingProcessing	string	All	❌	Processing ID Details

DefaultScanMessageSuccess

Represents the success messages during to Aziface SDK flow.

DefaultScanMessageSuccess	type	Platform	Required	Default
frontSide	string	All	❌	ID Scan Complete
frontSideBackNext	string	All	❌	Front of ID Scanned
frontSideNFCNext	string	All	❌	Front of ID Scanned
backSide	string	All	❌	ID Scan Complete
backSideNFCNext	string	All	❌	Back of ID Scanned
passport	string	All	❌	Passport Scan Complete
passportNFCNext	string	All	❌	Passport Scanned
userConfirmation	string	All	❌	Photo ID Scan Complete
NFC	string	All	❌	ID Scan Complete

DefaultScanMessageRetry

Represents the retry messages during to Aziface SDK flow.

DefaultScanMessageSkippedNFC	type	Platform	Required	Default
faceDidNotMatch	string	All	❌	Face Didn’t Match Highly Enough
IDNotFullyVisible	string	All	❌	ID Document Not Fully Visible
OCRResultsNotGoodEnough	string	All	❌	ID Text Not Legible
IDTypeNotSupported	string	All	❌	ID Type Mismatch Please Try Again

---

Errors

Errors	Description	Platform
ConfigNotProvided	When device, url, key and productionKey aren't provided.	All
HTTPSError	When exists some network error.	All
InitializationFailed	When parameters provided by initialize are inconsistent or invalid.	All
JSONError	When exists some problem in getting data in request of base URL information.	All
ParamsNotProvided	When parameters aren't provided, this case, it is null.	All
NotInitialized	When session status is different of success.	All
ProcessorError	When an unknown session error occurs.	Android
SessionNotProcessedError	When the image ID sent to the processors cannot be processed due to inconsistency.	All
SessionScanStatusError	When scan session status isn't success. It's recommend try again.	Android
SessionStatusError	When session status isn't of success. It's recommend try again.	Android

---

Components

FaceView

The FaceView extends all properties of the View, but it has five new callbacks to listener Aziface SDK events.

Properties

Property	Description	Returns	Platform
onOpen	Callback function called when the Aziface SDK is opened.	boolean	All
onClose	Callback function called when the Aziface SDK is closed.	boolean	All
onCancel	Callback function called when the Aziface SDK is cancelled.	boolean	All
onError	Callback function called when an error occurs in the Aziface SDK.	boolean	All
onInitialize	Callback function called when the Aziface SDK is initialized.	boolean	All

---

How to add images in Aziface SDK module?

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.

How to add images in Android?

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!

Important: The filename of the image can't have uppercase letters, Android doesn't accept these characters in the image name.

How to add images in iOS?

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.

Example with images added

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 (logo or cancel). 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, enroll, setTheme } from '@azify/aziface-mobile';

export default function App() {
  useEffect(() => {
    const params = {
      isDeveloperMode: true,
      device: 'YOUR_DEVICE',
      url: 'YOUR_URL',
      key: 'YOUR_PUBLIC_KEY',
      productionKey: 'YOUR_PRODUCTION_KEY',
    };

    async function initialize() {
      setTheme({
        image: {
          logo: 'brand_logo' // brand_logo.png
          cancel: 'close' // close.png
        }
      });
      await initialize({ params });
    }

    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 enroll();
            console.log(isSuccess);
          } catch (error: any) {
            console.error(error);
          }
        }}
      >
        <Text style={{ textAlign: 'center', fontSize: 24, color: 'white' }}>
          Open!
        </Text>
      </TouchableOpacity>
    </View>
  );
}

---

Limitations, Features or Camera Problems

See the native implementation to learn more about the limitations and features that will need improving in the @azify/aziface-mobile.

---

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

---

License

MIT License. 🙂

---

Made with create-react-native-library. 😊