npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

@capitual/react-native-capface-sdk

v1.0.4

Published

A Capface sdk adapter to react native. πŸ“±

Downloads

6

Readme

@capitual/react-native-capface-sdk

Capface sdk adapter to react native. πŸ“±

Installation

npm install @capitual/react-native-capface-sdk

Usage

import * as React from 'react';

import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  NativeEventEmitter,
} from 'react-native';
import ReactNativeCapfaceSdk, {
  authenticate,
  enroll,
  initialize,
  photoMatch,
} from '@capitual/react-native-capface-sdk';

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(ReactNativeCapfaceSdk);
  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 onPressEnroll = async () => {
    try {
      const isSuccess = await enroll();
      console.log(isSuccess);
    } catch (error: any) {
      console.error(error.message);
    }
  };

  const onPressAuthenticate = async () => {
    try {
      const isSuccess = await authenticate();
      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 Capface 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>
        <TouchableOpacity style={styles.button} onPress={onPressAuthenticate}>
          <Text style={styles.text}>Open Authenticate</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: CapfaceSdk.Initialize) | Promise<boolean> | βœ… | βœ… | | enroll(data?: Object) | Promise<boolean> | βœ… | βœ… | | authenticate(data?: Object) | Promise<boolean> | βœ… | βœ… | | photoMatch(data?: Object) | Promise<boolean> | βœ… | βœ… | | setTheme(options?: CapfaceSdk.Theme) | void | βœ… | βœ… |

initialize(init: CapfaceSdk.Initialize)

This is the principal method to be called, he must be called first to initialize the Capface SDK. If he doens't be called the other methods don't works!

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

enroll(data?: Object)

This method makes a 3D reading of the user's face. But, you must use to subscribe user in Capface SDK or in your server.

| Object | type | Required | Default | | -------- | -------- | -------- | ----------- | | data | Object | ❌ | undefined |

authenticate(data?: Object)

This method makes a 3D reading of the user's face. But, you must use to authenticate user in Capface SDK or in your server.

| Object | type | Required | Default | | -------- | -------- | -------- | ----------- | | data | Object | ❌ | undefined |

photoScan(data?: Object)

This method make to read from documents for user.

| Object | type | Required | Default | | -------- | -------- | -------- | ----------- | | data | Object | ❌ | 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?: CapfaceSdk.Theme)

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

| CapfaceSdk.Theme | type | Required | Default | | ------------------ | -------------------------------------- | -------- | ----------- | | options | CapfaceSdk.Theme | ❌ | undefined |

Types

| CapfaceSdk - Types | iOS | Android | | ----------------------------------------------------------------------------------- | --- | ------- | | CapfaceSdk.Params | βœ… | βœ… | | CapfaceSdk.Headers | βœ… | βœ… | | CapfaceSdk.Theme | βœ… | βœ… | | CapfaceSdk.ButtonLocation | βœ… | βœ… | | CapfaceSdk.StatusBarColor | βœ… | ❌ | | CapfaceSdk.FeedbackBackgroundColor | βœ… | ❌ | | CapfaceSdk.Point | βœ… | ❌ | | CapfaceSdk.DefaultMessage | βœ… | βœ… | | CapfaceSdk.DefaultScanMessage | βœ… | βœ… |

CapfaceSdk.Params

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

| CapfaceSdk.Params | type | Required | | ------------------- | --------- | -------- | | device | string | βœ… | | url | string | βœ… | | key | string | βœ… | | productionKey | string | βœ… | | isDeveloperMode | boolean | ❌ |

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

| CapfaceSdk.Headers | type | Required | Default | | -------------------- | ------------------------------- | -------- | ----------- | | [key: string] | string, null or undefined | ❌ | undefined |

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

| CapfaceSdk.Theme | type | iOS | Android | Required | Default | | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --- | ------- | -------- | ------------------------------------------------------------------------------------------------------- | | logoImage | string | βœ… | βœ… | ❌ | facetec_your_app_logo.png | | cancelImage | string | βœ… | βœ… | ❌ | facetec_cancel.png | | cancelButtonLocation | CapfaceSdk.ButtonLocation | βœ… | βœ… | ❌ | TOP_RIGHT | | defaultStatusBarColorIos | CapfaceSdk.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 | CapfaceSdk.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 | CapfaceSdk.DefaultMessage | βœ… | βœ… | ❌ | DefaultMessage | | enrollMessage | CapfaceSdk.DefaultMessage | βœ… | βœ… | ❌ | DefaultMessage | | photoIdScanMessage | CapfaceSdk.DefaultScanMessage | βœ… | βœ… | ❌ | DefaultScanMessage | | photoIdMatchMessage | CapfaceSdk.DefaultScanMessage and CapfaceSdk.DefaultMessage | βœ… | βœ… | ❌ | DefaultScanMessage and DefaultMessage |

CapfaceSdk.ButtonLocation

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

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

CapfaceSdk.StatusBarColor (iOS only)

This type must be used to status bar color.

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

CapfaceSdk.FeedbackBackgroundColor (iOS only)

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

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

CapfaceSdk.Point (iOS only)

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

| CapfaceSdk.Point | type | Required | Default | | ------------------ | -------- | -------- | ----------- | | x | number | ❌ | undefined | | y | number | ❌ | undefined |

CapfaceSdk.DefaultMessage

This interface represents the success message and loading data message during to CapfaceSDK flow. It interface is used more by processors's authenticate and enroll processors.

| CapfaceSdk.DefaultMessage | type | iOS | Android | Required | Default | | --------------------------- | -------- | --- | ------- | -------- | ----------------------------------------------------------------------- | | successMessage | string | βœ… | βœ… | ❌ | Liveness Confirmed (Exception to authenticate method: Autheticated) | | uploadMessageIos | string | βœ… | ❌ | ❌ | Still Uploading... |

CapfaceSdk.DefaultScanMessage

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

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

CapfaceSdk.Errors

| CapfaceSdk.Errors | Description | iOS | Android | | ------------------------------- | ------------------------------------------------------------------------------------ | --- | ------- | | CapFaceHasNotBeenInitialized | When some processors method is runned, but CapfaceSDK has not been initialized. | βœ… | βœ… | | CapFaceValuesWereNotProcessed | 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. | ❌ | βœ… | | CapFaceInvalidSession | When session status is invalid. | ❌ | βœ… | | CapFaceLivenessWasntProcessed | When the image user sent to the processors cannot be processed due to inconsistency. | ❌ | βœ… | | CapFaceScanWasntProcessed | When the image ID sent to the processors cannot be processed due to inconsistency. | ❌ | βœ… |

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 Capface modal biometric is open. Return true if modal is open, false otherwise. |

How to add images in CapfaceSDK 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 Capitual 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,
  enroll,
  setTheme,
} from '@capitual/react-native-capface-sdk';

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 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 react-native-capface-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. 😊