Will facial auth replace traditional web authentication system
Facial authentication is not a very new technology. But the rapid growth of facial recognition-based authentication systems in smartphones genuinely raises a question in your mind. Can we use facial recognition tech to authenticate a user in web applications?
Quick history of web authentication system
In the beginning, the internet was just a connection between some computers in different universities and web pages are just static content. At that time web authentication is a distant dream for web admins.
As technology progresses, the internet and computers become more mainstream and affordable for regular households. With the debut of web2.0, now users can able post content on websites. This is where the need for user authentication comes into the picture.
A combination of email and password is the most common authentication system on the web. But remembering different passwords for different websites is very repetitive and cumbersome.
Therefore, web developers start using Open Authorization(oAuth) technology in the user authentication flow. OAuth removes the password-remembering step and instead gives a unique token to the developer to identify the user. In this process, some big OAuth providers like google, apple, and GitHub take the responsibility to identify the user.
But this is too much trust in the OAuth providers. Recently, email-based authentication become very popular. Here the developer sends you a one-time password (OTP) through the email he provided and the user can authenticate themselves using that unique OTP.
Here in this blog, I am not discussing all the web authentication techniques. The aforementioned techniques are some of the very popular techniques you can see on almost every website.
Rise of Facial authentication system
With the advancement of computer hardware, nowadays any desktop, laptop, or smartphone can calculate complex problems efficiently. Machine learning is one of those areas where we need an ample amount of computational power to train ML models.
Technology comes too far these days. Now an optimized machine-learning model can recognize your face in seconds. These days facial recognition systems become so accurate that smartphones implement this tech to unlock devices.
But the use of facial recognition-based authentication for web apps is still in its early days. I think the main hurdle is the hardware itself. let’s discuss briefly in this topic.
The hardware problem
Web browsers run on any internet device you can imagine. It runs on a few dollars raspberry pi to your thousand-dollar workstation. Face recognition tech needs a camera to scan the user’s face. But here the real problem starts.
Camera in desktops, laptops, or smartphones varies a lot in terms of resolution, brightness, or other environmental variables. Taking a homogeneous image from every camera to run the machine learning model through it is very complex. “Inconsistent” is a fair word for this problem.
For a crucial task like authentication, constancy is the only way to make a developer use facial authentication in their web app. If the ML model suffers to recognize a user in different conditions or different hardware, then it adds a lot of friction to the user.
A developer or a website owner wants to make the website as friction-less as possible for the end user. This type of inconsistency hurt the massive adoption of facial recognition-based authentication for the web platform.
A ray of hope
After all these backlashes because of hardware constraints, a new ray of hope can be seen for facial authentication systems. A new SaaS called FaceIO provides a single face authentication library that supports any platform browser supports.
FaceIO needs only camera hardware to recognize and authenticate a user. As smartphones and laptops come with built-in cameras and desktops have also webcams for this remote native era, I think this is a great time to re-introduce facial recognition-based authentication to the masses.
Now the normal question that comes to your mind is, is there any alternative to FaceIO? The answer is yes. You can easily make a face recognition library using OpenCV. But in addition to this, you should also handle the back-end data processing and secure storage of data you have acquired from the user’s face.
If you are just beginning and not a multi-million dollar startup, you should avoid such type of capital expenditure and use some third-party service like FaceIO to handle all the heavy work for you.
In this blog, I will also demonstrate how to add the FaceIO library to your web application. But before this, let’s see some of the benefits of adding face authentication to your web application.
Benefits of adding facial authentication
- Improved User Experience: Facial authentication is easy to use and requires minimal effort from the user. This can help reduce the amount of time it takes for a user to log in to the application, resulting in a more enjoyable user experience.
- Reduce impersonation: Nowadays, fake impersonation can be seen in the web very often than usual. Face recognition can easily curb this issue. As the face is identified at the sign-up, no user can make more than one account of themselves. It also reduces the fake bot problem on social sites.
- Increased Security: Facial authentication can provide an additional layer of security to your web application, making it more difficult for unauthorized users to gain access. This can help protect sensitive data and prevent potential data breaches.
- Reduced Cost: Facial authentication is usually less expensive to implement than other forms of authentication, such as passwords or two-factor authentication. This can help reduce the overall cost of the application development.
Add FaceIO to your website
FaceIO provides its javascript library in 2 formats. Either you can add their CDN inside the <body> element of your website, or you can install their NPM library. In this blog, I will demonstrate both methods so that you can choose your preferred one.
Installing FaceIO library
To add the FaceIO CDN to your website, open the HTML page (eg: index.html, login.html, etc) and add the following line of code inside the <body> element.
<body>
<script src="https://cdn.faceio.net/fio.js"></script>
</body>If you don’t add a CDN and want to bundle the faceIO library in your application code, you can also install their package from NPM.
npm i @faceio/fiojsInstantiating FaceIO on your website
First import FaceIO library in your javascript code.
import faceIO from '@faceio/fiojs'Then instantiate the FaceIO object with your public ID. To get a FaceIO public ID, first, you have to sign-up for a free FaceIO trial. In the dashboard section, you will get your unique public ID.
const faceio = new faceIO('public-id')If you are using ReactJS, you have to wrap the FaceIO object inside an useEffect hook.
import { useEffect } from "react";
function App(){
let faceio;
useEffect(() => {
faceio = new faceIO("public-id");
}, []);
}Now make 2 buttons in your HTML document. One is for new sign-ups and another is for log-in authentication.
<button>Sign-in</button>
<button>Log-in</button>Here I also define 2 javascript functions for handling all the FaceIO authentication flow. One is for the sign-in button and another is for the log-in button.
<button onclick="handleSignIn">Sign-in</button>
<button onclick="handleLogIn">Log-in</button>Handling User sign-in
To sign in as a new user, FaceIO provides an enroll function. This function takes an additional payload which is attached to the face ID for further verification.
const handleSignIn = async () => {
try {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "yourEmailAddress@gmail.com",
pin: "123456",
},
});
} catch (error) {
console.log(error);
}
};In the above code block, I am adding an email and pin as a payload. When the enroll function is executed, FaceIO requests access to your camera and verifies your face.
In addition to this, faceIO also recognizes your gender and approximate age. FaceIO returns all these data with the faceID to the client. Let’s log the response to see what’s inside.
const handleSignIn = async () => {
try {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "yourEmailAddress@gmail.com",
pin: "123456",
},
});
console.log(`Facial ID: ${response.facialId}
Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
} catch (error) {
console.log(error);
}
};
Now you can store this data in your database for future use. FaceIO also provides a REST API that talks directly with your back-end. We will discuss that in the later part of this blog.
Handle user log-in
After a successful sign-in, now is the time to log in to an existing user using face verification. For this purpose, FaceIO provides the authenticate function. This function returns the payload we have initially attached to the enroll function with the faceID of the user.
const handleLogIn = async () => {
try {
let response = await faceio.authenticate({
locale: "auto",
});
console.log(` Unique Facial ID: ${response.facialId}
PayLoad: ${response.payload}
`);
} catch (error) {
console.log(error);
}
};When the authenticate function is invoked, faceIO accesses the user’s webcam and makes a quick scan of the user’s face for authentication.
Restart FaceIO session
When you execute the enroll or authenticate function in your web application, a new session is generated by FaceIO. These sessions are immutable for a user.
But if you want a re-authenticate a user, first you have to purge the current session and request a new one. FaceIO provides the restartSession function for this sole purpose.
const restartSession = async () =>{
try{
let response = await faceio.restartSession({})
console.log(response)
} catch (error){
console.log(error)
}
}If the new session is created, this function returns true and becomes ready for another round of calls to enroll or authenticate function. If the request is declined, the false is returned from the function.
More on FaceIO
Here In this article, I have just touched the surface of what you can do with FaceIO. For more information, please check out their documentation.
Do you remember previously I talked about you can also make a face recognition system by yourself? This is an end-to-end tutorial on how to do real-time face recognition using openCV.
Webhooks and REST APIs
A webhook is an HTTP-based callback function that allows lightweight, event-driven communication between 2 servers. FaceIO emits webhooks on 3 events. Enroll, Auth, and Deletion.
Enroll event is fired after successful user enrollment. Auth event is fired after successful user authentication while the deletion event is fired after successful FaceIO ID deletion.
FaceIO webhooks are HTTP POST requests. The body of the request contains a JSON payload. You can authenticate the request in your server by verifying the WWW-Authenticate-Header.
The JSON payload of the webhook has a definite schema. Let’s see a demo FaceIO webhook example.
{
"eventName":"ENROLL",
"facialId": "User face ID",
"appId": "Application Public ID",
"clientIp": "Public IP Address",
"payload": "Data you linked while enrolling the user",
"details": {
"timestamp": "Event Timestamp",
"gender": "Gender of the Enrolled User",
"age": "Age of the Enrolled User"
}
}These webhooks are very important to sync the user data with your back-end application.
FaceIO REST API
In addition to webhooks, FaceIO also provides REST APIs to programmatically work with your FaceIO dashboard. With the help of the REST API, you can delete a faceID. In addition to this, you can also check the validity of a faceID, related statistics, and the status of the FaceIO service.
Deletion of a FaceID is the most useful feature of FaceID REST API. You have to make a get request to https://api.faceio.net/deletefacialid endpoint with your API key and the faceID.
On successful deletion of the faceID, the response contains a boolean type payload set to true. Let’s see a code example to understand better.
const deleteFaceID=async ()=>{
const response = await fetch("https://api.faceio.net/deletefacialid?fid='USER_FACE_ID'&key='FACEIO_API_KEY'",)
const formattedResponse= await response.json()
if (formattedResponse.status!= 200){
print("Successfully deleted the face")
}
}Conclusion
Facial authentication is a biometric authentication system that uses facial recognition technology to identify users. It is used as an additional layer of security for digital platforms, such as web applications. It requires users to take a picture of their face or use a per-existing picture to verify their identity.
In addition, the authentication system will also consider other factors such as the user’s age, gender, and other physical features. This system is becoming increasingly popular, as it is more secure than traditional authentication systems.
In this blog, we have seen how to implement a Face authentication system using FaceIO. If you are interested, you can sign-up for a free trial with FaceIO. If you have any doubts, you can ask me on Twitter or visit my website.
