Nowadays the Web has become a platform where you can run all kinds of applications from e-learning, financial services, booking websites, and anything you could imagine.
Because of that authenticating users on the web is a must. Actually, there are many ways to authenticate users one of which is using traditional email and password authentication. Another way to do this is simply using a third-party authentication provider like Facebook for example.
But thanks to artificial intelligence facial recognition has become possible and It can be used on the Web with vanilla JavaScript or any modern Web framework. In this blog, I will be introducing you to Faceio’s Facial recognition authentication which is an amazing way to log in users to your system as well we will be building a simple app to showcase the way to integrate this mind-blowing technology in a vue.js application. So be ready, there will be a lot to cover.
Do We Even Need Face Recognition?
First, you should consider face recognition for your project because AI-powered technologies are still mysterious, making them more attractive. In fact, I wouldn’t believe face recognition exists before making my own application that uses it. Just the fact that your website uses face recognition will make users want to visit your website to try out this new technology.
The second place, face recognition is easy to integrate into your application. And to showcase this, we will be building a vue.js application with FaceIO’s facial recognition using the fio.js
library which takes all the heavy lifting for us so we can easily use face recognition.
Finally, this technology makes user’s life much easier so they don’t have to remember passwords, or else we can add another layer of verification for user protection which can be a pin which is the case with FaceIO. So you as a user just have to let the camera scan your face and you’re authenticated.
The First Question That Will Come To Your Mind Is, Is It Secure?
This era is known as the big data era, so companies consider data as a treasure, so they will try their best to protect their customer’s data at any cost.
Also from a user standpoint having his data secure is something expected from companies he consumes their products. Also authenticating users is an extremely important feature of any web app. So security is a critical factor Also FaceIO is one of the most secure ways to authenticate your users. Why? Actually for many reasons which I will be naming a few :
The first reason is 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.
The second one is the high accuracy of the model which FaceIO uses which scores almost 100% in the accuracy metrics which is an insane number that requires an insane amount of high-quality data that costs lots of money.
Making a Registration App With FaceIO
We’ve talked enough and now it’s time to build our simple application. The UI is very simple, typically 3 buttons one for signing in another one for registering, and one for logout.
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 and the other two will disappear. This is what the project will look like after we’re done :
First, you need to register on the FaceIO website if you don’t have an account it’s an easy thing to do, I’ll be waiting for you to sign in so we can continue building this app. 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. Click here to create your own account.
So first we need to set up a vue.js project. You need first to create a folder then use a command shell to navigate to the folder location and run the command shown below.
vue create faceRecognition
Now let’s add fio.js to our project. Now go to the HTML file and add a div with the id faceio-modal
and the fio.js
CDN to the end of the body:
<div class="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
const faceio = new faceIO('Your app id goes here')
window.faceio=faceio
</script>
Another way to approach this is assigning window.faceio
to the FaceIO object and then creating an instance in the Vue.js JavaScript code while storing the app id in a .env
file.
Now going to the App.vue
file update the HelloWorld component to be an AuthenticationComponent
and add the CSS code below. The App.vue
component should look like this :
” data-lang=”script/x-vue”>
<template>
<div class="app">
<AuthenticationComponent />
</div>
</template>
<script>
import AuthenticationComponent from './components/Authentication.vue'
export default {
name: 'App',
components: {
AuthenticationComponent
}
}
</script>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh
}
</style>
Now going to the Authentication.vue
file that was previously the HelloWorld
component, we will first start with clearing the template, then adding three buttons one for login, another one for registering, and one for logout. We need to create a user state a set its value to an empty string.
Now using the v-if
attribute we can make the login and registration buttons show only where the user is not set and the logout button only show when the user is logged in also we will add for each button its corresponding click event. We will be creating these 3 functions in a minute. The template will look as shown below, I added very basic CSS nothing crazy :