What is face recognition  and how does it work?

To prevent the use of digital identities for criminal purposes, facial recognition has become a widespread tool in many countries. The demand for facial recognition software is increasing every year, with the market expecting to grow by $7.7 billion by 2022, and a large portion of its current use is to identify and authenticate users.

Many people are becoming increasingly familiar with facial recognition technology due to unlocking features in new phones requiring face ID. In this use case, facial recognition is used to determine that the individual is the owner of the device and authorize access to the phone.

Facial recognition is a technology that can match a human face from a digital image or video, against a database of stored faces. Facial recognition generally uses biometrics to help identify facial features. This type of identification is helpful for various commercial and law enforcement applications. When it comes to digital authentication, facial recognition falls under the category of biometrics.

The Purpose of Face Recognition Technology

The main objective of facial recognition is to identify individuals, whether individually or collectively. The number of false positives can vary, depending on the technology used for facial recognition. The best face identification algorithm has an error rate of 0.08%. Facial recognition systems that operate with  liveness detection, have higher rates of accuracy.

There are various benefits of facial recognition, depending on the industry and application. It can be a convenient, safe, and hassle-free method to identify a person at a distance without any physical contact. Facial recognition, when used correctly, has led to increased security functions, decreased instances of crime, faster processing, and greater convenience for the public.

Applications of Face Authentication Technology

There are various applications of face authentication technology for law enforcement and other commercial ventures. Law enforcement agencies in the U.S and globally are beginning to rely on facial recognition to find suspected criminals by adding mugshots and other photos to their database. Once added to the database, the facial images are scanned whenever the police department carries out a criminal search.

Mobile face recognition has also enabled officers to use smartphones and other portable smart devices to take a photo of a driver or pedestrians and compare it to face recognition databases to identify individuals accurately.

In airports, border control security now uses facial recognition in conjunction with biometric passports. It enables commuters to skip the regular long lines in favor of a quicker automated gate that uses facial recognition to match the traveler with their passport image.

Online banking has also received a substantial boost thanks to biometric functions, specifically facial authentication. Customers can opt to authorize transactions simply by looking at their phones or laptops instead of accepting and manually entering a one-time password (OTP) on their devices.

Facial recognition is also used for entertainment purposes. Snapchat, Instagram and other social media platforms recognize faces and make fun and creative filters for people to enjoy. It has led to widespread usage of specially created filters that detect your facial features and adapt accordingly.

Facial Recognition Technology and Mobile Security

The integration of facial recognition technology with mobile security has been advantageous to consumers and mobile companies alike. Many people store critical information on their phones, and criminals can easily steal and hack the phones to gain this information.

With the introduction of facial recognition technology, many phone manufacturers are making face IDs a method of identification for users to access their phones. It ensures the protection of personal data and ensures that sensitive data is inaccessible to those with malicious intent.

Apple is considered a pioneer in facial recognition for smartphones. It enabled its users to unlock their phones using Face ID and access specific locked apps, and even pay for various services just by scanning their face with the phone front camera.

Snapchat, another phone app, has also utilized facial recognition to make fun and creative filters for people to enjoy. It has led to widespread usage of specially created filters that detect your facial features and adapt accordingly.

One of the most widespread uses of Face Authentication is to authenticate users to their own devices. In this case “face matching” and “liveness detection” are performed locally on the handset. Another emerging usage model is to perform Face Authentication on the server. This means that the biometric templates are stored on the server and the face matching operation is done on the server. This is mostly true in industries that require KYC (Know Your Customer) law and regulations. Some banks and financial institutions need to confirm the identity of the user directly through the face image stored on the server and not through the usage of their phone.

Facial recognition has led to a widespread evolution in many of our daily errands and activities. It has the potential to ultimately evolve the way we conduct transactions and other security activities in the future.  As phone manufacturers continue to tweak and bring out new changes using facial authentication, people will be able to carry out a host of activities with their faces as the only component needed for authentication.

HOW TO AUTHENTICATE A USER THROUGH FACE RECOGNITION

