React Biometric Fingerprint Integration using a Columbo Scanner

Joseph Mwema

3 years ago

One day, in the early months of year 2021, I decided that I was going to create a React Biometric Integration using a Columbo Fingerprint Scanner.

I did not put much planning and thought to it, I just went straight ahead and started working on it.

I had just recently finished doing a PHP Web Biometric Integration using a Columbo Fingerprint Scanner and thought to myself, why not do a React Biometric Integration using the same Fingerprint Scanner.

This was one of those impromptu ones!

I had previously been entertaining the thought of doing either a React Biometric Fingerprint Integration or a React Iris Recognition Integration.

With a Columbo Fingerprint Scanner at hand, I chose to do the React Biometric Fingerprint Integration.

This is how a Columbo Fingerprint Scanner looks like. See below picture.

The React Biometric Integration that I did works fully on Windows and I was not intent on making a cross platform React Biometric Integration App as of this time. In future, yes!

Why do a React Biometric Integration?

I had been working on Biometrics using various other technologies, frameworks and programming languages and had not done anything before about Biometrics using React hence the curiosity and interest to do a React Biometric Integration.

React is a component based framework which rides on JavaScript that was created by Meta platforms ( initially Facebook ). It is used to develop Applications for Windows, Web, Android, iOS, macOS by enabling developers to leverage React Framework together with native Platform feel and capabilities.

Like I mentioned earlier, my intention was not to develop a cross platform React Biometric Integration App. I was particularly interested in doing an only Windows React Biometric Integration.

With Hardware integrations like is with Biometric Scanner integrations, the final React App may not work seamlessly on all cross platforms as you would expect with less complex React Apps and I was very aware of this at the very onset hence the decision to only do a React Biometric Integration for Windows only for starters this time.

This is a screenshot of my Windows based React Biometric Integration App. See below picture.

After running npm start my React Biometric Integration DEMO App launches on the Web Browser

Just before you embark on reading this article post, please take note of the following and decide whether it is worth spending your time reading it;

This article post is NOT A TUTORIAL
This article post is NOT AN EDUCATIONAL OR STUDY MATERIAL
This article post is NOT GOING TO OFFER YOU SOFTWARE DRIVERS TO DOWNLOAD, I DO NOT DO THAT HERE
This article post is NOT GOING TO OFFER YOU A DOWNLOAD LINK FOR SOFTWARE CODE, I SHARE MY CODE ONLY WITH COMPANIES, ORGANIZATIONS, INSTITUTIONS OR SMEs THAT I AM ACTIVELY DOING CONSULTING WORK FOR. LEARN MORE ABOUT THIS HERE BIOMETRICS DEVELOPER & INTEGRATION SUPPORT
This article post is NOT A PROMOTIONAL CONTENT FOR ABIOMETRIC SCANNER PRODUCT
This article post is NOT GOING TO COMPARE AND CONTRAST MERITS OF ONE BIOMETRIC SCANNER TO ANOTHER

The above helps you decide whether this article is worth your time so that you do not waste your valuable time following thru on an article that would not help you.

I am a professional and as such I do charge for my services as a Software Engineer and as a Biometrics Engineer consultant that I provide to a Company, Organization, Institution or an SME.

It is not once or twice or thrice that I have busted grown a55 men pretending to be students so that I can help them for free with their work. I smell that sh8 from a far and turn the tables very fast on them.

As a result, I do not take up any work from students or anyone who thinks I should offer a free helping hand. I have an active spam filter for emails like that.

Preparing to Create a React Biometric Integration Application

To get the React Biometric integration started I did the following to set up my environment.

Checked that I had NodeJS installed otherwise I would have had to install it. To check version, I ran node –version on my command prompt (See screenshot below). I had previously worked on a NodeJS Biometric Integration so I knew I already had NodeJS installed on my computer.
Secondly, I needed to decide what to use for my Code Editor. I chose to work on the Visual Studio Code that I already had installed in my Computer. By the way Visual Studio Code is not one and the same thing as Visual Studio. Hope you guys already know that? There are some folks who get jinxed by the two.
Afterwards, I used the Tool Chain (script) create-react-app to create my React Biometric integration App as follows while in command prompt npx create-react-app react-app-columbo-finger-scanner-integration . The react-app-columbo-finger-scanner-integration was the name I designated for my React Biometric integratioin App. There are various Tool chains that you can use to create your React App. Read more on these Tool chains from Recommended Tool Chains for creating React Apps.
Thereafter, the other thing I was supposed to do was to install Biometric Scanner drivers for Windows but there was no need for me to do so as I had already done so earlier when I got to use the Columbo Biometric Scanner for the first time on my Computer. Otherwise, if you do not have drivers for your Biometric Scanner you will need to get them and install them in your computer.
I needed to have a Database for archiving my captured and enrolled Biometric Fingerprints data so I went ahead and created a Database and a Table in Mariadb SQL Database Server that I already had running in my computer.
Lastly, my web browsers, that is Mozilla Firefox, Google Chrome and Microsoft Edge were all currently updated to their latest versions at the time and thus I did not have to install a Web Browser or update my current Web Browsers. In your case, you may need to make sure that you have a modern Web Browser installed and that your Web Browser is the latest version there is if you prefer working with the latest tools there is in the market.

