@biopassid/fingerprint-sdk-react-native

BioPass ID Fingerprint SDK React Native

Latest Version

May 18, 2023 - [0.0.10]

Table of Contents

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

Quick Start Guide

First, you will need a license key to use the SDK. To get your license key contact us through our website BioPass ID.

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

npm install @biopassid/fingerprint-sdk-react-native

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';

export default function 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>
  );
}

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

First, you will need a license key to use the SDK. To get your license key contact us through our website BioPass ID.

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

• Documentation update;
• Focus adjustments for Android.

0.0.9

• Documentation update;
• License functionality fix for iOS.

0.0.8

• Documentation update.

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.