Biometric devices capture unique physical or behavioral characteristics of individuals, such as fingerprints, facial features, or iris patterns, and compare them against stored records to establish or verify identity. Morpho’s biometric devices and solutions are designed to perform these identity verification and authentication tasks across a range of industries and applications.
For example, law enforcement agencies use Morpho devices to identify and verify individuals involved in criminal activities. Banks and financial institutions rely on these devices to ensure secure access to accounts and authenticate transactions. Government agencies implement Morpho solutions for tasks like issuing passports or verifying voters’ identities. Healthcare providers can utilize these devices to accurately identify patients and maintain proper medical records.
Access All Code https://github.com/SiteJuggler/mantra-and-morpho-configuration
Install All necessary Drivers for Mantra and morpho devices
In this article we will install mantra device drivers,
Open any web browser and type “rd mantra driver download” and click on search button
After click on first result that is https://download.mantratecapp.com/forms/downloadfiles
Once you click on the first search result or a link, the next page will ask you to complete a captcha by filling in some characters
Once you correctly fill in the captcha, you will see a screen that displays multiple device drivers for different device models. Choose the driver that matches your specific device model.
After you download the driver that is designed for your particular device model, you need to install it on your computer. This installation process is necessary to ensure that your Mantra device functions properly on your system.
Optimize Mantra Device Recognition: Troubleshooting Mantra Device Drivers
If your Mantra device is not recognized after installing the device driver, you can try restarting your PC or system. This will complete the installation process, and after the restart, your device should be recognized by the system.
If you’re still having trouble with your Mantra device not being recognized, you can try these simple steps:
Open the Windows search bar and type in “service.”
Look for an application called “Services” and click on it.
In the Services window, find the “RD Mantra Service” from the list of services.
Right-click on the “RD Mantra Service” and choose the “Restart” option.
or you can stop service and start
By following these steps, you can attempt to fix the issue by restarting the RD Mantra Service. This may help your computer recognize the Mantra device properly.
After performing the steps mentioned above, connect your Mantra device to your computer using a USB cable. Check if the device is ready for use, and if you are still experiencing any problems, it is recommended to reach out to Mantra support for further assistance. They can provide additional help and guidance to resolve any lingering issues you may be encountering.
Congratulations! You have successfully installed the RD Mantra service drivers on your system. Well done!
Setup React Project for Mantra and morpho device configuration
Install Node.js: Download and install Node.js from the official Node.js website. This will provide the tools needed to work with React.
Create a new project folder: Make a new folder on your computer where you want your React project to be stored.
Open the terminal: Open the terminal or command prompt on your computer.
Set up the project: In the terminal, type the following command and press Enter to create a new React project:
npx create-react-app first-appReplace “first-app” with the desired name for your project.
Wait for the setup: This process might take a few minutes as it sets up the necessary files and tools for your React project.
Enter the project folder: After the setup is finished, go into the project folder by typing the following command and pressing Enter:
cd first-appStart the project: In the terminal, type the following command and press Enter to start your React project:
npm startThis will open your project in a web browser, and you can begin building your React application.
That’s it! You have now successfully set up a React project. You can start developing your application by modifying the files inside the project folder.
Mantra and morpho device configuration code in React Js
Create App.js File and write down following code
import React from "react";
const App = () => {
const [deviceInfo, setDeviceInfo] = useState(null);
const [devicePort, setDevicePort] = useState("11100");
const mantraPorts = [
"11100",
"11101",
"11102",
"11103",
"11104",
"11105",
"11106",
];
const discoverDevice = () => {
let found = false;
for (let i = 0; i < mantraPorts.length && !found; i++) {
const currentPort = mantraPorts[i];
try {
discoverDeviceReq(currentPort, () => {
found = true;
setDevicePort(currentPort);
getDeviceInfo(currentPort);
});
} catch (error) {}
}
};
function discoverDeviceReq(port, callback) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
console.log(url);
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
// if(xhr.readyState == 1 && count == 0){
// fakeCall();
//}
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
} else {
callback();
}
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
return (
<div>
<button>Capture</button>
</div>
);
};
function getDeviceInfo(port) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
alert("device is not ready");
} else {
alert("device is ready to use");
}
setDeviceInfo(data1);
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
export default App;mantraPorts is an array that contains a list of port numbers.
discoverDevice is a function that attempts to discover a device by iterating through the mantraPorts array. It tries to send a request to each port using the discoverDeviceReq function and stops if a successful response is received. Upon finding the device, it sets the devicePort variable and calls the getDeviceInfo function.
discoverDeviceReq is a function that sends a request to a specific URL based on the port parameter. The URL is constructed using the https://localhost domain and the given port. It uses an XMLHttpRequest or ActiveXObject (for Internet Explorer) to send the request.
The function sets up an onreadystatechange event handler to handle the response from the request. If the response’s readyState is 4 (indicating the request is complete), it checks the status of the response. If the status is 200 (successful), it converts the response text from XML to JSON using the convert.xml2json function. It then parses the JSON response and checks if a specific attribute value exists. If the value exists, the callback function is called.
The provided code is designed to find the correct port that is connected to our Mantra and Morpho devices. Once the code identifies the right port, it saves the port number in a variable called “state.” Then, it calls the “getDeviceInfo” function to gather information about the device connected to that port, such as its unique serial number. Essentially, this code helps us find and retrieve important details about our Mantra and Morpho devices.
To obtain biometric data from Mantra and Morpho devices, write the following code.
function morphoCapture() {
var url = `https://localhost:${devicePort}/capture`;
let PIDOPTS =
'<PidOptions ver="1.0">' +
'<Opts fCount="1" fType="2" iCount="" iType="" pCount="" pType="" format="0" pidVer="2.0" timeout="10000" otp="" wadh="" posh=""/>' +
"</PidOptions>";
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
function getPosition(string, subString, index) {
return string.split(subString, index).join(subString).length;
}
function mantraCapture() {
var url = `https://localhost:${devicePort}/rd/capture`;
let PIDOPTS =
'<?xml version="1.0"?> <PidOptions ver="1.0"> <Opts fCount="1" fType="2" iCount="0" pCount="0" format="0" pidVer="2.0" timeout="10000" posh="UNKNOWN" env="P" wadh="" /> <CustOpts><Param name="mantrakey" value="undefined" /></CustOpts> </PidOptions>';
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
// callback(JSON.parse(result1));
//document.getElementById('text').value = "Captured Successfully";
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
} morphoCapture() and mantraCapture(), which are used to capture biometric data from Morpho and Mantra devices, respectively.
morphoCapture()function:- Constructs a URL using the
devicePortvariable to specify the Morpho device’s endpoint for capturing biometric data. - Creates a string named
PIDOPTSthat holds XML content defining options for the capture process. - Performs a check to determine the appropriate type of XMLHttpRequest object (
xhr) to use based on the user’s browser. - Opens an asynchronous request to the specified URL using the “CAPTURE” method.
- Sets request headers for the content type and accept type.
- Defines an
onreadystatechangeevent handler that executes when the request’sreadyStateis 4 (indicating completion). - Within the event handler, checks the request’s status and processes the response accordingly. If the status is 200 (successful), it parses the XML response to JSON format using
convert.xml2jsonand sets the parsed data usingsetPidData(). If an error occurs, it logs the response to the console.
- Constructs a URL using the
getPosition(string, subString, index)function:- This helper function takes in a string, a substring, and an index as parameters.
- It splits the string based on the substring and returns the length of the joined string up to the specified index.
- It is used to determine the position of a character in a string.
mantraCapture()function:- Similar to
morphoCapture(), this function is designed for capturing biometric data from Mantra devices. - Constructs a URL using the
devicePortvariable to specify the Mantra device’s endpoint for capturing biometric data. - Creates a string named
PIDOPTSthat holds XML content defining options for the capture process. - Performs the same XMLHttpRequest setup, request opening, and event handling as in
morphoCapture(). - Processes the response similarly, parsing the XML to JSON, setting the parsed data using
setPidData(), and displaying alerts based on the response.
- Similar to
All Code in One
import React from "react";
const App = () => {
const [deviceInfo, setDeviceInfo] = useState(null);
const [devicePort, setDevicePort] = useState("11100");
const mantraPorts = [
"11100",
"11101",
"11102",
"11103",
"11104",
"11105",
"11106",
];
const discoverDevice = () => {
let found = false;
for (let i = 0; i < mantraPorts.length && !found; i++) {
const currentPort = mantraPorts[i];
try {
discoverDeviceReq(currentPort, () => {
found = true;
setDevicePort(currentPort);
getDeviceInfo(currentPort);
});
} catch (error) {}
}
};
function discoverDeviceReq(port, callback) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
console.log(url);
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
// if(xhr.readyState == 1 && count == 0){
// fakeCall();
//}
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
} else {
callback();
}
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
function morphoCapture() {
var url = `https://localhost:${devicePort}/capture`;
let PIDOPTS =
'<PidOptions ver="1.0">' +
'<Opts fCount="1" fType="2" iCount="" iType="" pCount="" pType="" format="0" pidVer="2.0" timeout="10000" otp="" wadh="" posh=""/>' +
"</PidOptions>";
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
function getPosition(string, subString, index) {
return string.split(subString, index).join(subString).length;
}
function mantraCapture() {
var url = `https://localhost:${devicePort}/rd/capture`;
let PIDOPTS =
'<?xml version="1.0"?> <PidOptions ver="1.0"> <Opts fCount="1" fType="2" iCount="0" pCount="0" format="0" pidVer="2.0" timeout="10000" posh="UNKNOWN" env="P" wadh="" /> <CustOpts><Param name="mantrakey" value="undefined" /></CustOpts> </PidOptions>';
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
// callback(JSON.parse(result1));
//document.getElementById('text').value = "Captured Successfully";
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
const capture = () => {
if (
!deviceInfo ||
!deviceInfo.DeviceInfo ||
!deviceInfo.DeviceInfo.additional_info ||
deviceInfo.DeviceInfo.additional_info.Param.length == 0
) {
alert("Please choose device or check device is ready or not");
} else if (
device == 0 &&
deviceInfo.DeviceInfo.additional_info.Param[0]._attributes.value != ""
) {
mantraCapture();
} else if (
device == 1 &&
deviceInfo.DeviceInfo.additional_info.Param[0]._attributes.value != ""
) {
morphoCapture();
} else {
alert("Please choose device or check device is ready or not");
}
};
return (
<div>
<button onClick={capture}>Capture</button>
</div>
);
};
export default App;Summary
We explored the process of setting up the Mantra device by downloading its drivers and installing them on the system. We also covered troubleshooting steps if the device is not recognized, including restarting the computer and restarting the RD Mantra service.
Furthermore, we provided an overview of the steps to set up a React project, simplifying the instructions for a user to understand and follow.
We also analyzed a code snippet that involved discovering the port connected to Mantra and Morpho devices. The code aimed to find the correct port, store its number, and retrieve device information such as serial number.
Finally, we explained another code snippet that included functions for capturing biometric data from Mantra and Morpho devices. The code involved making requests to specific URLs, handling responses, parsing XML to JSON, and displaying alerts based on the response.
If you want to deploy this React app using Amazon EC2, please click here.
