Site icon Joseph Mwema – Biometrics Engineer

JavaScript Web Biometric Authentication and Integration

JavaScript Web Biometric Authentication

Brief Introduction :

JavaScript Biometric Authentication Web Software pack is a new, robust and lightweight solution that was Developed to Help Programmers, Software Engineers, Software Developers and Software Solutions Integrators to integrate Biometrics Authentication into their Web Browser based Applications Quickly, Smoothly and with Ease.

To Software Project Managers, this JavaScript Biometric Authentication solution will will help you reduce your Software Project milestones and facilitate your Quick turnaround of your Software Projects within your Delivery timeline. I guarantee you that you will beat deadlines with this integration. You will ultimately save on Software Development Time and redeploy your Developer team to other more Demanding areas of your Software Project after integrating with this Software pack.

Whether you are the one tasked with integrating Biometrics to your Web Application or you are the Software Project Manager overseeing the entire SDLC of your Web Software Project, with this pack you instantly WIN on many fronts when you choose to integrate your Web Application with JavaScript Biometric Authentication .

JavaScript Biometrics Authentication Software Integration pack for Web Applications Devloped to run on Firefox, Chrome, Opera, Internet Explorer and Microsoft Edge Web Browsers in Windows Desktops.

Background Information :

In the past, there never used to be many web browser based applications and most software information systems were stand alone applications running on disparate computers in organizations and companies.

Later on, the need to build distributed systems that could be run in different locations and geographical regions saw the upsurge of web based software applications emerge globally that ran on web browsers to provide services like e-mail services for checking, reading and writing e-mail.

Web based applications nowadays run on web browser applications like Mozilla Firefox, Google Chrome, Opera, Internet Explorer and Microsoft Edge on very many client computers in the world.

When Biometrics Authentication came into being, it was on stand alone computers as well. Various diverse industrial use cases demanded the tech world to avail Biometrics Authentication on Web Browsers and this too was made possible as more applications were build for web.

ActiveX and Java Applets

Up until around year 2012, developers could implement Biometrics Authentication in Web Browsers using technologies and plugins like ActiveX and Java Applets.

On Internet Explorer back in the yesteryears and upto date, ActiveX facilitates and continues to provide a viable way to add Biometrics Fingerprint Authentication on Internet Explorer versions 11, 10, 9, 8, 7 and 6. ActiveX makes allows Fingerprint Scanners to communicate with Internet Explorer web Browsers via COM objects.

To Add and integrate Biometric Authentication in other web browsers like Firefox and Chrome you needed to use Java Applets because ActiveX could not run on Mozilla Firefox and Google Chrome.

Years ago, when Firefox was at its infancy, in some of the earlier versions of
Mozilla Firefox, there was a time you could run ActiveX components on Firefox with ease. This however did not last for long because, as both web browsers fought for market share and dominance , that support for ActiveX onMozilla Firefox was dropped. Mozilla Firefox decided that they would no longer continue to run ActiveXcomponents on their Web Browsers.

ActiveX was and is still a Microsoft technology that originated with Microsoft to make it possible to add more dynamic scripting features to their Web browser platform, Internet Explorer.

Since the likes of Mozilla Firefox and Google Chrome web browsers could not support ActiveX plugins off the shelf, to implement Biometrics Authentication using a Fingerprint Scanner, Developers of yesteryears used Java Applets to communicate with Fingerprint Scanners on
Mozilla Firefox and Google Chrome web browsers running on client computers.

Those Software Developers coding in PHP, JSP, ASP, ASP.NET, Python who wanted to extend Biometrics Authentication to their Web Browser Applications and wanted to build Web Applications that were Web Browser independent, they had to develop their Web Applications using Java Applets.

You could run your Web Biometric Authentication on any Web Browser using Java Applets including Internet Explorer as well. By the way, Java Applets could seamlessly run on Internet Explorer very well the same way they did onMozilla Firefox and on Google Chrome.

As you can already tell by now, Software Developers who wanted to be able to add Biometrics Authentication in their Web Browser Applications developed in PHP, JSP, ASP, ASP.NET, Python had to learn and know how ActiveX components worked in order to be able to harness their dynamic scripting capabilities to extend other system functionalities to their web browser applications designated to run on Internet Explorer. The same case still applies today.

Likewise, for Java Applets, Software Developers who wanted to extend system wide functions like making protected System Function calls from their Mozilla Firefox and Google Chrome web browsers, they had to not only learn how to use Java Applets but also learn how to develop the Java Applets themselves and include the Functions they wanted users to be able to access on Web Browser clients.

