Secure Facial Authentication with FACEIO: A Quick Integration Guide in your Projects
Tags: webdev, beginners, react, javascript
Published: 2024-06-28 06:16:56

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rmtwzr83crznfvr3nds.gif)
### Key Features and Benefits

**Instant Verification:** The [FACEIO](https://faceio.net/) 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](https://faceio.net/integration-guide) and Developer Guides.

### Step 1: Import fio.js to Your Site

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

```html
<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
<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](https://faceio.net/) Console. Add the following script just below your import code:

```html
<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](https://faceio.net/) 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
<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](https://faceio.net/) widget, asks for user consent, and indexes the user's facial features for future authentication. Here’s the syntax:

```javascript
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](https://faceio.net/) widget, captures the user’s facial features, and matches them against the stored data for authentication. Here’s the syntax:

```javascript
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:

```javascript
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](https://faceio.net/) 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](https://faceio.net). Happy coding!