Passwordless Facial Authentication on Websites! (FACEIO)

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:

1. ⛳ Enrolling a User: This means recording the user’s face for the first time.
2. 🪪 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:**

1. 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.

2. 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".

1. 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.

2. 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:

1. 🧑‍💻 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.

2. 🗃️ 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 ♻️

1. FaceIO helps websites recognize users using facial recognition, making login faster and more secure.
2. To use FaceIO, you need to include their JavaScript library, create buttons, and set up the functions for enrolling and authenticating users.
3. Error handling is important to guide users when something goes wrong.
4. An HTTP server is needed to bypass browser security rules and communicate properly with FaceIO's servers.
5. 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)