I cannot express my gratitude enough for having gotten introduced to Java Programming Language in my early days of computing. I was ready and mature like viceroy for this show down! I already had experience of Developing Java Applets before.

Whether you were a PHP programmer or JSP or ASP programmer and wanted to add Biometrics Authentication to your Web Application and wanted to develop a Browser independent Web Application, you had to learn Java to be able to develop Java Applets. Hahaa!

If you hated Java ( hahaa ) your goose was cooked! Your options were limited and your Fate was sealed! More often you hear wannabe kiddie coders disdain Java and how they would never touch it, today they can get away with it but had they been Developers of yore they would have had their asses handed to them.

I remember waking up one Saturday early morning to go to my Friend’s room to get a copy of Java JDK 5 so that I could code at a Java project on Blue J IDE. I wonder if that IDE still exists. It has been years since I used it.

Demise of Java Applets – The end of an era and a Goodbye to NPAPI plugin

Web Browsers towards end of year 2012 and 2013 or thereabout had already disclosed that they would no longer be supporting NPAPI plugin and would discontinue them from their platforms.

NPAPI plugin, which in full is known as Netscape Plugin Application Programming Interface  made it possible for Web Browser extensions to be built that could extend System Functions to web e.g. IO Functions like opening and reading Files. This was the backbone on which Java Applets could run on a variety of Web Browser applications were built on.

In simple comparison, if you remove wheels from a car, the car will not move. NPAPI made it possible for plugins like Java Applets to get exposed and make system calls from a Web Browser.

If you remember, Adobe Flash, it relied on a plugin you had to install for it to run on your Web Browser. It still does so even today. There was an online Webinar I attended last year and they asked us to install Adoble Flash.

Applications like Adobe Flash media player and Java Applets could no longer work on Web Browsers after NPAPI was pulled out. Same case applied to Web Applications which were running Biometric Authentication using Java Applets.

Some years ago, I had developed a PHP Web based Biometric Patient Identification solution that I helped a Hospital I was consulting for to integrate with their Hospital Management Information System (HMIS).

During one of the days that I had camped there, I left things working fine and went to my hotel room for the night just outside the hospital. When I came back in the morning, I met the IT officer I was working with at the corridor that was leading to the main entrance of the Hospital. I think she had been waiting for me to arrive and was just about to call me when we bumped into each other.

She told me that the Patient Biometric Authentication component was not working at the two Front Desk Computers where we had deployed it. I also learned that the attendants at the Outpatient Services desks who were on night shift had been bugging her to get the problem fixed on one of the computers. By morning, none of the 2 Front Desk Computers could perform Biometrics Authentication on the PHP Web Application’s Patients visit page.

I quickly swung into the room where the two computers were and began to diagnose the problem on one of the computers. I inquired from one of the cashiers who was signing off at the end of their shift if she was privy to anything out of the ordinary that could have transpired on the computer they were working on. He informed me that the computer he was using prompted him to click on an update button which he promptly did.

The cashiers at this Hospital, when bored at night, when there are no patients visiting at night, they would connect the computers to internet to access Facebook. That was the time when a browser update happened.

The overnight browser update had removed support for NPAPI plugin which made it impossible for my Biometrics Authentication Java Applet to run on their computer. The other computer on the other hand had installed and updated Java Run time version to a newer version which could no longer run unsigned Java Applets.

After year 2012 / 2013 or thereabout Java Runtimes could no longer run unsigned Java Applets on Web Browsers.

Joseph Mwema’s Email Address and YouTube Channel’s QR Code

I had to revert my PHP code to use some earlier ActiveX code I had previously developed for Biometrics Authentication and made the application to run on Internet Explorer. ActiveX saved the Day!

We undid several other things to get things to work and became innovative while at it. Luckily, during the integration, the IT staff I was working with was at the top of their game and they understood their code very well. There are times I have helped different lots of clients integrate specialized features into their own code and found out that they never understood their own code and I had to work on my own without their help.

When I suggested to the IT Staff that in their code they call an internet explorer shell in their code and parse the PHP link for Patient visits page which had the Biometric Authentication component, they understood what I was asking them to do and knew how to do it in their Visual Basic code. In fact, at the end, no one would be able to tell that the PHP Patient Biometric Authentication code was running inside VB code because it seamlessly integrated harmoniously with their HMIS. It all looked like the PHP Biometrics Authentication component was part of their Visual Basic HMIS.

