@azify/aziface-mobile
TypeScript icon, indicating that this package has built-in type declarations

1.0.1Β β€’Β PublicΒ β€’Β Published

@azify/aziface-mobile

Aziface sdk adapter to react native. πŸ“±


Installation

npm install @azify/aziface-mobile

Usage

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,
  },
});

API

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 βœ… βœ…

initialize(init: AzifaceSdkProps.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!

AzifaceSdkProps.Initialize type Required Default
params AzifaceSdkProps.Params βœ… -
headers AzifaceSdkProps.Headers ❌ undefined

faceMatch(type: AzifaceSdkProps.MatchType, data?: AzifaceSdkProps.MatchData)

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

photoMatch(data?: Object)

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

setTheme(options?: AzifaceSdkProps.Theme)

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

AzifaceSdkProps.Theme type Required Default
options AzifaceSdkProps.Theme ❌ undefined

Types

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 βœ… βœ…

AzifaceSdkProps.Params

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 ❌

AzifaceSdkProps.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!

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

AzifaceSdkProps.Theme

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

AzifaceSdkProps.ButtonLocation

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.

AzifaceSdkProps.StatusBarColor (iOS only)

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.

AzifaceSdkProps.FeedbackBackgroundColor (iOS only)

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

AzifaceSdkProps.Point (iOS only)

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

AzifaceSdkProps.Point type Required Default
x number ❌ undefined
y number ❌ undefined

AzifaceSdkProps.DefaultMessage

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...

AzifaceSdkProps.DefaultScanMessage

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

AzifaceSdkProps.Errors

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. ❌ βœ…

AzifaceSdkProps.MatchType

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.

AzifaceSdkProps.MatchData

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...

Native Events

Methods Return Type iOS Android
addListener(eventType: string, callback: (event: boolean) => void) EmitterSubscription βœ… βœ…

Event Types

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.

How to add images in AzifaceSDK 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!

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 (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>
  );
}

Limitations, Features or Camera Problems

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


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. 😊

Readme

Keywords

none

Package Sidebar

Install

npm i @azify/aziface-mobile

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

70.3 MB

Total Files

138

Last publish

Collaborators

  • lucasdipre
  • hugoazify
  • davi_costa
  • mardoc
  • nayara.dias
  • digorc