VerifyMe Liveness Widget

VerifyMe has a smooth widget which helps you detect biometric spoofing attacks where a replica or imitation is presented to bypass the required identification and authentication steps

Using the VerifyMe CDN-hosted javascript client library, you can install the Liveness widget into your application. You only have to add the script tag to your html document and insert basic configuration parameters and you'll be good to go.

Step 1: Add the Client Javascript Library

Include the script tag just before the end of the closing body tag of your desired html page where you wish to perform the liveness verification.

<script src="https://widget.verifyme.ng/inline.js"></script>

Step 2: Configure the Javascript Client Library

At this point, you can now create a Liveness widget object by passing in an object containing public key, product code and other fields containing the verification details.

new VerifyMePopupSetup({
      lastname: "john",
      firstname: "doe",
      phone: "08128730170",
      identityType: "bvn",
      identityNumber: "10000000001",
      key: "pk_live_ee7569XXXXXXXXXXXX9884a7cfb435",
      reference: "<unique_reference>",
      widgetType: "LIVENESS",
      productCode: "<your product code>",
});

key (string, required)

This is the VerifyMe public key, you can find this on the dashboard

widgetType(string, required)

The widgetType property is to signify the widget you're interested in consuming: liveness verification widget (LIVENESS) or express verification (XPRESS). In essence, the property's value could either be LIVENESS OR XPRESS.

productCode (string, required)

This code is uniquely tied to the product created on your account. Kindly reach out to our customer service team to guide you through product creation. PS: It is important to note that you can have multiple products linked to your account.

verification details

These are other details that are required for the liveness check verification: lastname, firstname, phone, identityType, and identityNumber

callback (function, required)

This callback takes one argument, this is called when your user has completed the liveness verification process.

Param

Description

lastname

lastname of the applicant

required

firstname

firstname of the applicant

required

phone

phone no of the applicant

optional

identityType

identity Type (BVN, NIN or FRSC)

required

identityNumber

identity Number

required

reference

unique reference

required

widgetType

LIVENESS or XPRESS

required

productCode

your verifyMe Product code

required

Step 3: Handle a Successful Liveness Verification

On successful verification, the callback function that you supplied is called by the client library with an object as a parameter. The object contains a status field with a success value

callback: function (response) {
  if (response.status == 'success') {
    // [on success]
    // Fetch the liveness verification status using the `response.reference` value
  } else {
    // [on failed]
  }
}

Refer to the Requery Liveness Verification section of this documentation. While making this api call, to protect your token key it is advised to make the call from a backend server.

Callback response data

// error
{
  'status': 'error',
  'message': <string>
}

// success
{
  status: 'success',
  reference: <string>,
  isLive: <boolean>,
  match: <boolean>,
  matchScore: <string>
}

liveness_widget.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liveness Widget Sample Script</title>
</head>

<body>
    <label>Lastname</label>
    <input type="text" id="liveness_lastname" />
    <br>
    
    <label>Firstname</label>
    <input type="text" id="liveness_firstname" />
    <br>
    
    <label>Phone</label>
    <input type="text" id="liveness_phone" />
    <br>
    
    <label>Select Identity type</label>
    <select id="liveness_identity_type">
     <option value="nin" selected="selected"> NIN </option>
     <option value="bvn"> BVN </option>
    </select>
    <br>
    
    <label>Identity Number</label>
    <input type="text" id="liveness_identity_number" />
    <br>
    <button onclick="launchLiveness(event)">Launch</button>

    <script src="https://widget.verifyme.ng/inline.js"></script>
    <script type="text/javascript">
      function launchLiveness(event) {
        event.preventDefault();

        new VerifyMePopupSetup({
          lastname: document.getElementById('liveness_lastname').value,
          firstname: document.getElementById('liveness_firstname').value,
          phone: document.getElementById('liveness_phone').value,
          identityType: document.getElementById('liveness_identity_type').value,
          identityNumber: document.getElementById('liveness_identity_number').value,
          key: 'pk_live_ee7569XXXXXXXXXXXX9884a7cfb435',
          widgetType: "LIVENESS | XPRESS",
          productCode: 'PC',
          callback: function (response) {
            if (response.status == 'success') {
              // on success
              // Use response.reference to query liveness verification status
            } else {
              // on failed
            }
          }
        });
    
      }
    </script>
</body>

</html>

PreviousGlossary NextRequery Liveness Verification

Last updated 4 years ago

VerifyMe Liveness Widget

How to Generate Widget

Step 1: Add the Client Javascript Library

Step 2: Configure the Javascript Client Library

Step 3: Handle a Successful Liveness Verification

Liveness Widget Example Script:

hashtagHow to Generate Widget

hashtagStep 1: Add the Client Javascript Library

hashtagStep 2: Configure the Javascript Client Library

hashtagStep 3: Handle a Successful Liveness Verification

hashtagLiveness Widget Example Script:

How to Generate Widget

Step 1: Add the Client Javascript Library

Step 2: Configure the Javascript Client Library

Step 3: Handle a Successful Liveness Verification

Liveness Widget Example Script: