DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • API and Security: From IT to Cyber
  • How to Secure Your Angular Apps: End-to-End Encryption of API Calls
  • When APIs Go Wrong: Neglecting Rate Limiting
  • Secure Your API With JWT: Kong OpenID Connect

Trending

  • DGS GraphQL and Spring Boot
  • Data Quality: A Novel Perspective for 2025
  • Metrics at a Glance for Production Clusters
  • Integrating Model Context Protocol (MCP) With Microsoft Copilot Studio AI Agents
  1. DZone
  2. Software Design and Architecture
  3. Security
  4. Secure Your Web Applications With Facial Authentication

Secure Your Web Applications With Facial Authentication

This article is a step-by-step guide on how to implement facial authentication on your web application via FaceIO.

By 
Pius Oruko user avatar
Pius Oruko
·
Nov. 06, 23 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
3.2K Views

Join the DZone community and get the full member experience.

Join For Free

For the last three decades, web technology has remained relevant due to its versatile nature and wide range of applications in building solutions. The web runs virtually everything, from simple blog sites to complex and scalable web-based ERP systems in B2B, gaming, and fintech, as well as other industries.

In order to personalize the user experience in web applications, we need to authenticate them. Over the years, user authentication has evolved from 4-digit personal identification numbers (PINs) to multi-factor authentication. The latter requires users to provide additional data such as OTP codes, usually sent to their mobile number or emails, in addition to a username and password.

However, these authentication techniques are not sufficient to counter popular web attacks such as brute force, credential snuffing, dictionary attacks, or even phishing. This requires advanced authentication tools such as biometrics. With biometric authentication, organizations and users can eliminate impersonation frauds, prevent unauthorized access as well and prevent identity theft without necessarily remembering passwords and other security puzzles. In this article, we will show how to authenticate users in web applications using a facial recognition tool known as Faceio.

Authenticating Users in Web Applications Using Facial Recognition

Typically, implementing this technology would be costly in terms of hardware components required and training in-house AI models to identify users by facial recognition.

However, PixLab has developed a tool known as Faceio that enables developers to authenticate users in web applications via a seamless REST API. With Faceio, you can simply implement passwordless authentication with a few lines of code.

Faceio API

The FACEIO API provides a simple and elegant widget that provides a secure face authentication experience to your users through simple calls to the register() and authenticate() methods. This utility is powered by the fio.js JavaScript library, which is simple enough to integrate in minutes and flexible enough to support highly custom configurations. Once deployed on your website or web application, you will be able to authenticate your existing users and register new users securely, with the utmost convenience, on your favorite browser.

Step 1: Import Fio.js

To instantiate fio.js, you must load it from the Faceio content delivery network. Paste the following code snippet within the <body> tag on your HTML page.

HTML
 
<div id="faceio-modal"></div>

<script src="https://cdn.faceio.net/fio.js"></script>


This code will load fio.js asynchronously without affecting page load speed. 

Step 2: Instantiate a New Faceio Object

Instantiate a new faceio() object and pass your application Public ID as follows. You can also insert this snippet just below the import code shown in Step 1.

JavaScript
 
<script type="text/javascript">

   /* Instantiate fio.js with your application Public ID */

    const faceio = new faceIO("app-public-id");

</script>


Retrieve your application. Public ID is located at the Application Manager on the FACEIO Console.

Step 3: Invoke the Widget

To start the face recognition process, simply call register() or authentication(), the only two methods exported from the faceIO() class that you instantiated. register() is used to onboard new users (register), while authenticate() is used to authenticate previously registered users.

A typical implementation of this should be as shown in the code snippet below:

HTML
 
<html>

  <head>

    <title>Sign-In or Enroll via Face Recognition</title>

  </head>

  <body>

    <button onclick="enrollNewUser()">Enroll New User</button>

    <button onclick="authenticateUser()">Authenticate User</button>

    <div id="faceio-modal"></div>

    <script src="https://cdn.faceio.net/fio.js"></script>

    <script type="text/javascript">

        // Instantiate fio.js with your application's Public ID

        const faceio = new faceIO("app-public-id");

        function enrollNewUser(){

           // call to faceio.enroll() here will automatically trigger the on-boarding process

        }

        function authenticateUser(){

           // call to faceio.authenticate() here will automatically trigger the facial authentication process

        }

        function handleError(errCode){

            // Handle error here

        }

    </script>

  </body>

</html>


Enroll Method

The register() method allows you to register new user transactions on your application. A better process is called integration. This is the equivalent implementation of the standard check-in/signup functionality in a traditional password-managed authentication system. An effective register() call will trigger the FACEIO Utility, prompt the user for consent (if not already granted), request access (if not already granted) to the browser's webcam/front-camera stream, and finally extract and index the registered user's facial features for future authentication purposes.

The method takes some optional parameters such as locale for the interactive language, permissionTimeout is the number of seconds to wait for the user to grant access to the camera, but more importantly, register() accepts the payload, which is simply a tuple of arbitrary data that you can associate with that particular user, such as an email address, name, ID, etc. This payload will be returned to you upon future successful authentication of that particular user.

Usage

A typical invocation of the enroll method should look like this:

JavaScript
 
// Instantiate a new faceIO object with your application's Public ID

const faceio = new faceIO("app-public-id");

function enrollNewUser(){

  faceio.enroll({

    "locale": "auto", // Default user locale

    "payload": {

        /* The payload we want to associate with this particular user which is forwarded back to us upon future authentication of this user.*/

        "whoami": 123456, // Dummy ID linked to this particular user

        "email": "john.doe@example.com"

        }

    }).then(userInfo => {

        // User Successfully Enrolled! 

        alert(

            `User Successfully Enrolled! Details:

           Unique Facial ID: ${userInfo.facialId}

           Enrollment Date: ${userInfo.timestamp}

           Gender: ${userInfo.details.gender}

           Age Approximation: ${userInfo.details.age}`

        );

       console.log(userInfo);

       // handle success, save the facial ID (userInfo.facialId), redirect to the dashboard...

    }).catch(errCode => {

       // Something went wrong during enrollment, log the failure

       handleError(errCode);

    })

}


Authenticate Method

The authenticate() method allows you to validate existing registered users on your application. It is an equivalent implementation of the standard login/login functionality in a traditional password-managed authentication system. An effective authenticate() call, will trigger the FACEIO utility, request access (if not already granted) to the browser's webcam/front camera stream, and finally initiate the facial recognition process. authentication() only requires a single image to run, takes less than 100 milliseconds on average to run, and is extremely bandwidth efficient, making it suitable for use in slow networks. Depending on your application's security configuration, after the basic facial recognition engine has successfully identified the target user, they must confirm their PIN (freely chosen during the sign-in process). sign) for method validation() to succeed, and thus the Promise will be resolved.

JavaScript
 
promise = faceio.authenticate({parameters})

promise

.then(userData => {

  /* User successfully authenticated/identified */

})

.catch(errCode => {

  /* handle the error */

})


Usage

Below is a simple implementation of how you can authenticate registered users with Faceio using facial recognition.

JavaScript
 
const faceio = new faceIO("app-public-id"); // Initialize with your application's Public ID

function authenticateUser(){

    faceio.authenticate({

        "locale": "auto" // Default user locale

    }).then(userData => {

        console.log("Success, user identified")

        // Grab the facial ID linked to this particular user which will be same

        // for each of his successful future authentication. FACEIO recommend 

        // that your rely on this Facial ID if you plan to uniquely identify 

        // all enrolled users on your backend for example.

        console.log("Linked facial Id: " + userData.facialId)

        // Grab the arbitrary data you have already linked (if any) to this particular user

        // during his enrollment via the payload parameter of the enroll() method.

        console.log("Payload: " + JSON.stringify(userData.payload)) // {"whoami": 123456, "email": "john.doe@example.com"} from the enroll() example above

    }).catch(errCode => {

        handleError(errCode)

    })

}


Authentication() returns a Promise whose implementation handler receives a userData object when the user has been successfully identified. The most important include payload, which is the arbitrary data you bound (if any) to that particular user when they registered via the payload parameter that the register() method takes, and the face ID, which is the unique identifier generic identity assigned to that particular user upon registration.

This face ID, along with the payload data, can act as a search key on your backend to retrieve data related to this particular user on each successful authentication, for example. The details of the userInfo object are documented in the Return Values section below. If the user denies the camera permission example, the promise will be rejected with the corresponding error code, such as fioErrCode.PERMISSION_REFUSED or fioErrCode.TERMS_NOT_ACCEPTED. Refer to the Error Codes section for a complete list of all possible error codes.

In summary, Faceio represents a significant leap in web application security. This facial recognition tool by PixLab simplifies user authentication with its seamless REST API, eliminating the need for expensive hardware and AI model training. With just a few lines of code, developers can implement passwordless authentication, enhancing both security and user experience. Faceio's biometric authentication empowers organizations and users to combat impersonation fraud, unauthorized access, and identity theft without the hassle of password management. By streamlining the onboarding of new users and validating existing ones, Faceio sets a new standard for web application security, offering robust protection against evolving cyber threats with a user-friendly approach.

API HTML Web application authentication security

Opinions expressed by DZone contributors are their own.

Related

  • API and Security: From IT to Cyber
  • How to Secure Your Angular Apps: End-to-End Encryption of API Calls
  • When APIs Go Wrong: Neglecting Rate Limiting
  • Secure Your API With JWT: Kong OpenID Connect

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!