With the above in place, I set out to code my React Biometric integration App on Visual Studio Code using my Columbo Biometric Scanner.

Requisite Requirements for React Biometric Integration using a Columbo Fingerprint Scanner

Software Requirements

Windows 10 or Windows 11 Operating System
Mariadb Database (You can use any Database of your choosing for your Biometrics Database otherwise for me I chose to use Mariadb for this integration )
NodeJS (I prefer to install the Long Term Support (LTS) version)
Windows Drivers for Columbo Biometric Fingerprint Scanner
Modern Web Browsers like e.g. Google Chrome, Mozilla Firefox, Microsoft Edge, Opera for Client Computer

Server Computer Hardware Requirements

RAM 8GB and above
Processor Core i5 and above
Storage Space 500GB of Free Space and above though it could be what you consider to be enough to accommodate the large number of Biometric Finger images that you are going to Capture, Enroll and Save in your Database.

Client Computer Hardware Requirements

RAM 8GB and above
Processor Core i5 and above
Visual Display Unit Resolution could be e.g. a 1920px by 1024px Screen Monitor dimensions and above
Free and functional USB ports that you can use to connect and power your Columbo Biometric Finger Scanner

Biometric Finger Scanner Requirements

C olumbo Biometric Fingerprint Scanner

Challenges Experienced when implementing React Biometric Integration using a Columbo Fingerprint Scanner

None of the challenges that I experienced was an outlier. No insurmountable challenges apart from the usual debugging of my code until the integration worked as I had intended it to.

Overall Experience when implementing when implementing React Biometric Integration using a Columbo Fingerprint Scanner

Working on my React Biometric integration App’s code which was segmented in separate components was fantastic in managing independently the particular behavior and outcome of everyone of the components that made up my React App.
Well documented User guides for Columbo Biometric Finger Scanner from Integrated Biometrics the company that manufactures this Scanner helped with smooth implementation of the React Biometric Integration
Well documented User manuals for Columbo Biometric Finger Scanner from Integrated Biometrics the company that manufactures this Scanner helped with smooth implementation of the React Biometric Integration
Well documented User guides for React ( React study material from https://reactjs.org/docs ) helped with smooth implementation of React Biometric Integration
Thanks to the Good documentation of React and the Great Biometric Scanner User Guides and Manuals from Integrated Biometrics I was able to successfully carry out React Biometric integration using a Columbo Fingerprint Scanner and can now Help you do the same too

Other Biometric Fingerprint and Iris Recognition Integrations that I can Help you with

Screenshots of React Biometric Fingerprint Integration DEMO App

Running my React Biometric Integration DEMO App using npm start COMMAND

index js file the main entry for my React Biometric Integration DEMO App

app js file of my React Biometric Integration DEMO App

Mariadb Database Connection to React Biometric Integration DEMO App Back-End

Database Back-End for React Biometric Integration DEMO App showing IT_CONSULTANT SQL Table Structure

Inside the register js file where the Register Component Back-End code is for my React Biometric Integration DEMO App

The Front End GUI of React Biometric Integration DEMO App that is rendered by Register Component

Inside the authenticate js file where the Authenticate Component Back-End code is for my React Biometric Integration DEMO App

The Front End GUI of React Biometric Integration DEMO App that is rendered by Authenticate Component

Capturing User Biometric Fingerprint during User Registration in my React Biometric Integration DEMO App

User Biometric Fingerprint Image captured during User Registration in React Biometric Integration DEMO App

Row Entry in IT_CONSULTANT SQL Table of React Biometric Integration DEMO App in Mariadb Database

Screenshot of Notification of a Successful Fingerprint Match Found in React Biometric Integration DEMO App

Screenshot of Notification of a NO MATCH in React Biometric Integration DEMO App

Video DEMOS of React Biometric Fingerprint Integration

**ReactJS Web Biometric Fingerprint Capture and Registration – NOT A TUTORIAL NOR IS IT A STUDY GUIDE**

**ReactJS Web Biometric Finger Authentication DEMO – This is NOT A TUTORIAL**

**ReactJS Web Biometric Registration and Authentication WINDOWS App DEMO – This is NOT A TUTORIAL**

Do you Need Help with React Biometric integration?

I am a Software Engineer who Helps Companies, Institutions, Organizations, and SMEs like You to Develop, Integrate, Support and Maintain Identity Management (IAM) Software Solutions based on Biometrics that run on Windows, Linux, Web, Android, RaspberryPi and Cloud.

If you need a Pair of Experienced Hands to Help you with your React Biometric integration, I can Help you with that! You can count on me!

I provide Premium based Consulting! Please find more Details on How to contact me for Professional Consulting Services to Help you with your React Biometric integration at Joseph Mwema’s YouTube channel’s About section.