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:
The Sybrin Web SDK provides the option to either provide the ID of the element you wish to use for component initialization, or to provide 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 provided during component initialization in JavaScript.
During initialization, the wizard component allows for a number of configuration options that may be provided 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 ifelement
is provided.element (HTMLElement)
: Element you wish to use for component initialization. Not required ifid
is provided.api (Sybrin.Identity.Api)
: Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance ofoptions
is provided.options (Sybrin.Identity.Options)
: Configuration options to instantiateSybrin.Identity.Api
with. Not required if an instance ofapi
is provided.
Optional:
cameraDirectionPriority (number)
: This property is used to determine which camera direction the SDK should try to prioritize. 0 is none, meaning it will always prompt device selection. 1 is front, meaning it will default to the front camera if only one front device is found. 2 is back, meaning it will default to the rear camera if only one rear device is found.correlationId (string)
: Unique identifier for the case that will be provided to the back-end if set.enableMobileCapture (boolean)
: Sets whether or not the "Mobile Capture" button should be enabled on the prepare component when the flow is being executed on a desktop browser.enableSkipFailureCount (number)
: The number of liveness failures required before the skip button appears. When set to 0, liveness is un-skippable. Default 0.imageCaptureFormat (string: 'jpeg' | 'png')
: Sets the format that the images will be captured in. Defaults to JPEG.isSingleStep (boolean)
: Sets whether or not the result component's "Next" button should be displayed as "Complete Step" instead.resultHideNext (boolean)
: When set totrue
, the "Next" button of the Result component will be hidden.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.translations ({ [key: string]: string })
: An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.
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:
Functions
Initialize
initialize(): void
Initializes the component's DOM and events.
Destroy
destroy(): void
Destroys the component's DOM and events.
Set Translations
setTranslations(translations?: { [key: string]: string; }): void
Changes the component's translations to the provided values and updates the DOM accordingly.
Set Correlation ID
setCorrelationId(value: string): void
Sets the component correlation ID (that will be given to the JavaScript API and sent to the backend) to the provided value.
Get Current Step
getCurrentStep(): StepType
Gets the step that is currently active in the wizard. StepType is:
"prepare" | "device-select" | "liveness" | "result";
Back
back(): void
Signals to the wizard to revert to the previous step.
Next
next(): void
Signals to the wizard to proceed to the next step.
Initialize Mobile Capture With ID
initializeMobileCaptureWithId(mobileId: string, baseUrl?: string, fullUrl?: string): void
Switches the Prepare component to mobile mode with a generated URL using the provided ID. Optionally, a base URL or a full URL may be provided to override default behavior. A base URL will continue to use the mobile ID, but replace the base URL with the provided value. A full URL will replace the entire generated URL with the value that was provided.
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 | SelfieCaptureResult)
onBeforeStepChanged(oldStep: string, newStep: string)
onAfterStepChanged(oldStep: string, newStep: string)
onLivenessResult(result: PassiveLivenessResult)
onLivenessError(error: string)
onLivenessCancelled()
onBeforeLiveness()
onSelfieResult(result: SelfieCaptureResult)
onSelfieError(error: string)
onSelfieCancelled()
onMobileCaptureStart()
onMobileCaptureCancel()
onViewPrivacyPolicy()
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:
The result parameter is of type PassiveLivenessResult
or SelfieCaptureResult
.
If the result is of type PassiveLivenessResult
, the following properties are included:
facingMode (string: user | environment | left | right)
: The direction/orientation of the camera that was used during capture.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 theincludeVideo
property is set to true in configuration options.
If the result is of type SelfieCaptureResult
, the following properties are included:
facingMode (string: user | environment | left | right)
: The direction/orientation of the camera that was used during capture.image (string)
: The selfie image that was analyzed, in data URI format (mime type and base64 data).video (blob)
: Blob data of the .webm video that was recorded for analysis. This property is only populated if video recording was enabled using theincludeVideo
property within the API configuration options.hash (string)
: The hash calculated on the image that is used to ensure that the image comes from a trusted source.
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:
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:
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 Selfie Result
This event bubbles the onSelfieResult
event up once it executes on the selfie capture component.
On Selfie Error
This event bubbles the onSelfieError
event up once it executes on the selfie capture component.
On Selfie Cancelled
This event bubbles the onSelfieCancelled
event up once it executes on the selfie capture component.
On Mobile Capture Start
This event bubbles the onMobileCaptureStart
event up once it executes on the prepare component.
On Mobile Capture Cancel
This event bubbles the onMobileCaptureCancel
event up once it executes on the prepare component.
On View Privacy Policy
This event bubbles the onViewPrivacyPolicy
event up once it executes on the prepare component.
Styling
The wizard component is structured a follows:
Since the wizard component has no visual elements by itself, no styling is necessary. Please style individual components housed within the wizard instead.
Translations
The translations provided to this component are in turn provided to the internal components hosted by it. Please see individual component translation sections for details on which translation keys are available to them, and also the localization section for an overview on available keys and how to make use of localization functionality.
Last updated