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:

Live Enrollment, through the Keyless Web SDK JS libraries described below.
IDV Bridge SaaS, through the Keyless Authentication Service

On this page we'll explain how to perform only interactive live enrollment on the front-end.

Note Keyless also supports component interoperability, so that users could also be enrolled from IDV Bridge OnPremise or the Mobile SDK and still be authenticated via the Web SDK JS at a later date.

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-stream', async () => {
  await enroll.collectFrame(frames[0])
  await enroll.sendFrame()
  
  // remove used frame
  frames.shift()
})

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

enroll.on('frame-results', () => {
  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.collectFrame(frames[0])
    await enroll.sendFrame()
    
    // remove used frame
    frames.shift()
  }, 200)
})

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

await enroll.connect({
  customer: { name: 'CUSTOMER_NAME' },
  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
      customer="CUSTOMER_NAME"
      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="./node_modules/@keyless/sdk-web-components/elements/enroll/enroll-element.iife.js"></script>
    <script>
      const enroll = document.querySelector('kl-enroll')
      
      enroll.addEventListener('error', (event) => {
        // will log the error code
        console.log(event.message)
      })

      enroll.addEventListener('finished', (event) => {
        // will log details about this enrollment
        console.log(event.detail)
      })
    </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 1 day ago

Was this helpful?

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-stream', async () => { await enroll.collectFrame(frames[0]) await enroll.sendFrame() // remove used frame frames.shift() }) enroll.on('error', (event) => { // will log the error code console.error(event.message) }) enroll.on('frame-results', () => { 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.collectFrame(frames[0]) await enroll.sendFrame() // remove used frame frames.shift() }, 200) }) enroll.on('finished', (event) => { // will log details about this enrollment console.log(event.data) }) await enroll.connect({ customer: { name: 'CUSTOMER_NAME' }, key: { id: 'IMAGE_ENCRYPTION_KEY_ID', value: 'IMAGE_ENCRYPTION_PUBLIC_KEY' }, username: 'USERNAME', ws: { url: 'KEYLESS_AUTHENTICATION_SERVICE_URL' } })

<!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 customer="CUSTOMER_NAME" 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="./node_modules/@keyless/sdk-web-components/elements/enroll/enroll-element.iife.js"></script> <script> const enroll = document.querySelector('kl-enroll') enroll.addEventListener('error', (event) => { // will log the error code console.log(event.message) }) enroll.addEventListener('finished', (event) => { // will log details about this enrollment console.log(event.detail) }) </script> </body> </html>