@biopassid/fingerprint-sdk-react-native

BioPass ID Fingerprint SDK React Native

Latest Version

March 24, 2023 - [0.0.7]

Table of Contents

• Quick Start Guide
  • Prerequisites
  • Installation
  • How to use
  • FingerCaptureListener
  • License
• Configs
• Changelog
• License

Quick Start Guide

First, you will need a license key to use the SDK. You can acquire a license key when subscribing to a BioPass ID plan.

Check out our official documentation for more in depth information on BioPass ID.

1. Prerequisites:

	Android	iOS
Support	SDK 21+	iOS 13+

- A device with a camera
- License key
- Internet connection is required to verify the license

2. Installation

Android

Change the minimum Android sdk version to 21 (or higher) in your android/app/build.gradle file.

minSdkVersion 21

Change the compile Android sdk version to 31 (or higher) in your android/app/build.gradle file.

compileSdkVersion 31

iOS

Requires iOS 13.0 or higher.

Add to the ios/Info.plist:

• the key Privacy - Camera Usage Description and a usage description.

If editing Info.plist as text, add:

<key>NSCameraUsageDescription</key>
<string>Your camera usage description</string>

Then go into your project's ios folder and run pod install.

# Go into ios folder
$ cd ios

# Install dependencies
$ pod install

3. How to use

To call Fingerprint in your React Native project is as easy as follow:

import React from 'react';
import {StyleSheet, View, Button} from 'react-native';
import {
  FingerprintCaptureType,
  FingerprintConfig,
  FingerprintOutputType,
  buildCameraView,
  FingerprintCaptureState,
  FingerprintCaptureListener,
  FingerprintRect,
} from '@biopassid/fingerprint-sdk-react-native';

const App = () => {
  const config = new FingerprintConfig()
    .setLicenseKey('your-license-key')
    .setCaptureType(FingerprintCaptureType.LEFT_HAND_FINGERS)
    .setOutputType(FingerprintOutputType.CAPTURE_AND_SEGMENTATION)
    .setnFingersToCapture(4)
    .setShowStatusView(true)
    .setShowDistanceIndicatorView(true)
    .setShowFingersIndicatorView(true);

  const listener: FingerprintCaptureListener = {
    onFingerCapture(images: string[]) {
      console.log('Demo App - onFingerCapture: ', images[0]?.substring(0, 20));
    },
    onCaptureCanceled() {
      console.log('Demo App - onCaptureCanceled');
    },
    onStatusChanged(state: FingerprintCaptureState) {
      console.log('Demo App - onStatusChanged: ', state);
    },
    onFingerDetected(displayFingerRects: FingerprintRect[]) {
      console.log('Demo App - onFingerDetected: ', displayFingerRects);
    },
    onClassificationChanged(classif: string) {
      console.log('Demo App - onClassificationChanged: ', classif);
    },
  };

  function handleButton() {
    buildCameraView(config, listener);
  }

  return (
    <View style={styles.container}>
      <Button onPress={handleButton} title="Capture Fingers" />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
});

4. FingerCaptureListener

You can set a custom listener to receive captured fingers as well as finger rectangles and monitor the current capture status, among other features. Images are returned in Base64 string format. You can write you own listener following this example:

const listener: FingerprintCaptureListener = {
    // returns the captured hand image and segmented finger images in Base64
    onFingerCapture(images: string[]) {
      // monitor and handle fingers capture
      console.log('onFingerCapture: ', images[0]);
    },
    onCaptureCanceled() {
      // monitor and handle capture cancellation
      console.log('onCaptureCanceled');
    },
    onStatusChanged(state: FingerprintCaptureState) {
      // monitor and handle the current state of the capture
      console.log('onStatusChanged: ', state);
    },
    onFingerDetected(displayFingerRects: Rect[]) {
      // monitor and handle finger rects
      console.log('onFingerDetected: ', displayFingerRects);
    },
    onClassificationChanged(classif: string) {
      // monitor and handle classification
      console.log('onClassificationChanged: ', classif);
    },
  };

FingerprintCaptureState (enum)

Name
FingerprintCaptureState.NO_DETECTION
FingerprintCaptureState.MISSING_FINGERS
FingerprintCaptureState.TOO_CLOSE
FingerprintCaptureState.TOO_FAR
FingerprintCaptureState.OK
FingerprintCaptureState.STOPPED
FingerprintCaptureState.PROCESSING
FingerprintCaptureState.MODEL_NOT_FOUND

5. License

To use Fingerprint Capture you need a license key. To set the license key needed is simple as setting another attribute. Simply doing:

const config = new FingerprintConfig()
  .setLicenseKey('your-license-key');

Configs

FingerprintConfig

Variable name	Type	Default value
licenseKey	string	""
showStatusView	boolean	true
showDistanceIndicatorView	boolean	true
showFingersIndicatorView	boolean	true
nFingersToCapture	number	4
captureType	FingerprintCaptureType	FingerprintCaptureType.LEFT_HAND_FINGERS
outputType	FingerprintOutputType	FingerprintOutputType.CAPTURE_AND_SEGMENTATION

FingerprintCaptureType (enum)

Name
FingerprintCaptureType.RIGHT_HAND_FINGERS
FingerprintCaptureType.LEFT_HAND_FINGERS
FingerprintCaptureType.THUMBS

FingerprintOutputType (enum)

Name
FingerprintOutputType.ONLY_CAPTURE
FingerprintOutputType.CAPTURE_AND_SEGMENTATION

Changelog

0.0.7

• Documentation update;
• Improved license functionality for iOS.

0.0.6

• Finger capture;
• Fingers segmentation;
• Parameterizable distance, status and fingers indicators.
• Documentation update;
• dlib bug fix;
• New licensing feature;
• Finger indicator fix.

License

This project is proprietary software. See the LICENSE for more information.