Facial Authentication With FACEIO Framework

FACEIO Facial Authentication Framework
In place of the standard login/password combination or OTP code, FACEIO is a facial identification framework which can be seamlessly integrated on any website with a little JavaScript snippet.
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 deployed, facial authentication framework, with a client-side JavaScript library (fio.js).
Simply put, adding passwordless authentication to websites or online applications is made simple with FACEIO. Simply integrate fio.js into your website, and then you'll be able to enroll new users via Face Recognition utilizing their preferred browser and their computer's Webcam or smartphone frontal camera.
Once you've integrated fio.js into your website, you'll be able to automatically recognize your current users and safely onboard new members in real-time due to a passwordless experience driven by face recognition.
Regardless of the underpinning front-end JavaScript framework such as Vue, Vanilla Javascript or FACEIO appears to work with all websites and web applications. It also does not involve biometric sensors to be available on the client side.
CHECKLIST FOR INTEGRATION
It's simple to integrate FACEIO into your website or web application. You must first create a new application on the FACEIO Console and link it to your website or web application before you can proceed. The steps to take for a seamless integration of fio.js on your website are highlighted in the checklist below. The developer center provides the official integration guides and related code samples.
You must; in order to enable facial authentication for your users -
• Use your email address to initially log into the FACEIO Console. Follow the Application Wizard to build your first FACEIO application after you're connected to the console, then link the newly established program to your web app or website.
• You should be able to automate the creation process using the Application Wizard. Typically, this entails typing in the name of the application, choosing a facial recognition engine and cloud storage location, going over security settings, adjusting Widget layout, and so on.
• Simply integrate fio.js, our face recognition Javascript library, on your website after creating your first FACEIO application, initializing the library with your application.
FIRST APPLICATION YOU CREATE
You must first link this resource (your website or web apps) to a FACEIO Application before integrating fio.js, our face recognition Javascript library, and enabling facial authentication for your users.
Each registered user on your website is represented by their feature vector (biometric hashes, mapped by the chosen facial recognition engine), along with their Unique Facial ID and any metadata you already have linked to a specific user. This sand-boxed binary index is referred to as Application in FACEIO jargon. Consider the FACEIO Application as a secure storage location for the data of your users. Only your program can access this index using its encryption key. Through the FACEIO Console's Application Manager, you can obtain your encryption key.
Via the FACEIO Console, a new application may be developed in a matter of minutes. Owing to the Application Wizard, this is simple to accomplish. You should have the creation process automated by the wizard. Typically, this entails entering the name of the program, choosing a facial Recognition engine, examining security choices, adjusting the Widget layout, and so on.
These simple steps are typically involved in creating a new application:
• Register using the FACEIO Console.
• Click New Application in the Console's primary screen. You'll be taken to the Application Wizard as a result.
• Follow the instructions as shown in the screen screenshot below to use the Application Wizard. Again, this entails entering the name of the program, the URL for the privacy policy, choosing the Facial Recognition Engine, the cloud storage region or on-premise deployment, looking through the security choices, etc. Application Wizard for FACEIO
• Finally, check the data you supplied before submitting it. You should be taken to the Application Manager after your application has been successfully created, where you may manage it using a step-by-step integration.
ADDING THE FIO.JS LIBRARY
You should incorporate fio.js, FACEIO's facial recognition JavaScript library, into your website or web application after developing your first one. Before rolling out facial authentication to the audience, this step is required. Fortunately, doing these only 3 lines of code, as demonstrated in the steps below:
STEP 1 - IMPORTING fio.js TO THE SITE
Before the ending /body> element in the HTML page(s) you plan to use to run fio.js, insert the following code.
Always look at the HTML Integration Boilerplate to copy, modify, or test the entire lambda HTML template on your server.
Fio.js needs to be loaded directly from cdn.faceio.net at all times. It cannot be hosted by oneself. As a result, you won't receive any bug patches or new features.
STEP 2 - INSTANTIATING A NEW faceio OBJECT
Simply create a new faceIO() object and supply your application's Public ID as seen in the following code to initialize fio.js. This code snippet can also be added directly after the import code displayed in Step 1. Once more, the whole integration code sample can be seen in the HTML Boilerplate.
The Application Manager on the FACEIO Console is where you can find your application's Public ID. Make sure you've done that before moving on:
• A new FACEIO application was made, a facial recognition engine was chosen, and your application was turned on. On the FACEIO Console, this is simple to accomplish.
• Checked out the Application Manager's Security Options. As described in our Security Best Practices guide, options include domain origin, PIN requirements, and/or country code limitations, etc.
• Examined our privacy recommendations, such as the one about preserving and erasing the Unique Facial ID that is assigned to each user enrolled in your application, as indicated in our guide to Applications Best Practices.
STEP 3 – INVOKING THE WIDGET
You've successfully launched fio.js. Simply call enroll() or authenticate(), the faceIO() class's only two exposed methods, to begin the facial recognition process. Onboarding new users is handled by the enroll() function, whereas authenticating already enrolled users is handled by the authenticate() function (Identification/Sign-in).
FUNDAMENTALS UNDERSTANDING
It is essential to comprehend the methods and building blocks offered by fio.js for a seamless integration of the library into your codebase. Let's recap everything we have discovered from the previous chapters thus far:
• Simply invoke the enroll() function from the just-instantiated faceIO object to enroll (register) a new user (refer to the previous chapter on how to create this object). You can transactionally add new users to your application using the enroll() method. a procedure more popularly known as onboarding. It serves as a traditional register/sign-up function in a password-managed authentication system's place-equivalent implementation.
• A successful call to enroll() will launch the FACEIO Widget, prompt the user for permission (if not already allowed), ask for access to the browser's Webcam/Frontal camera stream (if not already granted), and then extract and index the user's facial features for use in future authentication.
• More importantly, enroll() accepts a payload, or, to put it another way, an arbitrary set of data you can link to this specific user such as an Email Address, Name, ID, etc. Enroll() takes a number of Optional Parameters which include locale for the engagement language, permissionTimeout which conform to the number of seconds to wait for the user to grant camera user access, and other optional parameters. Upon future successful authentication of this specific user, this payload will be sent back to you.
• When a user is successfully enrolled, enroll() returns a Promise whose fulfillment handler obtains a userInfo object. The Facial ID, a universally unique identifier assigned to the registered user, is the object's most significant member. For example, this Facial ID might be used as a lookup key on your backend to retrieve information associated with this specific person during subsequent authentication. The Return Value part of the enroll() method contains information about the userInfo object in detail. The promise is then refused with the appropriate error code if the user refuses to provide camera access authorization or, for example, accepts the Terms of Use. For a complete list of all potential error codes, see the Error Codes section.
• Finally, enroll() will send a POST request to the URL you specified for the Webhook after each successful enrollment if you were able to register a Webhook handler for your application. In order to maintain your application backend up-to-date & synced, Webhooks enables you to get data and get notified in real-time about the ongoing occurrences during the interaction of the FACEIO Widget with your users. To notify your system of such events, FACEIO employs Webhooks. The Webhooks manual goes into detail about these events, POST data, and backend synchronization.
• The enroll() method is formally described here, together with its anticipated parameters, error handling, etc.
• Simply invoke the authenticate() procedure from the recently created faceIO object to authenticate and recognize a previously registered user. You can transactionally authenticate (recognize) previously enrolled users in your application using the authenticate() method. It is a functional equivalent of how a regular login or sign-in feature would be implemented in a conventional password-managed authentication system.
• A successful call to authenticate() will activate the FACEIO Widget, request access to the browser's Webcam/Frontal camera stream (if not already permitted), and then begin the facial recognition process. Since authenticate() uses very little bandwidth and only one frame to function, it can be used in slow networks and typically completes in less than 100 milliseconds.
• The target user may be required to confirm his PIN code (freely selected during enrollment) after being successfully identified by the underpinning facial recognition engine, depending on the security settings for your app, in order for the authenticate() method to be successful and the Promise to be resolved.
ENROLL & AUTHENTICATE YOUR FIRST USER
Simply call enroll() or authenticate(), the faceIO() class's only two exposed methods, to begin the facial recognition process. Onboarding new users is handled by the enroll() function, whereas authenticating previously enrolled users is handled by the authenticate() function (identification/sign-in).
The line 4 of the aforementioned sample contains the actual call to enroll(). The onboarding process will be initiated, along with requests for the user's consent (if not already given via the userConsent parameter), camera access authorization, and the facial feature extraction procedure, which only needs two frames to run.
The payload argument on line 6 connects the payload data to this specific user. It is an object carrying a fake email address and an ID in this sample. When this user is successfully authenticated in the future, this payload will be forwarded back to you so you can easily identify this user on your backend, for instance.
A userInfo object containing the Unique Facial ID allocated to this specific user is returned upon successful enrolment (line 13), and this object will remain the same upon each subsequent successful authentication of this user. Along with the userInfo object, enrollment timestamps, the approximate gender and age of the enrolled user are also included.
THE FULL INTEGRATION CODE
Let's combine everything we've learnt thus far into a functional piece of code that can be implemented on your website or online application. When integrating FACEIO for the first time on your website, the HTML boilerplate provided below should be used as a guide. This Github Gist provides access to the same code. Do not forget to replace the dummy field on the boilerplate with your real application Public ID when you instantiate fio.js. The Application Manager on the FACEIO Console is where you can find your application's Public ID.
Effective calls to enroll() and authenticate() are made on lines 31 and 60 of the aforementioned gist, respectively. The JavaScript code is self-explanatory, and at this point you should be able to follow the logic that is being used. Please consult the earlier chapters or our integration guide if you need assistance.
Feel free to change the boilerplate code to suit your needs, particularly the payload parameter the enroll() method accepts, which is used to link arbitrary data to the newly enrolled user. Once this user has been authenticated in the future, you will receive this payload again. For more details, see the documentation for enroll().
APPLICATION MANAGEMENT
Once fio.js has been successfully installed on your website, you'll need a simple way to keep track of and manage any FACEIO applications that are currently running. Fortunately, the FACEIO Console's Application Manager makes it simple to arrange your applications in a logical order. You may easily access real-time analytics reports, enable/disable security features, start support tickets, and other administrative procedures thanks to the way that everything is organized.