@surepass/liveness-web-sdk

    1.1.0 • Public • Published

    [N|Solid]

    SurePass Liveness Web SDK lets you verify user easily using our face detection and other features with basic and quick setup on your desired platform, be it mobile or web application.

    Basic Overview

    SurePass Liveness Web SDK provides a flexible option to integrate with your existing workflow. It can be consumed in two ways. You can add it to your flow of Liveness web sdk and then expect a redirect at the url you passed while you were initializing the token. The other option is to use an event driven approach where you can initialize it in a new browser tab (for mobile devices and desktop) or in a new window (in desktop applications) and use the callback function to move forward based on success or failure of liveness web sdk.

    Table of Contents

    Installation

    You can easily setup the SDK in your application using either of the following ways.

    • Install the Liveness Web SDK as npm package.
    $ npm i @surepass/liveness-web-sdk --save
    
    • Directly embed the script tag in your application.
    <script src="https://cdn.jsdelivr.net/gh/surepassio/aadhaar-esign-web-sdk@1.1.3/lib/eSignPopUp.min.js"></script>

    Getting Started

    There are two ways you can integrate the web SDK into your flow.

    Using redirect

    To use this method you need to initialize the token providing a redirect URL.

    • Redirect the user to SurePass eSign with token in the query string which looks similar to https://esign-client.surepass.io/?token=YOUR_TOKEN.

    • On successful completion of eSign we will redirect the user to your provided redirect URL.

    Note: Using this approach doesn't require our supplementary package or script to be setup.

    Using event based approach

    Specifying redirect URL while initializing token is completely optional. If this parameter is skipped, SurePass Web eSign follows event based approach.

    • Make the token initialization without specifying any redirect URL.

    • You may optionally use our supplementary package or make one for yourself to initiate the eSign window with a callback function that will return the eSign status. Either success or failure along with a brief message.

    Basic Usage

    Following example opens a new window or tab depending on the device being used either desktop or mobile. Finally, it invokes onSuccess or onError functions depending on the status of the eSign process.

    Using npm package

    import React from "react";
    
    import "./styles.css";
    
    import { OpenEsignPopUP } from "@surepass/esign";
    
    function openEsign(onSuccess, onError) {
      const token = 123;
    
      const options = {
        token,
    
        window_name: "Surepass",
    
        dimension: { width: "450", height: "850" },
      };
    
      const esign = new OpenEsignPopUP(options);
    
      esign.openWindow(onSuccess, onError);
    }
    
    function onSuccess(response) {
      console.log("Response", response);
    }
    
    function onError(response) {
      console.log("Error", response);
    }
    
    export default function App() {
      return (
        <div className="App">
          <button onClick={() => openEsign(onSuccess, onError)}>Call</button>
        </div>
      );
    }

    Edit blissful-aryabhata-gwcu5

    Using in script tag

    
    <!DOCTYPE  html>
    
    <html  lang="en">
    
    <head>
    
    <meta  charset="UTF-8"  />
    
    <meta  name="viewport"  content="width=device-width, initial-scale=1.0"  />
    
    <title>Document</title>
    
    <script  src="./lib/eSignPopUp.min.js"></script>
    
    <script>
    
    const  EsignPopUpOpener = window.eSignPopUp.default
    
    function  openEsign(onSuccess, onError) {
    
    const  token = 123;
    
    const  options = {
    
    token,
    
    window_name:  "Surepass",
    
    dimension: { width:  "450", height:  "850" },
    
    };
    
    const  esign = new  EsignPopUpOpener(options);
    
    esign.openWindow(onSuccess, onError);
    
    }
    
    
    
    function  onSuccess(response) {
    
    console.log("Response", response);
    
    }
    
    
    
    function  onError(response) {
    
    console.log("Error", response);
    
    }
    
    
    
    function  openPopUp(){
    
    openEsign(onSuccess,onError)
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <button  onclick="openPopUp()">Open</button>
    
    </body>
    
    </html>
    
    

    Edit priceless-fermi-g0imp

    Handling the responses in callback

    SurePass eSign returns following response depending on the status of eSign process.

    Note: Only the 200 SUCCESS status is sent to onSuccess function. Rest, all the other responses are dispatched to the onError function.

    • 200 SUCCESS

    Returns HTTP status of 200 OK, when the eSign process has been completed successfully.

    {
      "data": {
        "error": null
      },
      "status_code": 200,
      "message": "successfully e-sign the document",
      "success": true
    }
    • 401 UNAUTHORIZED ACCESS

    {
      "data": {
        "error": "UNAUTH_ACCESS"
      },
    
      "status_code": 401,
    
      "message": "Invalid Token ",
    
      "success": false
    }
    • 403 MAXIMUM RETRY REACHED

    {
      "data": {
        "error": "MAX_RETRY"
      },
    
      "status_code": 403,
    
      "message": "The message about the possible cause. Due to phone number or OTPs.",
    
      "success": false
    }
    • 422 USER REFUSAL TO VERIFY DOCUMENT

    {
      "data": {
        "error": "VERIFY_REFUSAL"
      },
    
      "status_code": 422,
    
      "message": "User refused to verify the document",
    
      "success": false
    }
    • 433 POPUP CLOSED BY USER

    {
      "data": {
        "error": "POPUP_CLOSED"
      },
    
      "status_code": 433,
    
      "message": "User closed the popup window before process completed",
    
      "success": false
    }
    • 450 UNKNOWN ERROR

    {
      "data": {
        "error": "UNKNOWN_ERROR"
      },
    
      "status_code": 450,
    
      "message": "An error occurred",
    
      "success": false
    }
    • 500 INTERNAL SERVER ERROR

    {
      "data": {
        "error": "INT_SERVER_ERROR"
      },
    
      "status_code": 500,
    
      "message": "Internal server error occurred",
    
      "success": false
    }
    • 501 ERROR FROM NSDL

    {
      "data": {
        "error": "NSDL_ERROR"
      },
      "status_code": 501,
      "message": "error from nsdl while signing document",
      "success": false
    }

    All these messages are sent from the eSign window using Widow.postMessage function of javascript except the message of popup closure by user that we infer programmatically. So, you can design your own utility code based on src/livenessWebSdk.js to get the message from the child window or tab that your application will open.

    Install

    npm i @surepass/liveness-web-sdk

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    453 kB

    Total Files

    12

    Last publish

    Collaborators

    • codedrainer
    • sureamit
    • jhashanku