Introducing FACEIO - Facial Authentication for the Web
Tags: showdev, webdev, programming, discuss
Published: 2022-07-17 17:17:30

---
title: Introducing FACEIO - Facial Authentication for the Web
published: true
description: 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
tags: showdev, webdev, programming, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lr4310uwdgg2p53dikl.png
# Use a ratio of 100:42 for best results.
---

### Hi Community!

We are pleased to introduce [FACEIO](https://faceio.net), a product developed from scratch here at [PixLab](https://pixlab.io) in the past few years. We look forward to hear your thoughts about this...

### The TLDR;

[FACEIO](https://faceio.net) 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](https://faceio.net/getting-started).

### Now, the Details,

[FACEIO](https://faceio.net) is a cross-browser, [Cloud](https://faceio.net/pricing) & [On-Premise](https://faceio.net/on-premise) deployable, facial authentication framework, with a client-side JavaScript library (fio.js) that [integrates seamlessly](https://faceio.net/integration-guide) 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](https://faceio.net/integration-guide), 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](https://faceio.net/facialid#facial-recognition-engine)**.
* Highest security standards. [Privacy by design](https://faceio.net/apps-best-practice) with maximum user convenience. No requirements for biometric sensor.

[FACEIO](https://faceio.net) 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](https://faceio.net/integration-guide) 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](https://console.faceio.net), 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](https://console.faceio.net) to create your first application and link it to your website or web application.
2. The [Application Wizard](https://console.faceio.net) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg5vc6db6k49ob6lj8s0.png)
3. Once your first FACEIO application created, [simply implement](https://faceio.net/integration-guide) *fio.js*, our facial recognition JavaScript library on your website, and [initialize the library](https://faceio.net/integration-guide#fiojs-instantiate) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj8zkyfsuutz6jd2tfrv.png)

### The HTML Integration Boilerplate
{% gist https://gist.github.com/symisc/34203d2811a39f2a871373abc6dd1ce9 %}

### 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](https://faceio.net/integration-guide#authenticate)**.
* *enroll()* takes a number of [Optional Parameters](https://faceio.net/integration-guide#enroll_param) 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](https://faceio.net/integration-guide#authenticate) of this particular user**.

👉 **The enroll() method, its expected parameters, Promise fulfillment, error handling, etc. are officially documented [here](https://faceio.net/integration-guide#enroll)**.

* 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](https://faceio.net/integration-guide#authenticate_return) 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](https://faceio.net/integration-guide#enroll) 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](https://faceio.net/integration-guide#authenticate)**.

### 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](https://faceio.net/getting-started): Learn the fundamentals. Your first steps with FACEIO...
* [Integration Guide](https://faceio.net/integration-guide): Learn how to implement fio.js, our facial recognition library on your website before rolling facial authentication to your audience...
* [Developer Center](https://faceio.net/dev-guides): Code samples, documentation, support channels, and all the resources you need to implement FACEIO on your website...
* [Frequently Asked Questions](https://faceio.net/faq): Get instant answers to the most common questions.
* [Trust Center](https://faceio.net/trust-center): Learn how we handle your data securely and in compliance with privacy and legal requirements.