Wizard

This component can be found under the Sybrin.Biometrics namespace and is called WizardComponent.

Full name: Sybrin.Biometrics.WizardComponent.

It is a component that wraps and orchestrates the rest of the biometrics components.

As the user interacts with components housed within the wizard component, it will automatically progress and keep track of steps.

Initialization

The wizard component can be initialized using the following code:

<div id='wizard'></div>

var options = new Sybrin.Biometrics.Options({
    apiKey: 'your-api-key-here', 
    authorizationEndpoint: 'your-auth-endpoint-here',
    passiveLivenessEndpoint: 'your-liveness-endpoint-here',
    // modelPath: '/assets' // Use if your model is located elsewhere
});

// Option 1: Passing an id
var component = new Sybrin.Biometrics.WizardComponent({ 
    id: 'wizard',
    options: options
});

// Option 2: Passing a DOM element
var element = document.getElementById('wizard');
var component = new Sybrin.Biometrics.WizardComponent({ 
    element: element,
    options: options
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

Please note that 'wizard' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.

During initialization, the wizard component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

id (string): ID of the element you wish to use for component initialization. Not required if element is passed.
element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.
api (Sybrin.Identity.Api): Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options is passed.
options (Sybrin.Identity.Options): Configuration options to instantiate Sybrin.Identity.Api with. Not required if an instance of api is passed.

Optional:

correlationId (string): Unique identifier for the case that will be passed down to the back-end if set.
steps (string): A collection of strings to specify/override the steps that the wizard should display, as well as their order. The string values may be:
- 'prepare' to specify the prepare component.
- 'device-select' to specify the device select component. Please note that the wizard will automatically omit this step if the SDK detects that the user system only possesses one viable video input device.
- 'liveness' to specify the passive liveness component.
- 'result' to specify the result component.
readonlyMode (boolean): Disables all events if true. Default false.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called after the DOM is loaded.

Destruction

The wizard component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Events

The wizard component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

onWizardDone(result: PassiveLivenessResult)
onBeforeStepChanged(oldStep: string, newStep: string)
onAfterStepChanged(oldStep: string, newStep: string)
onLivenessResult(result: PassiveLivenessResult)
onLivenessError(error: string)
onLivenessCancelled()
onBeforeLiveness()
onViewPrivacyPolicy()
onViewGuidelines()

On Wizard Done

This function is called when all wizard steps have been completed and a result was acquired without error. To hook onto the event, you may use the following code:

component.onWizardDone = function(result) {
    console.log('Alive: ', result.alive);
    console.log('Confidence: ', result.confidence);
}

The result parameter is of type PassiveLivenessResult and includes the following properties:

alive (boolean): Whether or not the liveness detection passed.
confidence (float): Confidence in liveness. 0 is no confidence. 1 is full confidence.
image (string): The image data in data URI format.
video (Blob): The video data in Blob format. Only included if the includeVideo property is set to true in configuration options.

A false result may include a spoof, failure to detect a face due to poor image quality, or any other expected failed workflow outcomes. Only exceptions such as failure to gain access to the camera would trigger the liveness error function.

On Before Step Changed

This function is called before the wizard changes to another step. This includes progressing forward or going back to a previous step. To hook onto the event, you may use the following code:

component.onBeforeStepChanged = function(oldStep, newStep) {
    console.log('The old step is: ', oldStep);
    console.log('The new step will be: ', newStep);
}

The oldStep parameter is of type string.

The newStep parameter is of type string.

On After Step Changed

This function is called after the wizard changed to another step. This includes progressing forward or going back to a previous step. To hook onto the event, you may use the following code:

component.onAfterStepChanged = function(oldStep, newStep) {
    console.log('The old step was: ', oldStep);
    console.log('The new step is: ', newStep);
}

The oldStep parameter is of type string.

The newStep parameter is of type string.

On Liveness Result

This event bubbles the onLivenessResult event up once it executes on the passive liveness component.

On Liveness Error

This event bubbles the onLivenessError event up once it executes on the passive liveness component.

On Liveness Cancelled

This event bubbles the onLivenessCancelled event up once it executes on the passive liveness component.

On Before Liveness

This event bubbles the onBeforeLiveness event up once it executes on the passive liveness component.

On View Privacy Policy

This event bubbles the onViewPrivacyPolicy event up once it executes on the prepare component.

On View Guidelines

This event bubbles the onViewGuidelines event up once it executes on the prepare component.

Styling

The wizard component is structured a follows:

<div class="sybrin-biometrics-wizard">
    <div class="sybrin-biometrics-wizard-viewport">
    </div>
</div>

Since the wizard component has no visual elements by itself, no styling is necessary. Please style individual components housed within the wizard instead.

Last updated 2 years ago