DEV Community

Cover image for Introducing FACEIO - Facial Authentication for the Web
Vincent
Vincent

Posted on

5 3

Introducing FACEIO - Facial Authentication for the Web

Hi Community!

We are pleased to introduce FACEIO, a product developed from scratch here at PixLab in the past few years. We look forward to hear your thoughts about this...

The TLDR;

FACEIO is a facial authentication framework that can be implemented on any website via simple JavaScript snippet (just like Disqus or Google Tag) to easily authenticate users via Face Recognition instead of the traditional login/password pair or OTP code. Get started here.

Now, the Details,

FACEIO is a cross-browser, Cloud & On-Premise deployable, facial authentication framework, with a client-side JavaScript library (fio.js) that integrates seamlessly with any website or web application desiring to offer secure facial recognition experience to their users.

Put it simply, FACEIO is the easiest way to add passwordless authentication to web based applications. Simply implement fio.js on your website, and you will be able to instantly authenticate your existing users, and enroll new ones via Face Recognition using their computer Webcam or smartphone frontal camera on their favorite browser.

Some Nice Features

  • Authenticates and confirms identity of users instantly without FIDO keys, OTP codes, or security questions.
  • Full cross-browser compatibility (Chrome, Firefox, Safari, Edge & Chromium derivatives).
  • Zero external dependency. Only standard technology implemented in plain JavaScript & CSS.
  • Defense grade accuracy with less than 100 milliseconds recognition speed powered by state-of-the-art facial recognition engines.
  • Highest security standards. Privacy by design with maximum user convenience. No requirements for biometric sensor.

FACEIO works with regular Webcams or smartphones frontal camera on all modern browsers, does not require biometric sensors to be available on the client side, and works seemingly with all websites and web-based applications regardless of the underlying front-end JavaScript framework or server-side language or technology.

Adding FACEIO to your website or web-based application

Implementing FACEIO on your website or webapp is straightforward. Before so, you need to create a new application first on the FACEIO Console, and link this resource to your website or web application. The checklist below highlights the steps to follow for a smooth integration of
fio.js on your site:

  1. Create a new FACEIO application first: Follow the Application Wizard on the FACEIO Console to create your first application and link it to your website or web application.
  2. The Application Wizard should automate the creation process for you. Usually, this involve inputting an application name, selecting a facial recognition engine, cloud storage region, reviewing security options, customizing the Widget layout, and so forth... FACEIO Application Wizard
  3. Once your first FACEIO application created, simply implement fio.js, our facial recognition JavaScript library on your website, and initialize the library with your application Public ID.
  4. Congratulations đź‘Ź. You have FACEIO up & running! Now, it's time to enroll() and authenticate() your first user via face recognition as we will see on the HTML boilerplate..

Enroll New User

