The most essential part being a dev is learning continuously. It is important to stay updated with the latest tech around. Lately, AI (Artificial Intelligence) has advanced rapidly and is destined to bring a revolution.
One of the latest development in the field is FaceAuth. At the present day, it has become much easier to take one look at the phone and open it within a matter of milliseconds. Today, we will learn how to implement this in a webapp.
We will use API provided by FaceIO to implement FaceAuth in our webapp!
Why FaceIO?
After doing much research, I decided to go with FaceIO. It provides a simple API and can be integrated within minutes. It provides a library, fio.js which uses simple calls and methods to quickly setup authentication for your platform. The best part is gives extremely results without the requirement of superior cameras or sensors. Also, you can easily integrate your webapp easily with whatever framework or tech you love to work with. ( eg. React, Vue, Python and more )
Let's look at a few reasons why I liked FaceIO:
- Ease of Access : FaceAuth gives you easy access to your favourite apps. I hate going to my password manager apps to look for passwords each time I don't remember it. Why go to a password manager when I can authenticate by simply looking at my screen.
- User Experience : As a developer our foremost mission is to make life easier for the world. With FaceAuth, a new user can practically register within seconds and it also removes hassle of remembering passwords.
- Low Cost : Face unlock is now a common feature in mobile devices but they are backed by superior cameras and sensors. With the help of AI, one does not need super cutting edge technology to implement the same in devices such as laptops or low end webcams.
- Lightweight Library : It is really lightweight to add these features. For example, we can setup FaceAuth with fioJs (library by FaceIO) and keep it up and running with a few lines of code.
The Tutorial
We will be using Vanilla HTML and JS to implement FaceAuth today by making a very simple webapp.
Firstly, you need to create your public FaceIO API key.
Steps to generate your API Key
- Firstly, visit the console.
- Create a new FaceIO application.
- Follow with the FaceIO Application Wizard.The Application Wizard will automate and simplify the process down to a few clicks. You will have to choose an application name for your app, select a facial recognition engine, cloud storage region out of the given options, reviewing security options, customizing the Widget layout and more. You now have to save your public API key.
Integrating the library
We'll be following through the integration guide provided by FaceIO. You can find it here.
Since I'm using VS Code as my IDE, I'll be using Live Server extension to host my website locally.
We are gonna use the below boilerplate to start our project.
<!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>
We are going to now make a simple UI. We'll use a one heading , two button template to setup this basic project. The first button would be used to register a new user, while the second button will be used to implement authentication. We would also be adding some CSS to center the content and make it look uniform across the webpage.
CSS
<style>
.container {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 18px;
}
</style>
HTML
<div class="container">
<h1>FaceAuth WebApp</h1>
<br />
<button title="Register a new user on the FaceIO Application">
Register User
</button>
<button
title="Authenticates a user already registered on the running FaceIO applicaiton"
>
Authenticate User
</button>
</div>
Now, we need to import the fio.js library provided by FaceIO. This is the power of the engine that lets us implement FaceAuth within a matter of minutes. You can learn more about instantiating the fio object here.
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
Everything is now setup, at least visually. Now, to make the buttons actually working and to implement the registration and authentication, we will have to first instantiate a FaceIO object.
<script type="text/javascript">
const faceio = new faceIO("app-public-id"); // enter your public id
</script>
We will now create two functions and associate them to the buttons.
The first function will be the register function, this function will be implemented to register new users. To do this, we would now use the enroll method provided by fio.
function registerUser() {
faceio
.enroll({
locale: "auto", // Default user locale
userConsent: true, // True if user consent collected
payload: {
id: 13795, // dummy id used for demo
email: "example@example.com", // dummy email for demo
},
})
.then((userInfo) => {
// User Successfully Enrolled!
console.log(userInfo);
})
.catch((errCode) => {
console.log(errCode);
});
}
We can pass a bunch of options in our parameters. Explore more about the parameters here.
- payload : This is the essential information you would wish to pass. This includes information such as email, id, name, etc.
-
locale : This decides the language for register/sign-in popup. By default, it has a value
autowhich deduces the language for you. But you can assign a value yourself if you require to. - userConsent : FaceIO ensures that users are compliant with their policies. So you can enabling accept their terms and services while signing up with fio, if not mentioned explicitly on your website.
- enrollIntroTimeout : The time in seconds for a user to register or enroll.
We now need to link this function to register button.
onclick="registerUser()"
The second function will be the authenticate function, this function will be implemented to authenticated existing users. To do this, we would now use the authenticate method provided by fio library.
function authenticateUser() {
faceio
.authenticate({
locale: "auto", // Default user locale
})
.then((userData) => {
console.log("Success, user recognized");
// faceio generates unique faceid for each user
console.log("Linked facial Id: " + userData.facialId);
console.log(
"Associated Payload: " + JSON.stringify(userData.payload)
);
})
.catch((errCode) => {
console.log(errCode);
});
}
We now need to link this function to authenticate button.
onclick="authenticateUser()"
And we are finished making our first FaceAuth webapp with the help of FaceIO's library fiojs. Feel free to check out the HTML boilerplate provided by FaceIO to kickstart your integration.
Some Links to Get Started
If you wish to further build and create something interesting out of the project we made, you can check out the below links!
Getting Started Tutorial: Learn the fundamentals. Your first steps with FACEIO.
Integration Guide: Learn how to implement fio.js, the facial recognition library on your website before rolling facial authentication to your audience.
Developer Center: It contains code samples, documentation, support channels, and all the resources you need to implement FACEIO on your website.
Frequently Asked Questions: Get answers to all your general queries when starting out.
Trust Center: Learn how FaceIO handles your data securely and in compliance with privacy and legal requirements.
Implement Facial Authentication on your Vue.js App: Learn how to implement faceIO with a framework like VueJS.
Conclusion
We have successfully implemented FaceAuth on our simple webapp. As consumers are prioritizing convenience and security over everything, as developers it is much important for us to stay updated with consumers needs and technological advancements. As AI is taking a big leap, jumping with it is the best option. If you have any question or made something interesting from today's discussion you can reach me out on twitter. In the next part, we will further build on our webapp and investigate more features.
Top comments (0)