After we stabilized the situation, the IT personnel later on built the Biometrics Authentication component into their Hospital’s HMIS VB code with no need for running the internet explorer shell in their HMIS application.

That was the last time I ever used a Java Applet in my code anywhere. There was always the temptation or installing older versions of Java to continue running my Biometric Authentication Java Applets on Web Browser based applications but the thought of an overnight Java update rendering my application useless made me trash those ideas.

The only alternative I had now was to continue using ActiveX on Internet Explorer for the time being, until recently, when I developed HTML 5 Web Biometric Authentication in year 2017 for PHP Web Applications. There was like 2-3 years in between that time before I developed HTML 5 Web Biometric Authentication and in 2019 I finished work on this JavaScript Biometric Authentication web software integration module pack.

Motivation for Developing an alternative to ActiveX and Java Applets solution for Biometrics Authentication that works in Multiple Web Browsers

To navigate away from the caveats imposed to Developers of Modern Web Browsers Applications that run on recent versions of Mozilla Firefox, Google Chrome, Opera and Microsoft Edge by use of NPAPI plugin, ActiveX and Java Applets, there was need to find a more long lasting solution that could be used to Develop and Implement Biometrics Authentication in cross Browser Web Platforms.

The alternatives were to wait for HTML5 features to be added to Web Browsers that could provide APIs that could allow a Web Browser to talk to USB peripheral devices like a USB memorystick or a USB Fingerprint Scanner ( … most Fingerprint Readers / Scanners connect to Client Computers via USB ports) through a negotiated secure connection or use Web Sockets ( APIs to establish bidirectional communications between Server and Client Computer).

By the way, you can actually use your Computer as a Server and as a Client too then Send and Receive message via Web Sockets on the same computer.

There was also this Javascript project called WebUSB that was making significant strides in that direction, last time I checked. You can check it out here https://github.com/WICG/webusb and https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web I never got to toy with it enough but is still in active development even as of now.

HTML5

HTML5 the successor to HTML is very promising and even though many Web Browsers are not all HTML5 compliant even as of now, the HTML5 Web Biometric Authentication and Integration for PHP pack I developed here can help you to add and integrate Biometric Authentication to any of the recent modern Web Browsers that support HTML5. If you have a Windows Web Browser whose version was released as after year 2015, chances are that it supports HTML5.

JavaScript

Circa 2019, JavaScript provides a rich set of tools that empowers you as a Developer to do so much on web in both Client Side and Server Side to enable you Develop / Build robust web applications. If you have followed keenly in the paragraphs above, you will reckon that, I had mentioned that WebUSB is a JavaScript API too.

Nowadays we have NodeJS that even allows us to use JavaScript for both Front-end and Back-end. You can be a Full Stack Developer coding and developing Web based solutions in only JavaScript. Read about this NodeJS Biometric Authentication and Integration Software module I previously developed using NodeJS. It however only works on Internet Explorer.

First forward to today, this JavaScript Biometric Authentication and Integration pack is developed in JavaScript a works in modern web browsers like Mozilla Firefox and the API calls to the Biometric Fingerprint Reader / Scanner for carrying out Biometric Fingerprint Enrollment, Biometric Fingerprint Identification and Biometric Fingerprint Authentication are in JavaScript.

Unlike the NodeJS Biometric Authentication above,
JavaScript Biometric Authentication and Integration pack works on Mozilla Firefox, Google Chrome, Chromium based Web Browsers, Opera, Internet Explorer, Microsoft Edge straight from the Shelf without need to add any Web Browser extensions or Plugins.

JavaScript Web Biometric Authentication and Integration Software

JavaScript Biometric Authentication Software pack is a Versatile, Robust and Fast Web Browser based Biometrics solution for integrating Biometrics Identification (1:N) in Modern Web Browsers like Firefox, Chrome, Opera, Internet Explorer and Microsoft Edge. It is also very Lightweight.

Compared to HTML5 Web Biometric Authentication, it is Faster, Lighter and the most significant thing of all, Simple and Easy to Integrate. The complexity of availing its Biometrics Functionality is abstracted from the Developer by use of Simple Functions that the Software Developer can call to integrate it Quickly and Effortlessly into their Web Application.

So how does it work? First, there are some basic requirements you are supposed to meet to be able to run JavaScript Biometric Authentication and integrate it into your Web Application. They are;