Authentication is a very crucial aspect of your web application. If you are offering a service or selling some product to the user, you should keep track of the user for future reference. All these can be only possible if you have an authentication system in place.

But using the right tool for the job is also very necessary. In past, email password-based authentication was most popular and widely used. But with time, a new concept called OAuth is introduced when big techs are popping out with a huge user base. Where you as an owner of the site trust the OAuth provider to authenticate a user. In return, the OAuth provider gives you details of the user.

OAuth-based authentication is simple for the user. They only have to maintain one account with an OAuth provider and use this account to log in to all other websites. But there is always trust involved in the OAuth process.

After some time, passwordless authentication comes into the picture. In this process, when you enter the username or your email, they mail you a link. If you paste the link into the browser, you are automatically authenticated and logged .

With the advancement of Artificial Intelligence (AI) and machine learning (ML), facial recognition techniques gain huge popularity. With time, as the datasets grow bigger, the accuracy of an AI model also increases. Nowadays, we can also use facial recognition techniques, to authenticate users in our web application.

In this article, we are building a simple application, to demonstrate how to authenticate a user using facial recognition. In this process, we are going to use Face ID APis Go to their website and access an API key to follow along.

Why we need facial recognition-based authentication

The need for facial recognition is multifold. I am trying to put up some points here in a concise way. Make sure to read the article to the end to get a complete concept and a detailed implementation walkthrough.

1. Faster than traditional methods: Facial authentication method is very fast than the traditional means of authentication. You just have to click on a button to start the authentication process and within a millisecond, it is done. In the traditional email password-based methods, you have to add your details line by line. Sometimes after successful log-in, you are greeted with a captcha. How irritating this is.
2. Don’t require specialized hardware: The only requirement of the Facial authentication technique is a camera. All smartphones nowadays have a camera by default. All desktops also have some sort of webcams present. Therefore, users don’t need any specialized hardware to use this service.
3. Reduce impersonation on social platforms: The most important feature of facial authentication is that it can prevent impersonation. On social platforms, many people create fake accounts by impersonating someone. This can be very risky if the fake account holder commits some type of digital crime. With the help of facial recognition, social platforms can recognize if the account someone trying to create are belongs to them.
4. Reduce bots and automated scripts: Bots and automated scripts are introduced to help people get rid of repetitive tasks. But people used them in a different way to spam others. Daily you come across many bots and automated scripts in your digital life that you don’t even notice or realize. To prevent this, some websites use captcha. Using facial recognition, this problem can also be solved as bots have no face to authenticate .
5. Privacy focused: Privacy is a very sensitive topic for all of us. We all become a little bit concerned when someone asks you to authenticate using your face data. But as we are using FaceIO in this tutorial, the authentication process is purely end-to-end encrypted. In the backend, they store only the hash of your facial features. They are completely GDPR and CCPA compliant. So, you can trust them to store your data safely.

Make a facial authentication project

Now we are going to make a facial authentication web application. This project includes all the bits and pieces and all you need to know about how to implement face recognition-based authentication in your web application.

I am explaining the process step-by-step.  Make sure to obtain a free  API Key to follow along.

Installing the required dependency

Create a blank directory and inside make a index.html file. You can also add a separate CSS file, but for the sake of simplicity, I keep it to the bare minimum.

If you are using VSCode for development, you can use live-server to serve your static files.

Inside your index.html, add this basic HTML markup, to begin with.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

FaceIO provides a very handy javascript library to interact with their AI models. This makes our life so easier that, we can implement the facial recognition feature using only a few lines of code. To add the FaceIO javascript library, we use their CDN(content delivery network) inside the body tag of our HTML document.

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

Now, create a file index.js and link the file inside the body tag after FaceIO CDN.

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

Now let’s create 2 helper functions to ease our development process. One is for enrolling a user (like the sign-up feature) and the other is for authentication (like the log-in feature).

Enrolling a user

Enrolling a user is very simple because of the javascript library FaceIO provides. Inside the HTML markup add a button with id="enroll". We access this button inside our javascript file using the getElementbyID method.

Now initialize the FaceIO object inside index.js. You have to add the public ID of your FaceIO project. You can get the public ID listed in your project dashboard.

