In the modern digital age, securing user authentication is more crucial than ever. FACEIO offers a simple yet robust solution for facial authentication through its fio.js JavaScript library. This post will walk you through integrating FACEIO on your website or web application, providing a seamless, passwordless experience for your users.

Key Features and Benefits

Instant Verification: The FACEIO Widget verifies user age in milliseconds, using advanced facial analysis to swiftly differentiate minors from adults.

Enhanced Compliance: With precise age distinction, businesses can effortlessly adhere to regional and global age-related regulations, minimizing legal risks.

Seamless Integration: Developers can easily incorporate the widget into existing platforms with minimal effort, supported by comprehensive documentation available on our Integration Guide and Developer Guides.

Step 1: Import fio.js to Your Site

To start using FACEIO, you'll need to import the fio.js library. Simply add the following snippet before the closing </body> tag of your HTML page(s):



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

This snippet loads fio.js asynchronously, ensuring it doesn't impact your page's load speed. Here’s an example of a basic HTML page incorporating fio.js:



<html>
  <head>
    <title>Sign-In via Face Recognition</title>
  </head>
  <body>
    <div id="faceio-modal"></div>
    <script src="https://cdn.faceio.net/fio.js"></script>
  </body>
</html>

Step 2: Instantiate a New faceIO Object

Next, instantiate a new faceIO object using your application’s Public ID. This ID can be found in the Application Manager on the FACEIO Console. Add the following script just below your import code:



<script type="text/javascript">
  /* Instantiate fio.js with your application Public ID */
  const faceio = new faceIO("app-public-id");
</script>

Before proceeding, ensure you've:

Created a new FACEIO application and selected a Facial Recognition Engine.
Activated your application on the FACEIO Console.
Reviewed security options and privacy recommendations in the Application Manager.

Step 3: Invoke the Widget

With fio.js set up, you can now call the enroll() and authenticate() methods to start the facial recognition process. Here’s a basic HTML page implementing these methods:



<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() {
           faceio.enroll()
             .then(userInfo => {
               console.log("User successfully enrolled:", userInfo);
             })
             .catch(errCode => {
               console.error("Enroll failed:", errCode);
             });
        }

        function authenticateUser() {
           faceio.authenticate()
             .then(userInfo => {
               console.log("User authenticated:", userInfo);
             })
             .catch(errCode => {
               console.error("Authentication failed:", errCode);
             });
        }
    </script>
  </body>
</html>

Enroll() - Enroll New User

The enroll() method allows you to enroll new users via facial recognition. This method triggers the FACEIO widget, asks for user consent, and indexes the user's facial features for future authentication. Here’s the syntax:



faceio.enroll({parameters})
  .then(userInfo => {
    /* User successfully enrolled */
  })
  .catch(errCode => {
    /* handle the error */
  });

Optional Parameters:

locale: Interaction language.
permissionTimeout: Time to wait for user to grant camera access.
payload: Arbitrary data linked to the user (e.g., Email Address, Name, ID).

Return Value:
The enroll() method returns a Promise that resolves to a userInfo object, containing the user’s Unique Facial ID and other relevant data.

Authenticate() - Authenticate User

The authenticate() method allows you to authenticate previously enrolled users. This method triggers the FACEIO widget, captures the user’s facial features, and matches them against the stored data for authentication. Here’s the syntax:



faceio.authenticate()
  .then(userInfo => {
    /* User successfully authenticated */
  })
  .catch(errCode => {
    /* handle the error */
  });

Return Value:
The authenticate() method returns a Promise that resolves to a userInfo object, containing the user’s Unique Facial ID and other relevant data.

Error Handling

Both the enroll() and authenticate() methods return error codes if something goes wrong. You can handle these errors using the .catch() method. Here’s an example of error handling:



function handleError(errCode) {

  switch(errCode) {

    case fioErrCode.PERMISSION_REFUSED:

      console.error("Permission refused by the user");

      break;

    case fioErrCode.TERMS_NOT_ACCEPTED:

      console.error("User did not accept the terms");

      break;

    // Add more error cases as needed

    default:

      console.error("An unknown error occurred:", errCode);

  }

}

Conclusion

Implementing FACEIO on your website or web application is straightforward and enhances security by providing a passwordless, facial recognition-based authentication system. By following the steps outlined above, you can quickly integrate fio.js and start enrolling and authenticating users securely and efficiently.

For more detailed documentation and community tutorials on using FACEIO with various JavaScript frameworks like React, Vue, Angular, and others, visit the FACEIO website. Happy coding!

Secure Facial Authentication with FACEIO: A Quick Integration Guide in your Projects