Hi Devs👋
Do you ever get frustrated for forgetting your passwords, and clicking on "Forgot Password",The struggle is real😬, but what if the application uses Facial Recognition Authentication system instead of Email/Password Authentication to login? No more forgotten passwords instead, your face becomes the key to unlocking the digital realm.
In today's post we will see how we can implement Facial Recognition Authentication in our web application using FACEIO by following few easy steps.
But let's first understand,
What is FACEIO?
FACEIO is a cross-browser, Cloud & On-Premise deployable,
facial authentication framework that can be implemented on any website via 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 Password-less authentication to your web based applications. It works with regular Webcams or smartphones front 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.
What makes it special?
- It Authenticates and confirms identity of users instantly without FIDO keys, OTP codes, or security questions.
- It supports full cross-browser compatibility (Chrome, Firefox, Safari, Edge & Chromium derived).
- It has Zero external dependency. Only standard technology implemented in plain JavaScript & CSS.
- Cloud & On-premise deployment on your own infrastructure for complete control over biometrics hashes and users data.
Now let's get started with the implementation💻
How to add FACEIO to your website or web-based application?
Implementing FACEIO on your website or web application is straightforward approach. Follow these below given steps
Step 1: Create an account on FACEIO CONSOLE
Step 2: Head to Application Wizard and create your application by providing application name, privacy policy URL, selecting a Facial Recognition Engine, cloud storage region or on-premise deployment, reviewing security options, etc. Once your application successfully created, you should be redirected to the Application Manager where you can manage this new application and get your Public ID.
Step 3: Now you need to Integrate fio.js
- Import fio.js to your site: Paste the snippet on HTML page(s) you want to instantiate fio.js
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
- Instantiate a new faceio object: to initialize fio.js, simply instantiate a new faceIO() object and provide your application Public ID as follows.
<script type="text/javascript">
/* Instantiate fio.js with your application Public ID */
const faceio = new faceIO("app-public-id");
</script>
- Invoke the widgets: Now fio.js is Up & Running but to start the Facial Recognition process, we need to call enroll() or authenticate(), the only two exported methods of the faceIO() class you instantiated earlier.
The enroll() is for enrollment or on-boarding new users, This 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.
The authenticate() is for authenticating previously enrolled users. This will trigger the authentication process after requesting camera access permission (if not yet granted) by the end user.
Example:
<html>
<head>
<title>Sign-In or Enroll via Face Recognition</title>
</head>
<body>
<button onclick="enrollNewUser()">Enroll New User</button>
<button onclick="authenticateUser()">Authenticate User</button>
<div id="faceio-modal"></div>
<script src="https://cdn.faceio.net/fio.js"></script>
<script type="text/javascript">
// Instantiate fio.js with your application's Public ID
const faceio = new faceIO("app-public-id");
function enrollNewUser(){
// call to faceio.enroll() here will automatically trigger the on-boarding process
}
function authenticateUser(){
// call to faceio.authenticate() here will automatically trigger the facial authentication process
}
function handleError(errCode){
// Handle error here
}
</script>
</body>
</html>
The enrole() and authenticate() takes optional parameters also. You can see full doc here
Here is the full HTML Integration Boilerplate for your reference
| <!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> |
Replace the dummy field on the boilerplate with your real application Public ID when you instantiate fio.js.
Congratulations🎉 You have successfully included Facial Recognition Authentication to your application and FACEIO is up & running!
Example Preview:
If you want to know more about faceIO and detailed explanation, please visit the official documentation page.
Thanks for reading❤
Top comments (2)
Great read @dev_kiran . Face authentication is cool.
Another cool way I add authentication is using Passkeys with Hanko.
You may want to give it a look as well.
github.com/shricodev/pdfwhisper-op...
Thanks @shricodev :)
I'll check out Passkeys with Hanko on GitHub.
Appreciate the suggestion! 👍