Integrate Face Recognition in Your Web Application in 5 Minutes

Do we even need user authentication

It’s 2022 the Web is nothing like the Web 20 years ago. Keeping track of user data is a must and this is achieved through user authentication.

There are many ways to authenticate users one of which is using a username and password and storing users’ credentials in a database of your own which is no easy task to accomplish. Another way to do it is OAuth or simply using a third-party authentication provider like Google for example.

In this blog, I will be introducing you to Faceio’s face recognition authentication which is an amazing way to log in users to your systems as well I will be building a simple app to showcase the way to integrate this mind-blowing technology in a react application. So tighten your belts there will be plenty to cover.

Why facial recognition

The first reason that makes this technology so attractive for a business is the fact that AI-powered technologies in which facial recognition makes part, are just mind-blowing. My self I wouldn’t believe it works before making my own app that uses it. Just the fact that your website uses face recognition will make users want to visit your website and try your authentication system.

The second reason why you should consider face recognition is how easy it is to integrate this technology into your application. And to showcase this, we will be building a react application with FaceIO’s facial recognition from our mobile phones which seems to be unreal but this became possible with the fio.js library which takes all the heavy lifting for us we can easily use face recognition.

The third reason is simply that this authentication method is very user friendly so you don’t have to remember passwords or else although you can add two-layer user protection which is a pin in faceio’s case and also as a user you just have to let the camera scan your face and you’re done.

User security with face recognition authentication

From a user standpoint, it doesn’t matter how great your application is if your data isn’t secure. But facial recognition is a very secure way to authenticate your users. Why? Actually for many reasons.

First comes Faceio’s compliance with broadly applicable privacy laws such as the GDPR, CCPA, and other privacy standards. Such laws may charge businesses up to 4% of their annual revenues for violating their rules concerning users’ privacy. Also, FaceIO never stores your image it just stores a hashed key of the image so you’re photos are not getting anywhere you can know more about data security by clicking here https://faceio.net/trust-center.

In second place comes the high accuracy for which FaceIO is known. In fact FaceIO’s engine case, accuracy is 99.8% which is insane. Being someone who has been involved in the AI field before I can tell you that achieving such a rate is extremely hard and needs an insane amount of data which is very expensive.

Making a login system with FaceIO

We’ve talked enough and I know you’re not here to talk but to see things work so let’s go straight for the implementation.

The app will be simple, there will be 3 buttons one for registration, another one for login, and the third one to log out. The app works in a simple way you first register and then log in, at this point the logout button that was originally hidden shows up and the other buttons disappear. You can check the final version of what we’re going to build when clicking this link: https://housseinbadra.github.io/FaceIodemo.github.io/

First, you need to get your own FaceIO account if you don’t have an account it’s an easy thing to do, once you have an account login, I will be waiting for you to get ready. To signup with FACEIO click here: https://console.faceio.net/ .

Once done you’ll have a Public ID associated with your application that looks something like fio9362 . We’ll need this Public ID to connect with our application

So now since you’re done setting your account up it’s time to code. I told you that this app will be totally built on a mobile phone. All that we need is 3 files an index.html, an index.css, and an index.js file. So download any code editor or even go with code pen if you want to, I downloaded the SPCK editor which is a great tool. Once done create a folder and create these 3 files

Your file structure should look like this:

Now let’s start with the CSS, add these styles and you’ll be done with CSS

body{
  width:100vw;
  height:100vh;
  box-sizing:border-box;
  font-size:10vh !important;
}
.app{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

Now go to the HTML file. Add React, React Dom, and Babel CDNs to the head of your page then add bootstrap’s CSS-only CDN. Then add a link tag linked to your CSS file. Now add two div elements one with the id of root and one with the id of faceio-modal. Then add a script tag with the type=’text/babel’ to the end of your body and link it to your index.js file. And finally, add fio.js CDN to the end of your body and you’re done.

Your HTML file should look like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FaceIO demo</title>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href='./index.css'>
  
</head>

<body>
<div id='root'></div>
<div id="faceio-modal"></div> 
<script src="https://cdn.faceio.net/fio.js"></script>
<script src="index.js" type='text/babel'></script>
</body>

</html>

Now for the JavaScript file, because we have used CDNs we can access react and react Dom as well as faceIO as global variables. The bad thing about using this approach is that you can’t use import statements because we set the type of the index file to text/babel otherwise the code editor will not be able to deal with JSX.

But this project is quite easy so we don’t need to make a components folder but for a real-world project just go with npm create-react-app. So we will make use of object destructuring to do what we were supposed to do with imports. Then create an App component.

const {createRoot , render} = ReactDOM
const {useEffect,useState}=React

Now we need to keep track of users after login so we will create a state for this and to access faceio we will declare a constant io for that

 const [user,setuser]=React.useState('')
 const io=new faceIO('your public key')

Now create 3 helper functions:

Logout will set the user to an empty string, register which helps us enroll users in our application. When registering a user you can associate an id to your user, also every user enrolled will have his own id in faceIO databases. The code for the registration function is provided by fio.js API which you can find on the FaceIO website by clicking here https://faceio.net/integration-guide . You can adjust the function to match your needs.

 function logout(){
    setuser('')
    window.location='./'
  }
  function register(){
    io.enroll({ "locale": "auto", 
    "payload": { UID: Date.now() } }
    ).then(userInfo => {
    alert( `User Successfully Enrolled!
    Details: Unique Facial ID: ${userInfo.facialId}
    Enrollment Date: ${userInfo.timestamp}
    Gender: ${userInfo.details.gender}
    Age Approximation: ${userInfo.details.age}` );
   ;}).catch(errCode => {
   console.log(errCodr) })
  }

Now it’s time for the login function. The code for this function is provided by fio.js API and you can adjust it to match your needs. When a user logs in to my app I assigned the user state to the UID of the user to keep track of him. In a bigger app, we can set cookies and much more but for this demo I tried not to complicate things .To learn more about app management click here https://faceio.net/getting-started .

  function login(){
    io.authenticate({ "locale": "auto" })
    .then(userData => { console.log("Success, user identified") 
                        console.log("Linked facial Id: " + userData.facialId)
                        setuser(userData.payload.UID) })
    .catch(errCode => { console.log(errCode) })

The only thing left to do is to deal with the UI. We need to show the logout button when the user is logged in and the other 2 buttons when the user is not yet logged in. And that’s what this block of code does

  return(
    <div className='app'>
    {!user? <div><button type="button" className="btn btn-outline-primary m-5" onClick={register} >Register</button>
                 <button type="button" onClick={login} className="btn btn-outline-info m-5">Login</button></div> : 
                 <button type="button" onClick={logout} className="btn btn-outline-primary">Logout</button>}
            </div>)

And finally, render the app component to the view. We are using react18, so we will create a root variable and set its value to the div element with ID root. Then we will render the app component.

const root = createRoot( document.getElementById('root')); 
root.render(<App/>);

And now we’re done coding and it’s time to host this project on GitHub. Simply create a GitHub repository and set its name to myfacerecognition.github.io. After that upload the files to GitHub and wait 5 minutes till your site is created. And we’re done.

Conclusion:

Face recognition is a great way to authenticate your users in 2022. It still needs a little improvement and that’s what’s going to happen, AI technologies are growing at an exponential rate and that will be reflected in face recognition. Hopefully, this article was helpful in some way, and thank you if you keeping up till this point.

In case you’re willing to know more about me visit: https://houssein.in/.

To know more about FACEIO visit : https://faceio.net/