Integrate facial recognition into your web application in 5 minutes

Do we even need user authentication

We are in 2022, the Web has nothing to do with the Web of 20 years ago. User data tracking is a must and this is achieved through user authentication.

There are many ways to authenticate users, one of which is to use a username and password and store user credentials in your own database, which is not not an easy task to accomplish. Another way to do this is to use OAuth or just use a third party authentication provider like Google for example.

In this blog, I will introduce you to Faceio’s facial recognition authentication which is an amazing way to connect users to your systems. I will also create a simple app to show how to integrate this amazing technology into a reaction app. 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-based technologies, in which facial recognition is a part, are simply breathtaking. Myself, I wouldn’t believe it works until I build my own app that uses it. The simple fact that your website uses facial recognition will entice users to visit your website and try your authentication system.

The second reason you should consider facial recognition is how easy it is to integrate this technology into your application. And to illustrate this, we are going to create a react application with face recognition of FaceIO from our mobile phones, which seems unreal, but it became possible with the fio.js library which takes all the heavy work for us, we can easily use facial recognition.

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

User security with facial recognition authentication

From a user’s perspective, it doesn’t matter how good your app is if your data isn’t secure. But facial recognition is a very secure way to authenticate your users. Why? In fact for several reasons.

First comes Faceio’s compliance with broadly applicable privacy laws such as GDPR, CCPA, and other privacy standards. These laws can charge companies up to 4% of their annual revenue for violating their rules regarding user privacy. Also, FaceIO never stores your image, it just stores a hash key of the image so your photos don’t go anywhere. You can learn more about data security by clicking here https://faceio.net/trust-center.

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

Make 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 get straight to the implementation.

The application will be simple, there will be 3 buttons one for registration, another for login and the third for logout. The app works in a simple way, you register first and then you log in, at this point the logout button which was initially hidden appears and the other buttons disappear. You can check the final version of what we are going to build by clicking on 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, I will be waiting for you to prepare. To register with FACEIO, click here: https://console.faceio.net/ .

Once done, you will have a public id associated with your app that looks something like fio9362 . We will need this public ID to login to our application

So now that you’re done setting up your account, it’s time to code. I told you that this application will be fully built on a mobile phone. All we need is 3 files an index.html, an index.css and an index.js file. So download any code editor or even use a code pen if you want, I downloaded 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 the 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 the React, React Dom, and Babel CDNs to your page header, then add the bootstrap CSS-only CDN. Then add a linked link tag to your CSS file. Now add two div elements, one with the id of root and the other with the id of faceio-modal. Then add a script tag with type=’text/babel’ at 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:





  
  
  FaceIO demo
  
  
  
  

  



Now for the JavaScript file, because we used CDNs, we can access react and react Dom as well as faceIO as global variables. The downside of this approach is that you can’t use import statements because we’re setting the index file type to text/babel, otherwise the code editor won’t be able to handle JSX.

But this project is quite simple so we don’t need to create component folder but for real project just use npm create-react-app. So we’ll use object destructuring to do what we were supposed to do with the 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 that 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:

Logging out will set the user to an empty string, register which helps us enroll users into our application. When registering a user, you can associate an identifier with your user. In addition, each registered user will have their own identifier in the faceIO databases. The code for the recording function is provided by the fio.js API which you can find on the FaceIO website by clicking here https://faceio.net/integration-guide. You can adjust the function according to 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 the fio.js API and you can adjust it according to your needs. When a user logs into my app, I assigned the user state to the user’s UID to track it. In a larger application we can set cookies and much more, but for this demo I tried not to complicate things. To learn more about managing apps, 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 take care of the user interface. 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(
    
{!user?
: }
)

And finally, render the application component in the view. We’re using react18, so we’ll create a root variable and set its value to the div element with the root id. Next, we will render the application component.

const root = createRoot( document.getElementById('root')); 
root.render();

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

Conclusion:

Facial recognition is a great way to authenticate your users in 2022. It still needs a little improvement and it is going to happen, AI technologies are developing at an exponential rate and that will be reflected in facial recognition . I hope this article was helpful in some way, and thank you if you continue to this point.

If you want to know more about me, visit: https://houssein.in/.

To learn more about FACEIO, visit: https://faceio.net/

LOADING
. . . comments & After!

Comments are closed.