Components

Learn about the interaction between Keyless components

show how the Keyless Web SDK, which runs within your web app on the user’s browser, interacts with your application server and with the Keyless network.

Headless Enrollment

In this context headless means that the enrollment happens on the client-side without any UI component, and it is therefore pure Javascript.

, your web app initializes a KeylessEnroll class and establishes a connection to the Keyless Authentication Service, then:

1. Waits for the "begin-image-stream" event and sends the first face frame.

2. Waits for the "image-accepted" event and sends one more face frame.

3. The wait will continue in a loop until either of:

   1. The "liveness-failed" event is fired, which means that the user was not deemed as genuinely present in-front of the camera.

   2. The "stop-sending" event is fired which means that the liveness passed.

4. Now the Keyless Authentication Service will extract the vectors of the last frame sent and perform the recognition process.

5. Waits for the "authentication-finished" event.

Web Component Enrollment

We use Web Components in order to be framework agnostic, meaning that the custom elements we expose are going to work on any environment.

During enrollment, your web app loads and renders the kl-enroll web component, the component will establish a connection to the Keyless Authentication Service as soon as it is mounted, then it:

1. Checks if the user has consented to the usage of their camera, the permission must be granted in order to proceed.

2. Checks if the user is on a desktop device and has multiple cameras, if yes the user will be prompted to pick one in order to avoid using the wrong camera by default. This does not happen on mobile devices and the selfie camera is always preferred by default.

3. Starts sending face frames to the Keyless Authentication Service at a set framerate, which is by default 4 frames per second.

4. Waits for the "finished" event.

Silent Enrollment

In this context silent means that the enrollment happens on the server-side, requiring no interaction from the user unless manually implemented by the integrator on their client.

During enrollment, your back-end service will perform a POST request to the Keyless Authentication Service following these steps:

1. Generates a new AES-GCM or AES-GCM-SIV key.

2. Encrypts the face image with the AES-GCM or AES-GCM-SIV key.

3. Encrypts the AES-GCM or AES-GCM-SIV key with the RSAES-OAEP-SHA-256 public key also known as IMAGE_ENCRYPTION_PUBLIC_KEY.

4. Performs the POST request and waits for a 201 response status code.

Headless Authentication

In this context headless means that the authentication happens on the client-side without any UI component, and it is therefore pure Javascript.

During authentication, your web app initializes a KeylessAuth class and establishes a connection to the Keyless Authentication Service, then:

1. Waits for the "begin-image-stream" event and sends the first face frame.

2. Waits for the "image-accepted" event and sends one more face frame.

3. The wait will continue in a loop until either of:

   1. The "liveness-failed" event is fired, which means that the user was not deemed as genuinely present in-front of the camera.

   2. The "stop-sending" event is fired which means that the liveness passed.

4. Now the Keyless Authentication Service will extract the vectors of the last frame sent and perform the recognition process.

5. Waits for the "authentication-finished" event and checks if the result was either "SUCCESS" or "FAILURE".

Web Component Authentication

We use Web Components in order to be framework agnostic, meaning that the custom elements we expose are going to work on any environment.

During authentication, your web app loads and renders the kl-auth web component, the component will establish a connection to the Keyless Authentication Service as soon as it is mounted, then:

1. Checks if the user has consented to the usage of their camera, the permission must be granted in order to proceed.

2. Checks if the user is on a desktop device and has multiple cameras, if yes the user will be prompted to pick one in order to avoid using the wrong camera by default. This does not happen on mobile devices and the selfie camera is always preferred by default.

3. Starts sending face frames to the Keyless Authentication Service at a set framerate, which is by default 4 frames per second.

4. Waits for the "finished" event and checks if the result was either "SUCCESS" or "FAILURE".