How to add passwordless facial auth on your website? (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.

Learn more on FaceIO’s documentation about why FaceIO is becoming a go-to method for developers.

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

Visit FaceIO’s NPM page to explore the package and get updates on installation details.

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: "[email protected]" // 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”.

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

4. 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!

Security Features and Privacy Best Practices 🔒

FaceIO emphasizes security with features such as multi-factor authentication, data encryption, and access management. For more on the security standards, visit FaceIO Security Best Practices.

FaceIO’s approach to privacy includes secure storage and minimal data handling. Read more on how FaceIO protects user data here: Privacy Best Practices for Applications.

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.");
    }
}

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.

Join the FaceIO community forum to connect with others and ask questions.

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.

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)