What is FaceIO, and Why Use It? 🤳
FaceIO is a service that allows websites and apps to recognize a person by their face using a webcam.
Instead of typing a password or using a fingerprint, users can just look at the camera, and the app can confirm who they are.
This is helpful because:
- ⚡ It's faster than typing passwords.
- 🔐 It's more secure because only the person with that face can access the app.
- 🧠 Users don’t need to remember complicated passwords.
How FaceIO Works 🔮
There are two main actions with FaceIO:
- ⛳ Enrolling a User: This means recording the user’s face for the first time.
- 🪪 Authenticating a User: This means checking if the person in front of the camera is the same as the person who enrolled earlier.
Setting Up FaceIO in a Web Page 🏗️
To use FaceIO, you need to add their JavaScript library (a special code that does the face detection) to your website. Here's how you do it:
1. Include the Script:
Add a script tag in your HTML file that points to FaceIO’s library:
<script src="https://cdn.faceio.net/fio.js"></script>
🫗 This script allows your website to use FaceIO's features.
2. Create Buttons for Enroll and Authenticate:
In your HTML, add two buttons:
<button onclick="enrollNewUser()">Enroll New User</button>
<button onclick="authenticateUser()">Authenticate User</button>
🪤 When a user clicks these buttons, they will either enroll (save their face) or authenticate (check their face).
Enrolling a User 👤
The process of saving a new user’s face is called enrolling. Here’s the JavaScript code for it:
function enrollNewUser() {
const faceio = new faceIO("app-public-id"); // Replace with your app's ID
faceio.enroll({
locale: "en", // This sets the language to English
payload: {
email: "user@example.com" // Link this user's email or any other unique ID
}
}).then(userInfo => {
console.log("User enrolled successfully!");
console.log("User ID: " + userInfo.facialId);
console.log("Enrollment Date: " + userInfo.timestamp);
alert("Enrollment successful! Welcome, user.");
}).catch(err => {
handleError(err);
});
}
🤷♂️ What Does This Code Do?
- It calls the
enroll()
function from FaceIO to start the process. -
locale
means the language that the user prefers. -
payload
is extra information about the user (like their email or ID). - If it works, it shows a message saying "Enrollment successful!" and logs details like the user's ID and the date.
- If it doesn’t work, it calls the
handleError()
function to check what went wrong.
Authenticating a User 🤐
This is how you check if a user is who they say they are using their face:
function authenticateUser() {
const faceio = new faceIO("app-public-id"); // Replace with your app's ID
faceio.authenticate({
locale: "en"
}).then(userInfo => {
console.log("User authenticated!");
console.log("User ID: " + userInfo.facialId);
alert("Authentication successful! Welcome back.");
}).catch(err => {
handleError(err);
});
}
🤷♂️ What Does This Code Do?
- It uses the
authenticate()
method from FaceIO. - If successful, it logs a message and welcomes the user back.
- If not, it calls
handleError()
to understand the problem.
To get the API key (also known as the **App Public ID) in FaceIO, follow these simple steps:**
-
Sign Up for FaceIO:
- Go to the FaceIO website and sign up for an account if you don’t have one yet.
- Log in with your new account.
-
Create a New Application:
- Once logged in, go to the Dashboard.
- Click on "Create New Application".
- Fill in the required details like your app name and description, and then click "Create".
-
Find the App Public ID:
- After creating the app, you’ll see it listed on your "Applications" section on your dashboard.
- Here, you’ll find your App Public ID. This is the API key you will use in your JavaScript code to connect your website with FaceIO.
-
Copy the App Public ID:
- Click the copy icon next to the App Public ID to copy it.
- Now, you can paste this key into your code where it says
"app-public-id"
.
Example: Replace "app-public-id"
in the JavaScript code with your actual App Public ID:
const faceio = new faceIO("your-unique-ID inside this quotation");
Now, your app is connected to FaceIO and ready to use facial recognition features!
Before preceding, let me show you how to run FaceIO on a live server.
Running on a Live Server:
- FaceIO requires the JavaScript files to be served from a live HTTP server, not from file:// URLs (local files).
- Make sure you are running your HTML file on a server. You can use tools like VS Code's Live Server extension or Node.js.
First, install node.js in your computer and then instal the following package in FaceIO project:
npm install http-server
Then use it by the following command:
npx http-server
Here is the live server link in your vscode terminal:
Handling Errors 🏇
Not everything goes smoothly all the time, so we need to handle errors when they occur. Here’s a function that does that:
function handleError(errCode) {
switch (errCode) {
case "PERMISSION_REFUSED":
console.log("You didn't allow access to the camera.");
break;
case "NO_FACES_DETECTED":
console.log("No faces detected. Make sure your face is in the frame.");
break;
case "UNRECOGNIZED_FACE":
console.log("This face doesn't match any user we know.");
break;
case "MANY_FACES":
console.log("Please make sure only one face is in front of the camera.");
break;
case "TIMEOUT":
console.log("The operation took too long. Please try again.");
break;
default:
console.log("An unknown error occurred.");
}
}
🤷♂️ What Does This Code Do?
- It takes an error code and matches it to a specific message.
- For example, if a user doesn’t allow access to the camera, it tells them that they need to enable it.
- Each error case helps the user understand what went wrong and what to do next.
Why Does FaceIO Need an HTTP Server? 🤔
You might wonder why this code needs to run on a server instead of just opening it as a regular file in your browser. Here’s why:
-
🧑💻 JavaScript and Security:
- JavaScript code runs in your browser (client-side). But for security reasons, it can’t talk directly to a server that’s not the one it came from.
- This is called the same-origin policy. It keeps your data safe from being accessed by websites that you didn't open.
-
🗃️ FaceIO Needs to Talk to Its Server:
- When you enroll or authenticate a face, the FaceIO library sends information to their server to compare or save data.
- To do this safely, it must come from a proper web address (like
http://yourwebsite.com
) and not just a local file on your computer.
Managing Your App with the FaceIO Console 🥣
FaceIO offers a web-based Application Manager. This is like a dashboard where you can control everything about your app:
- 👤 User Management: Add, edit, or delete users.
- 👥 Group Management: Put users in groups to manage them better.
- 🎐 Permission Management: Decide who can do what in your app.
- 📏 Monitoring Analytics: Check how many users are using your app and how they interact with it.
- 🪠 Security Features: Use things like multi-factor authentication to make your app safer.
Recap of Key Points ♻️
- FaceIO helps websites recognize users using facial recognition, making login faster and more secure.
- To use FaceIO, you need to include their JavaScript library, create buttons, and set up the functions for enrolling and authenticating users.
- Error handling is important to guide users when something goes wrong.
- An HTTP server is needed to bypass browser security rules and communicate properly with FaceIO's servers.
- The Application Manager helps you control users, settings, and security.
By following these steps, you can make a website where users can log in just by looking at their webcam! You are turning your website into a futuristic app that recognizes faces and making it more user-friendly and secure to attract your interviewer or client!
I hope this explanation was helpful! It covers everything from how FaceIO works to setting it up and managing it. Let me know if you have any more questions!
Read more: skills to become a backend developer in 6 months (roadmap)
Top comments (0)