The HTML Integration Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FACEIO Integration Boilerplate</title>
<style>
.container {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>FACEIO Integration Boilerplate</h1><br>
<button onclick="enrollNewUser()" title="Enroll a new user on this FACEIO application">Enroll New User</button>
<button onclick="authenticateUser()" title="Authenticate a previously enrolled user on this application">Authenticate User</button>
</div>
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
// Initialize the library first with your application Public ID.
// Grab your public ID from the Application Manager on the FACEIO console at: https://console.faceio.net/
const faceio = new faceIO("app-public-id"); // Replace with your application Public ID
function enrollNewUser() {
// Start the facial enrollment process
faceio.enroll({
"locale": "auto", // Default user locale
"userConsent": false, // Set to true if you have already collected user consent
"payload": {
/* The payload we want to associate with this particular user
* which is forwarded back to us on each of his future authentication...
*/
"whoami": 123456, // Example of dummy ID linked to this particular user
"email": "john.doe@example.com"
}
}).then(userInfo => {
// User Successfully Enrolled!
alert(
`User Successfully Enrolled! Details:
Unique Facial ID: ${userInfo.facialId}
Enrollment Date: ${userInfo.timestamp}
Gender: ${userInfo.details.gender}
Age Approximation: ${userInfo.details.age}`
);
console.log(userInfo);
// handle success, save the facial ID, redirect to dashboard...
//
// faceio.restartSession() let you enroll another user again (without reloading the entire HTML page)
}).catch(errCode => {
// handle enrollment failure. Visit:
// https://faceio.net/integration-guide#error-codes
// for the list of all possible error codes
handleError(errCode);
// If you want to restart the session again without refreshing the current TAB. Just call:
faceio.restartSession();
// restartSession() let you enroll the same or another user again (in case of failure) without refreshing the entire page.
});
}
function authenticateUser() {
// Start the facial authentication process (Identify a previously enrolled user)
faceio.authenticate({
"locale": "auto" // Default user locale
}).then(userData => {
console.log("Success, user recognized")
// Grab the facial ID linked to this particular user which will be same
// for each of his successful future authentication. FACEIO recommend
// that your rely on this ID if you plan to uniquely identify
// all enrolled users on your backend for example.
console.log("Linked facial Id: " + userData.facialId)
// Grab the arbitrary data you have already linked (if any) to this particular user
// during his enrollment via the payload parameter the enroll() method takes.
console.log("Associated Payload: " + JSON.stringify(userData.payload))
// {"whoami": 123456, "email": "john.doe@example.com"} set via enroll()
//
// faceio.restartSession() let you authenticate another user again (without reloading the entire HTML page)
//
}).catch(errCode => {
// handle authentication failure. Visit:
// https://faceio.net/integration-guide#error-codes
// for the list of all possible error codes
handleError(errCode);
// If you want to restart the session again without refreshing the current TAB. Just call:
faceio.restartSession();
// restartSession() let you authenticate the same user again (in case of failure)
// without refreshing the entire page.
// restartSession() is available starting from the PRO plan and up, so think of upgrading your app
// for user usability.
});
}
function handleError(errCode) {
// Log all possible error codes during user interaction..
// Refer to: https://faceio.net/integration-guide#error-codes
// for a detailed overview when these errors are triggered.
switch (errCode) {
case fioErrCode.PERMISSION_REFUSED:
console.log("Access to the Camera stream was denied by the end user");
break;
case fioErrCode.NO_FACES_DETECTED:
console.log("No faces were detected during the enroll or authentication process");
break;
case fioErrCode.UNRECOGNIZED_FACE:
console.log("Unrecognized face on this application's Facial Index");
break;
case fioErrCode.MANY_FACES:
console.log("Two or more faces were detected during the scan process");
break;
case fioErrCode.FACE_DUPLICATION:
console.log("User enrolled previously (facial features already recorded). Cannot enroll again!");
break;
case fioErrCode.MINORS_NOT_ALLOWED:
console.log("Minors are not allowed to enroll on this application!");
break;
case fioErrCode.PAD_ATTACK:
console.log("Presentation (Spoof) Attack (PAD) detected during the scan process");
break;
case fioErrCode.FACE_MISMATCH:
console.log("Calculated Facial Vectors of the user being enrolled do not matches");
break;
case fioErrCode.WRONG_PIN_CODE:
console.log("Wrong PIN code supplied by the user being authenticated");
break;
case fioErrCode.PROCESSING_ERR:
console.log("Server side error");
break;
case fioErrCode.UNAUTHORIZED:
console.log("Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information");
break;
case fioErrCode.TERMS_NOT_ACCEPTED:
console.log("Terms & Conditions set out by FACEIO/host application rejected by the end user");
break;
case fioErrCode.UI_NOT_READY:
console.log("The FACEIO Widget could not be (or is being) injected onto the client DOM");
break;
case fioErrCode.SESSION_EXPIRED:
console.log("Client session expired. The first promise was already fulfilled but the host application failed to act accordingly");
break;
case fioErrCode.TIMEOUT:
console.log("Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)");
break;
case fioErrCode.TOO_MANY_REQUESTS:
console.log("Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications");
break;
case fioErrCode.EMPTY_ORIGIN:
console.log("Origin or Referer HTTP request header is empty or missing");
break;
case fioErrCode.FORBIDDDEN_ORIGIN:
console.log("Domain origin is forbidden from instantiating fio.js");
break;
case fioErrCode.FORBIDDDEN_COUNTRY:
console.log("Country ISO-3166-1 Code is forbidden from instantiating fio.js");
break;
case fioErrCode.SESSION_IN_PROGRESS:
console.log("Another authentication or enrollment session is in progress");
break;
case fioErrCode.NETWORK_IO:
default:
console.log("Error while establishing network connection with the target FACEIO processing node");
break;
}
}
</script>
</body>
</html>

Understand the fundamentals

  • To enroll (register) a new user, simply call the enroll() method from the recently instantiated faceIO object. The enroll() method let you transactionally enroll new users on your application. A process better known as on-boarding. It is the equivalent implementation of a standard register/sign-up function in a traditional password managed, authentication system. This is done on line 31 of the gist above.
  • Effective call to enroll(), will trigger the FACEIO Widget, ask for user’s consent (if not yet authorized), request access (if not yet granted) to the browser’s Webcam/Frontal camera stream, and finally extract & index the facial features of the enrolled user for future authentication purposes.
  • enroll() takes a number of Optional Parameters including locale for the interaction language, permissionTimeout which correspond to the number of seconds to wait for the user to grant camera access permission, but more importantly, enroll() accept a payload which simply put, an arbitrary set of data you can link to this particular user such as an Email Address, Name, ID, etc. This payload will be forwarded back to you upon successful future authentication of this particular user.

👉 The enroll() method, its expected parameters, Promise fulfillment, error handling, etc. are officially documented here.

  • To Authenticate & Recognize a previously enrolled user, simply call the authenticate() method from the recently instantiated faceIO object. The authenticate() method let you transactionally authenticate (recognize) previously enrolled users on your application. It is the equivalent implementation of a standard login/sign-in function in a traditional password managed, authentication system.
  • authenticate() returns a Promise whose fulfillment handler receives a userData object when the user has successfully been identified. The most important fields of this object are: payload, which is the arbitrary data you have already linked (if any) to this particular user during his enrollment via the payload parameter, the enroll() method takes, and Facial ID, which is an Universally Unique Identifier assigned to this particular user during his enrollment. This Facial ID alongside the payload data could serve as a lookup key on your backend to fetch data linked to this particular user on each future successful authentication for example.

👉 The authenticate() method, its expected parameters, Promise fulfillment, error handling, etc. are officially documented here.

Further Reading

It’s super quick to implement FACEIO, and get it up & running on your website or web application. The following tutorials, and guides should help you get started with FACEIO:

  • Getting Started Tutorial: Learn the fundamentals. Your first steps with FACEIO...
  • Integration Guide: Learn how to implement fio.js, our facial recognition library on your website before rolling facial authentication to your audience...
  • Developer Center: Code samples, documentation, support channels, and all the resources you need to implement FACEIO on your website...
  • Frequently Asked Questions: Get instant answers to the most common questions.
  • Trust Center: Learn how we handle your data securely and in compliance with privacy and legal requirements.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Retry later