This content originally appeared on Level Up Coding - Medium and was authored by Ahmed Qureshi
Do we even need user authentication?
In 2022, the World Wide Web has undergone significant changes from what it was 20 years ago. It has become imperative for websites and applications to keep track of user data, and this is typically done through user authentication. There are various methods of authenticating users, such as the traditional approach of using a username and password and storing user credentials in a database, which can be a complex and challenging task.
Another method of authentication is through OAuth or using a third-party authentication provider like Google. However, in this article, I will be introducing you to a cutting-edge authentication technology called FaceIO face recognition authentication. This innovative approach is an excellent way to log in users into your systems, and I will be demonstrating how to integrate this technology into a React application through the development of a simple app.
By utilizing this impressive technology, we can provide our users with an easy and secure way to access our web applications without the need for traditional login credentials. So fasten your seatbelts, as we dive into the world of face recognition authentication and explore its potential in enhancing the user experience on the web.
Why facial recognition?
One of the primary reasons that make facial recognition technology so appealing for businesses is the sheer awe-inspiring capabilities of AI-powered technologies that it is a part of. I was even skeptical of its efficacy until I developed an app that incorporated it. Just the fact that your website utilizes face recognition can be a draw for users to visit and test out your authentication system.
Another compelling reason for considering facial recognition is how straightforward it is to incorporate this technology into your application. To illustrate this, we will be building a React application that uses FaceIO facial recognition technology, which is now possible thanks to the fio.js library. This library handles all of the complicated work for us, making it a breeze to utilize face recognition.
A third reason to consider face recognition authentication is its user-friendliness. With this method, users do not have to remember passwords or any other complex login credentials. In the case of FaceIO, two-layer user protection can be added by utilizing a PIN. All that is required of the user is to allow the camera to scan their face, and the authentication process is complete. This simplicity and ease of use are significant factors in enhancing the overall user experience.
User security with face recognition authentication
As a user, data security is of the utmost importance, and no matter how great an application is, if the data is not secure, users may not feel comfortable using it. However, facial recognition is an extremely secure way to authenticate users. Why is that? There are several reasons:
Firstly, FaceIO complies with applicable privacy laws such as the GDPR, CCPA, and other privacy standards. These laws may impose significant financial penalties on businesses, which could amount to as much as 4% of their annual revenue, for violating users’ privacy rights. Moreover, FaceIO takes data privacy and security very seriously and does not store users’ images. Instead, it stores only a hashed key of the image, ensuring that the photos remain secure and confidential.
Secondly, FaceIO is renowned for its high accuracy. The accuracy rate of the FaceIO engine is an incredible 99.8%, which is truly exceptional. As someone who has experience in the AI field, I can attest that achieving such a high level of accuracy is exceedingly challenging and requires an enormous amount of data, which can be very costly.
In summary, FaceIO’s compliance with privacy laws and its high level of accuracy makes it an excellent choice for businesses seeking a secure and reliable authentication method for their applications. With FaceIO, businesses can rest assured that their users’ data is secure, and their authentication system is highly accurate and efficient.
Making a login system with FaceIO
Let’s dive right into the implementation of the app, as actions speak louder than words.
The application we’ll be building is simple. It comprises three buttons: one for registration, one for login, and a third button to log out. The app works in a straightforward manner: you first register and then log in. At this point, the logout button, which was previously hidden, will appear, and the other buttons will disappear. The completed version of the app we’re going to create is available for viewing at the following link: https://housseinbadra.github.io/FaceIodemo.github.io/.
Now, to get started, you’ll need to create your own FaceIO account. Signing up for an account is simple if you do not already have one. Once you have an account, log in and get ready to proceed. To sign up with FaceIO, click here: https://console.faceio.net/.
After signing up, you will receive a Public ID associated with your application that looks something like fio9362. If you want to access our app, we’ll require this Public ID.
With your account set up, it’s time to start coding. As I mentioned earlier, this app will be built for a mobile phone. All you need are three files: index.html, index.css, and index.js. You can download any code editor, or even use CodePen if you prefer. I chose the SPCK editor, which is an excellent tool. Create a folder, and then create these three files.
Your file structure should look like this:
Adding these styles will wrap up your CSS work, so let’s get started.
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;
}To get started with integrating facial recognition technology into your application, you’ll need to follow a few steps. Firstly, you’ll need to add React, React Dom, and Babel CDNs to the head of your HTML page. Next, add Bootstrap’s CSS-only CDN to your page and link it to your CSS file.
Then, create two div elements with the ids of “root” and “Faceio-modal” You can add these divs anywhere on your HTML page. The “root” div will contain your React application, while the “Faceio-modal” div will be used to display the facial recognition modal.
To link your JavaScript file, add a script tag with the type “text/babel” to the end of your body. Make sure to link this script tag to your index.js file.
Lastly, add the fio.js CDN to the end of your body. This will allow you to use FaceIO’s facial recognition technology within your application. Once you’ve completed these steps, you’re all set to start using facial recognition in your app.
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/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/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/bootstrap@4.4.1/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>
Moving on to the JavaScript file, we can access the React, React Dom, and FaceIO libraries as global variables since we have used CDNs. However, one downside of this approach is that we can’t utilize import statements. To bypass this limitation, we set the type of the index file to text/babel. This is essential for the code editor to recognize JSX syntax correctly and avoid any errors. In more complex projects, it’s recommended to use a bundler like Webpack or Parcel to manage dependencies and imports efficiently.
Although this particular project is relatively simple, for more complex projects, it is recommended to create a separate components folder. To do so, you can use “npm create-react-app”. In our current project, we will utilize object de-structuring instead of imports to achieve the same goal. After this, we can proceed to create the App component.
const {createRoot , render} = ReactDOM
const {useEffect,useState}=ReactAfter a user logs in, it’s important to maintain track of them, therefore a state will be made for that purpose, and a constant `io` will be declared so that FaceIO can be accessed.
const [user,setuser]=React.useState('')
const io=new faceIO('your public key')Now create 3 helper functions:
The logout functionality will reset the user value to an empty string, while the registration feature will allow us to enroll new users into our application. During the registration process, we can associate an ID with each user, which will be stored in FaceIO’s databases. The registration function’s code is available on the FaceIO website’s API page, which you can access by following this link: https://faceio.net/integration-guide.Feel free to modify the function to suit your specific requirements.
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(errCode) })
}The next step in our app development is to implement the login function. The fio.js API provides the necessary code for this function, which can be customized as per our requirements. In my app, when a user logs in, I have assigned the user state to the UID (Unique Identifier) of that user to keep track of their activity. While managing a larger application, we can use cookies and other advanced techniques, but for the purpose of this demo, I have kept things simple. If you want to learn more about managing apps, you can visit this link: 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) })To complete the implementation, we now need to handle the user interface. The goal is to show the logout button when the user is logged in and the other two buttons when the user is not. The following code accomplishes this task.
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>)
To render the app to the view, we can use React’s `render()` method. Since we are using React 18, we can create a variable `root` and set its value to the `div` element with the ID of `root`. Then, we can call `ReactDOM.render()` and pass in the `App` component as the first argument and the `root` variable as the second argument. This will render the `App` component to the DOM.
const root = createRoot( document.getElementById('root'));
root.render(<App/>);With the coding done, it’s time to host the project on GitHub. The first step is to create a GitHub repository and give it a name, such as `myfacerecognition.github.io`. Once the repository is created, the next step is to upload the project files to GitHub. This can be done by using Git to initialize a local repository, connecting it to the GitHub repository, and then pushing the local files to GitHub.
After the files have been uploaded, we need to wait for approximately 5 minutes until the site is created. Once the site is created, it can be accessed through the URL: https://username.github.io/repositoryname. In this case, it would be https://myfacerecognition.github.io. And with that, the project is now live and accessible to the public.
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:
Facial recognition technology has become an increasingly popular method of authenticating users in recent years. Despite its efficacy, there is still room for improvement, and advancements in AI technology are constantly enhancing the capabilities of facial recognition. Hopefully, the information presented in this article has been useful to you. Thank you for reading through to this point.
If you would like to learn more about me, you can visit my website at https://houssein.in/ For more information about FACEIO and its capabilities, please visit their website at https://faceio.net/
key Takeaways
This article presents an overview of the advantages offered by FACEIO, a cross-browser authentication system based on facial recognition technology. Here are the key points to take away:
- FACEIO eliminates the need for passwords and PINs, streamlining the user authentication process and making it faster and more convenient.
- The Enroll and Authenticate functions of FACEIO can be seamlessly integrated into JavaScript libraries, allowing developers to easily incorporate facial recognition technology into their applications.
- Facial recognition technology is gaining popularity in various industries, including security, retail, and healthcare, due to its accuracy and convenience.
- While privacy, accuracy, and bias are concerns associated with facial recognition, FACEIO addresses these issues through advanced algorithms and encryption techniques to safeguard user data and prevent unauthorized access.
Additional benefits of FACEIO include its flexibility, scalability, and compatibility with a wide range of devices and platforms. Overall, FACEIO serves as a robust and innovative authentication solution, ensuring secure online identities and protecting sensitive data for businesses and individuals alike.
Links to Get Started
If you’re new to FACEIO, I recommend starting with the “FACEIO In Under 5 Minutes” guide, which provides a quick introduction to the basics.
Looking to integrate FACEIO into your website? Our “FACEIO Integration Guide” is the perfect resource for you. It includes the fio.js package, which enables easy integration of face recognition technology.
For comprehensive documentation, code snippets, and tools to seamlessly incorporate FACEIO into your website, visit our “Developer Center”.
If you have any questions, our “FAQs” section provides quick answers to common inquiries.
At FACEIO, they prioritize your privacy and security. Learn more about their robust security measures in “Trust Center”.
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 💰 Free coding interview course ⇒ View Course
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
Facial Recognition Made Easy: How to Implement FaceIO in 5 Minutes was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Ahmed Qureshi
Ahmed Qureshi | Sciencx (2023-05-19T16:17:33+00:00) Facial Recognition Made Easy: How to Implement FaceIO in 5 Minutes. Retrieved from https://www.scien.cx/2023/05/19/facial-recognition-made-easy-how-to-implement-faceio-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.