Enrollment

Enrollment is the process of registering a new user by connecting their facial biometrics to a Keyless account. During this process, a full and unobstructed view of the user's face is required.

Enrollment with Web SDK can happen in two ways:

  • Interactive Enrollment, through the Keyless Web SDK JS libraries

  • Silent Enrollment, through the Keyless Authentication Service

In this document we'll explain how to perform only interactive enrollment on the front-end, for silent enrollment please check this dedicated page.

Headless Integration

The @keyless/sdk-web library lets you integrate the Keyless Web SDK however you want in terms of UI/UX, let's see a basic example of enrollment:

import { KeylessEnroll } from '@keyless/sdk-web'

const enroll = new KeylessEnroll()

// in order to perform an interactive enrollment you need to pass a liveness check,
// this means that you need to have multiple natural different frames of the face,
// they should be captured from a live camera feed like a webcam
const frames = ['base16-frame-1', 'base16-frame-2', '...']

enroll.on('begin-image-stream', async () => {
  await enroll.sendImageStream(frames[0])
  
  // remove used frame
  frames.shift()
})

enroll.on('error', (event) => {
  // will log the error code
  console.error(event.message)
})

enroll.on('image-accepted', () => {
  if (frames.length <= 0) {
    throw new Error('No more frames')
  }
  
  // some time needs to pass between one frame and the other,
  // this is handled gracefully in our web components by having a framerate of 4fps
  setTimeout(async () => {
    await enroll.sendImageStream(frames[0])
    
    // remove used frame
    frames.shift()
  }, 200)
})

enroll.on('finished-enrollment', (event) => {
  // will log details about this enrollment
  console.log(event.detail)
})

await enroll.connect({
  key: { id: 'IMAGE_ENCRYPTION_KEY_ID', value: 'IMAGE_ENCRYPTION_PUBLIC_KEY' },
  username: 'USERNAME',
  ws: { url: 'KEYLESS_AUTHENTICATION_SERVICE_URL' }
})

In this example we handle all the necessary events to perform an enrollment with a continous stream of face frames, and if it fails the error code will be logged to the console.

Web Component Integration

Previously we have explained how to perform enrollment in a headless way with the @keyless/sdk-web package, now we'll provide an example of doing so with raw HTML syntax.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Enroll</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
        padding: 8px;
      }

      kl-enroll {
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <kl-enroll
      enable-camera-instructions
      key="IMAGE_ENCRYPTION_PUBLIC_KEY"
      key-id="IMAGE_ENCRYPTION_KEY_ID"
      lang="en"
      size="375"
      theme="light"
      username="USERNAME"
      ws-url="KEYLESS_AUTHENTICATION_SERVICE_URL"
    ></kl-enroll>
    <script src="@keyless/sdk-web-components/elements/enroll/enroll-element.iife.js"></script>
    <script>
      const enroll = document.querySelector('kl-enroll')
      
      enroll.addEventListener('error', (event) => {
        // will log 
        console.log(event.message)
      })

      enroll.addEventListener('finished', (event) => {
        console.log('enrollment successful')
      })
    </script>
  </body>
</html>

That's it, everything is handled by the @keyless/sdk-web-components package, especially the more complex parts of capturing camera frames and sending them at a proper framerate to the authentication service.

Last updated