Face it, FACEIO just makes it easy

5 min readJul 18, 2022

Hi Everyone

This is a skinny summary of what FACEIO is; it’s a facial authentication framework that can be quickly integrated into any website with simple javascript.

The 411

The short version is that FACEIO is a framework for facial authentication that can be added to any website by a straightforward JavaScript snippet to quickly authenticate users rather than using the conventional login/password combination.

What it does

Any website or web application that wants to provide safe facial recognition to its users can easily integrate FACEIO, a cross-browser, Cloud & On-Premise deployable, facial authentication framework, with a client-side JavaScript library (fio.js).

Some Positive Elements

Quickly certifies user identity without the use of FIDO keys, OTP codes, or security questions.
Comprehensive browser compatibility (Chrome, Firefox, Safari, Edge & Chromium derivatives).
0 reliance on external sources. Only conventional technology is used, using plain JavaScript and CSS.
Modern facial recognition engines enable defense grade accuracy with recognition speeds of less than 100 milliseconds.
highest levels of security.
Privacy is intended to be as user-friendly as possible. Biometric sensor is not necessary.

Now for the goods

Recently I’ve gotten into facial recognition technologies. I never thought that we could use one as an authentication system.

In this article we’ll walk through how to set up a vue typescript webpack that uses FACEIO as an authenticator.

# First install vue cli if you haven't
npm install -g @vue/cli
# OR
yarn global add @vue/cli

Next we assume you’ve gone through the FACEIO Integration checklist. If you haven’t, please do so now.

Create a new vue project using the cli.

vue create faceauth

Click manually select features

Select the following options:

Babel

Typescript

Progressive Web App (PWA) Support

Router

VueX

Say yes to use class-style component syntax

Say yes to use Babel alongside Typescript

Say yes to use History mode for router

and put configs in dedicated files (I find this way easier)

Then let vue install.

Now open the project in Webstorm and go to the public folder. Open index.html

Insert the required fio library on your index so it will get webpacked in.

<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>

Next, open main.ts and add the following line so we can access FACEIO on any instance.

//@ts-ignore
Vue.prototype.faceIO = new faceIO("xxxxx");

You’ll have to add the ts-ignore because there isn’t a npm module for fio. Make sure to replace xxxxx with your application id. Get yours at the Console.

Next Open up Home.vue. We’re gonna change it to a class component and then add an enroll button.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="Enroll">Enroll</button>
  </div>
</template>

<script>

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
 Enroll(){
   this.faceIO.enroll()
 }
}
</script>

You can see in the enroll function that because of what we did in main we can access the faceIO property on the vue instance. Very handy.

Your application should look like this:

Clicking on enroll should bring up the FACEIO enroller. Congrats! You have just completed connecting FACEIO and vue.

Let’s do a little more

enroll() is a two step operation. The first step is for collecting user’s consent if not yet granted by your host application, while the second step is for indexing the facial features of the user being enrolled, and requires only two frames to operate making it extremely bandwidth efficient and suitable for use in slow networks. Once the facial features collected, the user is invited to input a PIN code of his choice which must be at least 4 digits long (and no more than 16 digits long). On future authentication of this particular user, he is then required to confirm his PIN code whenever a collision occurs (e.g. two extremely similar faces are reported which might happen on very large indexes, or when the same user has enrolled twice), a face match is completed with a confidence score slightly lower than 99% threshold or when your application always enforce PIN code confirmation in order for future authentication of this particular user to succeed.

What this means is enroll puts the user in the system and allows the user to add a pin.

Let’s see, from the docs, what enroll

Looks like we get facialId, A Universally Unique Identifier assigned to this particular user.

We also get AGE and GENDER

Let’s update the page