const faceio = new faceIO("<Your Public ID here");

Let’s add an event listener in the enroll button. When someone clicks the button, we execute the enroll method of the faceIO object. This enrollment method takes a variety of optional parameters.

1. locale is the local language of the user.
2. permissions timeout corresponds to the number of seconds to wait for the user to grant access to the camera.
3. termsTimeout is the number of seconds to wait for the user to accept the terms and conditions of FaceIO.
4. idleTimeout is the total number of seconds to wait while trying to recognize a face.
5. replyTimeout is the number of seconds to wait to receive processed facial data from the FaceIO node.
6. userConcent is a boolean that represents if users give consent to scan their faces. If you have already taken consent from the user then you can set the value to true.
7. payload: Inside the enroll function you can add a payload of your choice. Payload should be a key value object. You can use this payload feature to attach email or any other information related to the user.

In our case, the enroll function looks like this.

enroll.addEventListener("click", async () => {
  let response = await faceio.enroll({
    locale: "auto",
    payload: {
      email: "example@gmail.com",
      pin: "12345",
    },
  });

  console.log(` Unique Facial ID: ${response.facialId}
  Enrollment Date: ${response.timestamp}
  Gender: ${response.details.gender}
  Age Approximation: ${response.details.age}`);
});

When you run this function, A popup appears in front of the user. This popup contains terms and conditions. If the user accepts the terms and conditions, it asks for camera access. If the user grants the camera access, FaceIO will scan the face.

FaceIO model looks for unique facial features that distinguish the user from others. Once completed, You have to add a PIN which is attached with your facial data. This PIN is very important for the user and keeps it in a safer place.

When all these steps are completed, FaceIO returned a userInfo object to the user. This object contains a user face ID which is a universally unique identifier, their gender, and their age. Gender and age are not very accurate, as they are predicted by an AI model.

You can use store this faceID in your backend. When a user wants to log in, you can match this faceID to authenticate the user.

During the workflow, if any error occurs, FaceIO has an extensive list of error messages. If the user doesn’t allow the camera access then the fioErrCode.PERMISSION_REFUSED error is thrown. If the user doesn’t accept the terms and conditions popup then the fioErrCode.TERMS_NOT_ACCEPTED error is thrown by the server..

Authenticating a user

To initiate the authentication flow, add a button in your HTML markup with id="authenticate". Access this button inside index.js with the help of the getElementbyID method.

Now when the user presses this button, we initiate the authentication flow. The authentication function is very simple.

Authenticate function take permissionTimeout,idleTimeout,replyTimeout, and locale parameter like the previous enroll() function. The code looks something like this.

authenticate.addEventListener("click", async () => {
  let response = await faceio.authenticate({
    locale: "auto",
  });

  console.log(` Unique Facial ID: ${response.facialId}
      PayLoad: ${response.payload}
      `);
});

When the user presses the authentication button, a similar screen popup like in the case of enrolling function. It takes your camera access and scans your face. Once scanned, it asks for the PIN that you have entered during the enrollment time.

If you provide the correct pin, FaceIO returned the FaceData and the payload you have specified in the enrollment process.

You can also double-check the authentication flow by matching the faceID in your server.

Now our authentication flow is completed. You can see it is easier than implementing an email password auth flow. All the heavy-lifting is done by the FaceIO server and its AI model, as a developer, you only have to add the application logic to modify the authentication flow and its experience.

Privacy features

FaceIO has a robust privacy protection system. Let me list down some of them.

1. It is GDPR and CCPA compliant: FaceIO service is completely GDPR and CCPA compliant. GDPR stands for General Data Protection Regulations. It is adopted in 2018 and it requires all businesses to protect the personal data and privacy of the user.

   CCPA stands for California Consumer Protection Act gives more control to the user over their data. If you are operating in those regions, you don’t have to worry.

2. It stores only hashes: FaceIO only store hashes of your facial features. It doesn’t store any plain data and stores as minimum information as possible. The client-side library and widgets don’t handle any biometrics data. All the process is done at the backend..

Drop your comment