Prerequisites

1. Operating System(s) for Client Side / Front-End

The Front-end does NOT work on LINUX. It works Windows ONLY.

Jomutech Systems

2. Operating System(s) for Server-Side / Back-End

It is now possible to serve JavaScript Biometric Authentication from a Linux Server. This configuration will be available for those who ask for it and it will attract an additional extra cost. If you decide to have your Back-end Web Server and Database on Linux I will Help you set it up.

Jomutech Systems

If you run Ubuntu 18.04 LTS and above or Debian 9 and above you are good to go. I will support you too if you use any of the recent releases of Enterprise Linux Server Editions like Suse.

Jomutech Systems

3. Supported Fingerprint Reader / Scanners

Some of the Supported DigitalPersona and Upek Fingerprint Reader Scanners from Crossmatch

4. Supported Web Browsers ( Windows based )

If you decide to use other Web Browsers not mentioned here, use them at your own discretion.

Jomutech Systems

5. Database(s)

If you plan to use any other RDBMS other than MySQL and MariaDB that is still OK. I can Help you integrate the same with MSSQL, Oracle, PostgreSQL, SQLite etc.

Most of the times, those developing ASP.NET web based applications will use MSSQL in preference. I would recommend this combination of ASP.NET and MSSQL for exceedingly fast speeds for ASP.NET Web Applications.

Jomutech Systems

6. Web Server

Web Programming Projects you can integrate with JavaScript Web Biometric Authentication

If your Web Application does not fall among any of the above web technologies, that does not mean that you can not use JavaScript Biometric Authentication and integration software pack to add Biometrics Authentication with it. If you are a Developer we can integrate it together with you and test it together.

N.B All occasional use of Biometrics Authentication in this web page and in this context means Biometrics Identification (1:N).

Properties of JavaScript Web Biometric Authentication Software Integration

The following section will now show you how the various components of JavaScript Web Biometric Authentication software Integration pack glue up together to provide Biometrics Fingerprint Enrollment and Biometrics Fingerprint Authentication in Web Browser based Applications.

Important things to do before Fingerprint Enrollment and Fingerprint Authentication

Before you begin to use JavaScript Biometric Authentication, connect a supported Fingerprint Reader Scanner to your Computer.

The Web Browser will Detect your Fingerprint Scanner to determine if indeed it is a Supported Device. See above for list of supported Fingerprint Scanners.

Select your Fingerprint Scanner from the Select Reader Combo Box / Drop down list.

After this step you can now proceed to carry out either Fingerprint Enrollment / Registration or Fingerprint Authentication / Identification as you had planned to proceed with your next course of action.

Click Finger Reader tab at the top then connect Fingerprint Scanner to USB port of your Windows Client Computer and Select it from Select Reader drop down list / combo box after it has been detected by your Web Browser

1. Biometrics Fingerprint Enrollment

How does JavaScript Web Biometric Fingerprint Enrollment work?

  1. In your web browser, open this link http://[YOUR SERVER IP]/javascript_bio_auth/jomutech_enroll.html# In production you should run it on an SSL secured link for maximum security. Your SSL secured link will be something that looks like
    https://[YOUR SERVER IP]/javascript_bio_auth/jomutech_enroll.html#
  2. A Person’s Particulars are given out and entered into the Fingerprint Enrollment page. They may include name, date of birth, gender, nationality etc. For the sake of simplicity, The photo screenshot demonstrates how to capture First Name, Surnme and Social Security Number. See above screenshot.
  3. Identify the First Fingerprint to be enrolled.
  4. click the tip of the Fingerprint on Fingerprint Enrollment page. The red circle will disappear and a light blue circle will appear at the tip of the selected Finger.
  5. Capture Fingerprint 5 times to enroll Biometric Fingerprint Data from this Finger until the tip of selected Finger turns to a green circled tip with a white tick inside.
  6. Identify another Fingerprint to be Enrolled.
  7. Repeat steps 3 and 4 to complete enrollment of Biometric Fingerprint Data of this other second (2nd) Finger.
  8. Click Save to archive Person particulars into Database.

That’s all there is to Fingerprint Enrollment.

Below is a screenshot of Fingerprint Enrollment page showing two (2) enrolled Fingerprints. That is, enrolled Left Index and Right Index.

JavaScript Biometric Fingerprint Enrollment page showing two(2) Enrolled Fingerprnts

