IB-Columbo Single Finger Print Scanner Integration with React Application-Part 1
Working as front-end developers in international organizations we come up with challenges on daily basis. Similarly, I got a chance to work on a tricky task that I was blank about and had no idea where to start with. I was handed over a black device to integrate it with a react application and the journey of R & D begins………
Note:
The first thing that developers working on a biometric project are agitated with is a proper SDK for proper integration and driver installations. Secondly, the development environment of the client application has to be considered because Unfortunately, Not all SDK supports all languages properly, especially when it comes to integrating fingerprint scanners with web applications. This causes a lot of inconveniences, wastage of precious time, a lot of research, and eventually loss of the project itself.
Most importantly, The following solution is developed as a prototype so that such a scenario can be developed using certain techniques.
Phase A:- Setup of biometric windows application
Follow the below-mentioned steps carefully and you are DONE!
Step 1: Learn about the device and Request Documentation:- The Columbo and Columbo Desktop are the world’s smallest, lightest, and fastest single-fingerprint scanners, producing the highest quality fingerprint images. The Columbo is provided with a full-featured SDK to enable effective integration into applications requiring certified quality images, meeting the needs for enrollment and verification applications. The Columbo and Columbo Desktop are incredibly accurate and provide much better image quality than other devices. For more detail visit the website and go to the support section to request documentation.
https://integratedbiometrics.com/products/fbi-certified-fingerprint-scanners/columbo
After successful form submission, you will be sent an email of Integrated Biometrics Software Development Kit to Download with the specific URL and credentials. You will download all the documents as shown in the below image.
Step 2: Read the documentation:- There is a manual for IBScanUltimate API Manual for Java (and Android) and IBScanUltimate API Manual for C. Read the documentation as it will help to understand the functionality of each method.
Step 3: Customize and Execute the Application:- First, install the application by name (IBScanUltimateSDK(x64) Setup 3.9.0.exe). When you install the SDK the drivers for the device will install. But the specific driver install files are located in the \Driver directory of the installed SDK. There are sample codes provided in different languages i.e C#, java, visual basic, and are located in the \Sample sources directory of the installed SDK. The necessary libraries are located in the \Lib directory of the installed SDK. In my case, the path to access the Libraries, Drivers, and Sample Sources are :
“ C:\Program Files\IntegratedBiometrics\IBScanUltimateSDK_x64\”
Second, Install the visual studio 2022 and .net framework 4.8. Open the code from the path and execute the code. Remove if any error occurs while compilation.
“C:\Program Files\Integrated Biometrics\IBScanUltimateSDK_x64\Sample sources\CSharp\IBScanUltimate_SampleForCSharp”
Third, Customize the default layout of the windows application according to your requirements and execute the code. The .exe file will be executed.
Forth, Then attach the fingerprint device and select the path, and type to save the images. Press start to start scanning the image. Your finger will be scanned and automatically saved in the desired folder. The scanned image will be shown
Congratulations! 🎉 you are done with the phase A.✨. It was easy , Only it required a litlle guidance.
At first, it looked difficult but with continuous efforts, research and discussions finally I got to the point where I was able to build and show a prototype of my working solution.
Similarly inthe case of fingerprint scanning. When a web application triggers an event by clicking the button, an api is called and a channel is subscribed and when the image is captured from the IbColumbo device and the new image is displayed on the web screen.
Phase B:- Setup of React web application
Follow the below-mentioned steps carefully and you are DONE! with the frontend phase.
Step 1: Build a react application: In my case, I build a new screen in my existing project. If you are a beginner, you might be thinking about how to build a react application for this there are plenty of materials already available you can take help from the following links or elsewhere.
Step 2: Screen to Display the Image:
I built the following screen in my react project to display the scanned image. When the user will click the scan button then the magic will star . But before that pusher and express need to be configured. Follow phase C
Step 3: Integrate the API:
useEffect(() => {
getImages();
}, []);const GotoScanner = async () => {
const response = await fetch("http://localhost:9000/activate-scanner", {
method: "POST",
});
getImages();
};const getImages = async () => {
const response = await fetch("http://localhost:9000/image", {
method: "GET",
});
console.log("show image api response", response);
};return (
<>
<Grid>
<Button onClick={GotoScanner}>Scan</Button>
</Grid>
</>
)
Awesome! 🎉 your frontend screen is ready.✨.
Phase C:- Setup of middleware [Pusher] with server [Express js]
What is a pusher? Pusher is an intermediate layer between servers and clients and it maintains persistent connections to the clients. It acts as an event listener whenever an event is triggered from an app, the app can notify all other applications. The applications can be desktop, web, or mobile applications.
Basically, Pusher Channels has a publish/subscribe model. for example; A mobile app interested in the current Bitcoin price can subscribe to the channel named bitcoin. When the price of Bitcoin changes, your system can publish the new price to the channel named bitcoin. All subscribers to the bitcoin channel will receive the update.
What is Express? Express is the most famous Node.JS framework to handle multiple HTTP requests at a specific URL. To test requests you can use Postman, a very useful tool for testing all kinds of HTTP requests, I highly recommend it.
APIs can be invoked from the Express JS framework. Create a simple Express application and integrate pusher into it. Following are the steps to combine express and pusher.
i) Create a simple Express application
First, we have to set up a server. Create a folder of your choice and create a new package.json by typing npm init into your terminal to initialize an npm project.
Second, Install the express by the following command for more information visit this link.
npm install --save express nodemonNodemon isn’t required, but it will automatically restart the server whenever file is saved. This is a good practice as it saves a lot of time and we dont manually have to stop and start the server.
Third, After creating a new package.json, we’re going to install and save a few packages i.e. Now it will be easy if you simply copy the following package.json code and install all the dependencies.
{
"name": "pusher-server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"},
"author": "",
"license": "ISC",
"dependencies": {"child_process": "^1.0.2",
"cors": "^2.8.5",
"express": "^4.18.1",
"express-fileupload": "^1.4.0",
"node-gyp": "^9.1.0",
"nodemon": "^2.0.19",
"pusher": "^5.1.1-beta",
"rebuild": "^0.1.2"}
}All the packages are successfully installed. Fourth, let’s make a new file in our main directory called ‘server.js’. Inside of server.js, we need to require express and our middleware.
const express =require(‘express’);
const app = express();
app.get(‘/’, function (req, res)
{ res.send(‘Hello World!’) })
app.listen(3000);Fifth, Execute the app by using the final command npm start. Awesome! The server will start running.
Hurray! 🎉 your server is up and running.✨.
ii) Create a channel in Pusher
Create an account, then create a Channels app. Go to the “ App Keys” page for that channels app, and copy your app_id, key, secret and cluster.
Now in your express app in server.js, integrate the pusher keys like the following :
const express = require("express");
const Pusher = require("pusher");
const cors = require("cors");const pusher = new Pusher({
appId: "972450",
key: "ac7df885c2cf8580cc69",
secret: "a4f90a3cdca2b7962e05",
cluster: "ap2",
useTLS: true,});const app = express();
app.use(cors());app.listen(9000, () => {console.log("Express intro running on localhost:9000");});
Now create a post API in server.js and hit endpoint to trigger an event in the pusher application.
app.post("/activate-scanner", (request, response) => {console.log("show request data", request.body);
pusher.trigger("post-channel", "post-event", {
message: "Device is Activating",});response.send("Device Activated");
});
Check Debug Console in the pusher channel. An event is logged.
Now to execute a .exe file on API hit. You need to modify the activate-scanner API
//import the following lines in express server.jsconst { execFile } = require("child_process");
const fileUpload = require("express-fileupload");
const path = require("path");var filepath = "";//activate api to trigger an event to execute the windows applicationapp.post("/activate-scanner", (request, response) => {
console.log("show request data", request.body);
pusher.trigger("post-channel", "post-event", {message: "Device is Activating",
});const child = execFile("C:Program Files/Integrated Biometrics/IBScanUltimateSDK_x64/Build/IBScanUltimate_SampleForCSharp.exe",
[]
);
response.send("Device Activated");
});
Add the get and post API in code express server.js
app.post("/scan", (request, response) => {
console.log("show request data", request.body.fp_image);
pusher.trigger("post-channel", "post-event", {
message: request.body,
});filepath = request.body.fp_image;
response.send("Finger Print Scanned");
});var filepath = "";
app.get("/image", function (req, res) {
res.sendFile(filepath);
});
The next step is the most crucial step. It is to integrate the pusher in the .net windows application to subscribe to a channel. For that open the .sln project in VisualStudio and install the dependencies through the NuGet Package manager.
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;
using System.Net.Http.Headers;
using Pusher.PushNotifications;
using PusherClient;In SDKMainForm.cs
private async Task SDKMainForm_LoadAsync(object sender, EventArgs e)
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
string netVersion = System.Runtime.InteropServices.RuntimeEnvironment.GetSystemVersion();//Raised when Pusher is ready
System.Threading.AutoResetEvent readyEvent = new System.Threading.AutoResetEvent(false);// Raised when Pusher is done
System.Threading.AutoResetEvent doneEvent = new System.Threading.AutoResetEvent(false);PusherClient.PusherOptions options = new PusherClient.PusherOptions();options.Cluster = "ap2";options.Encrypted = true;var _pusher = new PusherClient.Pusher("ac7df885c2cf8580cc69", options);Channel _channel = _pusher.GetChannel("my-channel");
Channel channel = await _pusher.SubscribeAsync("my-channel").ConfigureAwait(false);// Connect
await _pusher.ConnectAsync().ConfigureAwait(false);
void ChannelListener(PusherEvent eventData)
{
User data = JsonConvert.DeserializeObject<User>(eventData.Data);
}// Bind event listener to channel
channel.Bind("my-event", ChannelListener);
..........}
Hit Request POST URL in postman http://localhost:9000/activate-scanner and Boom! the biometric scanner will be executed
Now scan your finger and call the GET API from the postman http://localhost:9000/image
In the .net windows application, there is a file name SDKMainForm.cs
search for the function _SavePngImage and copy the following code.
private void _SavePngImage(ref DLL.IBSU_ImageData image, string fingerName){if ((m_ImgSaveFolder == null) || (m_ImgSubFolder == null) ||(m_ImgSaveFolder.Length == 0) || (m_ImgSubFolder.Length == 0)){return;}string strFolder;
strFolder = String.Format("{0}\\{1}", m_ImgSaveFolder, m_ImgSubFolder);
System.IO.Directory.CreateDirectory(strFolder);
string strFileName;strFileName = String.Format("{0}\\Image_{1}_{2}.bmp", strFolder, m_nCurrentCaptureStep, fingerName);Base64Image base64Image = new Base64Image{FileContents = File.ReadAllBytes(strFileName),ContentType = "image/bmp"};string resultImage = Convert.ToBase64String(base64Image.FileContents);var handler = new HttpClientHandler()
{
ServerCertificateCustomValidationCallback = (message, cert, chain, sslPolicyErrors) => { Console.WriteLine(DateTime.Now.ToString() + " Validating Cert"); return true; }
};HttpClient httpClient = new HttpClient(handler);
HttpRequestMessage request = new HttpRequestMessage();
request.RequestUri = new Uri("http://localhost:9000/scan");httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));request.Method = HttpMethod.Post;var postData = new User
{
fp_image= strFileName
};var content = new StringContent(JsonConvert.SerializeObject(postData), Encoding.UTF8, "application/json");
request.Content = content;try{
var task = Task.Run(() => httpClient.SendAsync(request));
task.Wait();
var response = task.Result;
if (response.IsSuccessStatusCode)
{
var result = response.Content.ReadAsStringAsync().Result;
MessageBox.Show("Result:- \n\n" + result + "\n");
}
else
{
Console.WriteLine("{0} ({1})", (int)response.StatusCode, response.ReasonPhrase);
MessageBox.Show("fail");
}}
catch (Exception exception){
MessageBox.Show("Outside : " + exception.Message);
}if (DLL._IBSU_SavePngImage(strFileName, image.Buffer,
image.Width, image.Height, image.Pitch,
image.ResolutionX, image.ResolutionY) != DLL.IBSU_STATUS_OK)
{
MessageBox.Show("Failed to save png image!");
}}
Finally! 🎉The basic protype is ready is execute.✨.
✨ Birds Eye View✨
The basic flow to scan the image and show it on a react application web portal diagram is displayed below.
🎉Congratulations! You are Done✨.
