Dikript-react-identity-comparison-sdk NPM

Dikript React Identity Comparison SDK

Overview

Dikript React Identity Comparison SDK is a powerful React component library for integrating identity comparison and liveness checks into your web applications. This SDK provides an easy-to-use interface for capturing user photos, performing liveness checks, and integrating with Dikript's biometric API.

Features

Live camera feed for face detection
Real-time face landmark detection
Liveness check functionality
Identity comparison functionality
Customizable UI components
Full TypeScript support
Easy integration with React applications

CSS Class Names

All CSS class names in this SDK are prefixed with dikript to avoid naming conflicts with your application's CSS. For example:

dikriptLivenessPopup - The main container for the popup
dikriptPopupContent - The content container
dikriptHeader - The header section
dikriptActionButton - Action buttons
dikriptCameraContainer - The camera container

This ensures that the SDK's styles won't interfere with your application's styles.

Installation

npm install dikript-react-identity-comparison-sdk
# or
yarn add dikript-react-identity-comparison-sdk

Usage

React + JavaScript

import React, { useState } from 'react';
import { IdentityComparisonPopup } from 'dikript-react-identity-comparison-sdk';

function App() {
  const [showPopup, setShowPopup] = useState(false);
  
  const handleIdentityResult = (result) => {
    console.log('Identity comparison result:', result);
    // Handle the identity comparison result
  };
  
  return (
    <div>
      <button onClick={() => setShowPopup(true)}>
        Start Identity Verification
      </button>
      
      {showPopup && (
        <IdentityComparisonPopup
          apiKey="your_api_key_here"
          name="Your App Name"
          apiUrl="https://api.dikript.com/dikript/api/v1/biometrics"
          onClose={() => setShowPopup(false)}
          onIdentityComparisonResult={handleIdentityResult}
          modelPath="/models"
        />
      )}
    </div>
  );
}

export default App;

React + TypeScript

import React, { useState } from 'react';
import { 
  IdentityComparisonPopup, 
  IdentityComparisonResponse,
  IdType
} from 'dikript-react-identity-comparison-sdk';

const App: React.FC = () => {
  const [showPopup, setShowPopup] = useState(false);
  
  // Custom ID types
  const customIdTypes: IdType[] = [
    { value: 'NIN', label: 'National ID Number' },
    { value: 'PASSPORT', label: 'International Passport' },
    { value: 'DRIVERSLICENSE', label: 'Driver\'s License' }
  ];
  
  const handleIdentityResult = (result: IdentityComparisonResponse): void => {
    console.log('Identity comparison result:', result);
    // Handle the identity comparison result
  };
  
  return (
    <div>
      <button onClick={() => setShowPopup(true)}>
        Start Identity Verification
      </button>
      
      {showPopup && (
        <IdentityComparisonPopup
          apiKey="your_api_key_here"
          name="Your App Name"
          apiUrl="https://api.dikript.com/dikript/api/v1/biometrics"
          onClose={() => setShowPopup(false)}
          onIdentityComparisonResult={handleIdentityResult}
          modelPath="/models"
          idTypes={customIdTypes}
        />
      )}
    </div>
  );
};

export default App;

Props

Prop	Type	Required	Description
apiKey	string	Yes	Your Dikript API key
name	string	Yes	The name of your application
apiUrl	string	Yes	The URL for the identity comparison API endpoint
onClose	() => void	Yes	Callback function called when the popup is closed
onIdentityComparisonResult	(result: IdentityComparisonResponse) => void	Yes	Callback function called with the result of the identity comparison
modelPath	string	No	Path to the face-api.js models directory. Defaults to '/models' if not provided
idTypes	IdType[]	No	Array of ID types to display in the dropdown. Defaults to BVN, Phone Number, FRSC, and NIN if not provided

Response Types

interface LivenessResponse {
  isLive: boolean;
  confidence: number;
  message?: string;
}

interface IdentityComparisonResponse {
  isMatch: boolean;
  confidence: number;
  message?: string;
  matchDetails?: {
    faceMatch?: boolean;
    idMatch?: boolean;
  };
}

interface IdType {
  value: string;  // Value to be sent to the API
  label: string;  // Display label for the dropdown
}

Customizing ID Types

You can customize the ID types that are displayed in the dropdown by providing an array of IdType objects to the idTypes prop:

import React, { useState } from 'react';
import { IdentityComparisonPopup } from 'dikript-react-identity-comparison-sdk';

function App() {
  const [showPopup, setShowPopup] = useState(false);
  
  // Custom ID types
  const customIdTypes = [
    { value: 'NIN', label: 'National ID Number' },
    { value: 'PASSPORT', label: 'International Passport' },
    { value: 'DRIVERSLICENSE', label: 'Driver\'s License' }
  ];
  
  return (
    <div>
      <button onClick={() => setShowPopup(true)}>
        Start Identity Verification
      </button>
      
      {showPopup && (
        <IdentityComparisonPopup
          apiKey="your_api_key_here"
          name="Your App Name"
          apiUrl="https://api.dikript.com/dikript/api/v1/biometrics"
          onClose={() => setShowPopup(false)}
          onIdentityComparisonResult={(result) => console.log(result)}
          idTypes={customIdTypes}
        />
      )}
    </div>
  );
}

export default App;

Integration with Face-API.js Models

This SDK uses Face-API.js for face detection and landmark recognition. You need to make the Face-API.js models available in your application.

Option 1: Default Location (Public Folder)

By default, the SDK looks for models in the /models path of your application. Place the models in your application's public folder:

public/
  models/
    tiny_face_detector_model-weights_manifest.json
    tiny_face_detector_model-shard1
    face_landmark_68_model-weights_manifest.json
    face_landmark_68_model-shard1

Option 2: Custom Location

If you want to store the models in a different location, you can specify the path using the modelPath prop:

<IdentityComparisonPopup
  // other props...
  modelPath="/assets/face-api-models"
/>

With this configuration, the SDK will look for models at:

public/
  assets/
    face-api-models/
      tiny_face_detector_model-weights_manifest.json
      tiny_face_detector_model-shard1
      face_landmark_68_model-weights_manifest.json
      face_landmark_68_model-shard1

Downloading the Models

Download the models from face-api.js models

Required models:

tiny_face_detector_model
face_landmark_68_model

Testing Locally

Follow these steps to test the SDK locally:

Clone the repository:

git clone https://github.com/dikript/react-identity-comparison-sdk.git
cd react-identity-comparison-sdk

Install dependencies:
```
npm install
```
Build the SDK:
```
npm run build
```
Download the Face-API.js models as mentioned above and place them in a public/models directory.
Serve the example:
```
npx serve .
```
Open your browser and navigate to the example:
```
http://localhost:3000/examples/
```