FACEIO Facial Authentication Framework
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.
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.
FIRST APPLICATION YOU CREATE
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.
• 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
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).
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.
• 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.
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().
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.
FACEIO Facial Authentication Framework
For further actions, you may consider blocking this person and/or reporting abuse