2. Biometric Fingerprint Identification (1:N)

JavaScript Biometric Fingerprint Authentication

How does JavaScript Web Biometric Authentication work?

  1. In your Web Browser open this link, http://[YOUR SERVER IP]/javascript_bio_auth/jomutech_identify.html# In production you should run it on an SSL secured link for maximum security. Your SSL secured link will be something that looks like https://[YOUR SERVER IP]/javascript_bio_auth/jomutech_identify.html#
  2. Request person you want to Biometrically identify to place their Finger on the Fingerprint Reader / Scanner.
  3. If Biometric identification Found a Match, the name and social security number of the person will be retrieved. A picture with a Fingerprint image and green tick will be momentarily displayed to notify you of a Successful Identification.
  4. If Biometric identification did NOT find a match, the name and social security number text boxes will be filled each with a ‘?’ mark. A picture with a Fingerprint image and a red ‘?’ will be momentarily displayed to notify you of a Failed Match ( NO MATCH ).

That’s all there is to do with Fingerprint Identification.

When you integrate with this JavaScript Biometric Authentication, you can add a URL for post processing the result of a Biometric Identification to the HTML form’s post attribute that encompasses the name and social security number text boxes or whatever else you will have retrieved in your integrated HTML page.

Below is a screenshot showing NO MATCH for a Person’s Fingerprint whose presented Fingerprint Data did not match any other of the Enrolled and Archived Biometric Fingeprint Data in the Database.

JavaScript Biometric Fingerprint Authentication showing results for NO MATCH

Database and SQL Table Structure for saving Biometric Fingerprint Data

The below screenshots shows how the Database javascript_bio_data and Table employees.

The table employees has the following important column entities for saving biometric data of a person. They are;

You can have any number of columns as per the requirement s of your integration needs / business case you have at hand. The columns shown here are for proof of concept to help demonstrate to you to understand how JavaScript Biometric Authentication works

Biometrics Database and Table Structure for JavaScript Biometric Authentication

The snapshot below shows the Biometric Fingerprint Data as it looks when saved in SQL Table.

Biometric Fingerprint Data in SQL Table inside a Database

So much to do with Properties of JavaScript Biometric Authentication, How it Works and its Database and SQL Table structure.

This JavaScript Biometric Authentication solution unlike the old Java Applets solutions of up to year 2012 and 2013 should suffice in the foreseeable future at least for any Web Browser and any Web based Application.

There were some Biometric APIs that Biometrics Developers and Biometrics Integrations experts were using leading to year 2012 and 2013 that fell out of the way and got obsoleted after Web Browsers stopped supporting the NPAPI plugin and dropped it like a bad habit.

After the support of NPAPI was discontinued, Java Applets applications’ could not stand on their own and bowed out. The Biometrics APIs which relied on Java Applets to make API calls that could talk with Fingerprint Scanners were decimated and some of them ever since have never had any API features for Web based Applications.

It is important to note that Biometrics Authentication which rides on Active X in Internet Explorer still works fine on modern Internet Explorer 10 and 11. If you install the latest Windows Service Packs in Windows, they come packaged with Internet Explorer 10 and 11 which can help you run Biometrics Authentication on Web Browsers but that is only on Internet Explorer 10 and 11.

You can now integrate Biometrics Authentication on any Web Application that runs on a modern Web Browser of your choice using this JavaScript Biometric Authentication. Talk to Joseph now on the e-mail below or scroll down to the bottom of the page and fill out the contact form to send a more detailed e-mail about your integration / business use case.

That’s it! Let’s Help you integrate Biometric Authentication in your Web Application with this JavaScript Biometrics Authentication and Integration Software pack.

Who is the Target Audience for JavaScript Web Biometric Authentication and Integration Software?

Some of the Clients who I have Helped to integrate their Software Systems with Biometrics

Universidad Nacional Autónoma de México
HealthFocus in South Africa
Prestige Media en República Dominicana
Graphene Decision Science Company in Singapore
Cinergy in USA
3Creatives en Colombia
Flexiele HRMS in India
Nefos Solutions in Spain
SUNUBE en Colombia

Why integrate Biometrics in your Organization’s

Web Application with Joseph Mwema (me) ?

Why choose Jomutech as your Biometrics Integration partner

Want to enlist my expertise to Help you integrate Biometrics in your Organization’s Web Application?

Joseph Mwema’s Email Address and YouTube Channel’s QR Code
Exit mobile version