Skip to main content

Changelog and Upgrade Guide

We have two versions – the Legacy Web SDK and the new Face Verify Web SDK.

Because we're moving towards phasing out the Legacy Web SDK, please upgrade to the new Face Verify Web SDK as soon as possible.

Face Verify Web SDK​

v2.0.0​

Release Notes​

  • The v2 Face Verify Web SDK introduces significant performance updates, improved accuracy, and streamlined user experience.

Added​

  • scan_again custom event: emitted when the user clicks on the "Scan again" button at the end of the flow.

Upgrade Guide​

v1.2.0​

Added​

  • Implemented new slot designs:
    • cancelled
    • error
    • grant_permission
    • interrupted

Fixed​

  • allow_landscape should not be configurable until we're able to fully assess landscape mode implications across all tablet devices

v1.1.1​

Added​

  • Users can now choose their webcam in full screen with a new camera selection button.

  • We've added a set of options for controlling overlay colours, styles, and the floating prompt:

    • floating_prompt_rounded_corners controls corners of floating prompt. Use false to remove border radius (default: true).
    • liveness_overlay_stroke_color controls colour of the overlay in Liveness (default: null).
    • liveness_floating_prompt_background_color controls colour of floating prompt background in Liveness (default: null).
    • gpa_not_ready_overlay_stroke_color controls colour of overlay in GPA in not ready state (default: null).
    • gpa_ready_overlay_stroke_color controls colour of overlay in GPA in ready state (default: null).
    • gpa_not_ready_floating_prompt_background_color controls colour of floating prompt background in GPA in not ready state (default: null).
    • gpa_ready_floating_prompt_background_color controls colour of floating prompt background in GPA in ready state (default: null).

Fixed​

  • Fixed countdown timer display in Kiosk Mode.
  • Fixed the close_button not being sized correctly in Safari.

v1.0.0​

Code changes from the Legacy Web SDK​

If you're coming from the Legacy Web SDK, the minimal changes that you need to do are:

  1. Point the SDK's <script> tag's src attribute to the new URL
  2. Change your event handler from SpfaceEvent() to attaching an event listener to your <sp-face> element like the example below:
    // ...
    let spFaceEl = document.querySelector("sp-face");

    ["cancelled", "connecting", "connected", "error", "failed", "interrupted", "multiple_cameras", "passed", "permission", "permission_denied", "progress", "ready", "started", "streaming", "streamed", "unsupported"].forEach((eventName) => {
        spFaceEl.addEventListener(eventName, e => {
            this.yourSpFaceHandler(e);
        });
    })
    // ...

And then handling it in a separate function:

    yourSpFaceHandler(e) {
        switch (e.type) {
            case "ready":
                // Handle ready event... perhaps a Toast or Snackbar?
                break;
            case "passed":
                // Call /verify/validate endpoint
                this.validateResult();
                break;
            case "failed":
                // Call /verify/validate endpoint
                this.validateResult();
                break;
            case "error":
                // Handle error event... perhaps a Toast or Snackbar?
                break;
            default:
                break;
        }
    },
  1. Remove everything in sp-face-slots – i.e., with the Legacy Web SDK, you had to implement the following:
<div id="sp-face-slots">
    <!-- UI has access to camera and is ready to begin verification -->
    <div slot="ready" class="m-1">
        <p class="has-text-grey-dark">Thank you. Please proceed to verify your identity.<br></p>
    </div>
    ...
</div>

And this is not needed anymore. The new Face Verify Web SDK will handle all the slots.

Legacy Web SDK​

v3.6.1​

Added​

  • Users can now choose their webcam in full screen with a new camera selection button.

  • We've added a set of options for controlling overlay colours, styles, and the floating prompt:

    • floating_prompt_rounded_corners controls corners of floating prompt. Use false to remove border radius (default: true).
    • liveness_overlay_stroke_color controls colour of the overlay in Liveness (default: null).
    • liveness_floating_prompt_background_color controls colour of floating prompt background in Liveness (default: null).
    • gpa_not_ready_overlay_stroke_color controls colour of overlay in GPA in not ready state (default: null).
    • gpa_ready_overlay_stroke_color controls colour of overlay in GPA in ready state (default: null).
    • gpa_not_ready_floating_prompt_background_color controls colour of floating prompt background in GPA in not ready state (default: null).
    • gpa_ready_floating_prompt_background_color controls colour of floating prompt background in GPA in ready state (default: null).

Changed​

  • Title: We've removed the default title - by default no content will be shown. A custom_title can still be set in SDK options.

Fixed​

  • Fixed countdown timer display in Kiosk Mode.
  • Fixed the close_button not being sized correctly in Safari.

Removed​

  • Removed failure_network_problem from the language strings as it's never used:
    //...
    "failure_motion_too_much_movement": "Please do not move during the face scanning process.",
    "failure_network_problem": "Sorry, network problem", // remove this
    "failure_user_timeout": "Your session has expired",
    //...

v3.5.3​

Additions & Changes​

  • When the Web SDK's <iproov-me> component is removed from the DOM:
    • we now clean up any open resources such as WebGL render loops and video feeds;
    • if this happens before an error or result event (i.e. before the user completes), the SDK now emits an error and invalidates the transaction with the error code integration_unloaded
    • We've added an integration_unloaded error code to handle the above unmounting case for our customers tracking.

Timeouts

  • We now handle timeout logic in a much clearer way: The SDK emits an error event with feedback code error_token_timeout if the user starts the session too late.

Language strings

If your integration customises language strings, we advise you to update those strings to implement the new message format described below:

  • When the SDK runs any of the following callbacks: error, cancelled, interrupted, permission_denied, no_camera or unsupported:
    • The language string mapping to the feedback event property is now displayed as the heading.
    • A new language string has been added for each feedback code, suffixed with _message.
    • Example: error_no_camera is the heading term, defaulting to "We couldn't find a camera connected to your device"
    • Example: error_no_camera_message is the text term displayed beneath the heading, defaulting to "A camera must be available to iProov."

In practice, this is what a sample language customisation string will now look like:

    // ...
    "error_network_message": "...",
    "error_no_camera": "No camera!",
    "error_no_camera_message": "A camera must be available to use Singpass Face Verification.",
    "error_no_face_found": "...",
    // ...
danger

If your integration specifies language strings but doesn't implement the new _message suffix, then we fall back to the old behaviour: heading using the error language term, and text using the corresponding feedback code's language term.

Other additions to language strings

  • iproov_ready_title to allow customisation of "Ready to iProov" message on the ready callback
  • iproov_ready_button to allow customisation of "Scan face" message for the ready callback button
  • error_token_timeout and error_token_timeout_message when sessions don't start within 10 minutes of token creation
  • Added error_device_motion_denied feedback code and language string, along with error_device_motion_denied_message language string.

:::details See all language strings change list (highlighted)

You can also download the language file here.

    // ...
    "enrol": "",
    "error": "",
    "error_asset_fetch": "",
    "error_asset_fetch_message": "",
    "error_camera": "",
    "error_camera_message": "",
    "error_camera_in_use": "",
    "error_camera_in_use_message": "",
    "error_camera_not_supported": "",
    "error_camera_not_supported_message": "",
    "error_camera_permission_denied": "",
    "error_camera_permission_denied_message": "",
    "error_device_motion_denied": "",
    "error_device_motion_denied_message": "",
    "error_device_motion_unsupported": "",
    "error_device_motion_unsupported_message": "",
    "error_fullscreen_change": "",
    "error_expired_token": "", // remove this
    "error_fullscreen_change_message": "",
    "error_token_timeout": "",
    "error_token_timeout_message": "",
    "error_invalid_token": "",
    "error_invalid_token_message": "",
    "error_network": "",
    "error_network_message": "",
    "error_no_camera": "",
    "error_no_camera_message": "",
    "error_no_face_found": "",
    "error_no_face_found_message": "",
    "error_not_supported": "",
    "error_not_supported_message": "",
    "error_server": "",
    "error_server_message": "",
    "error_too_many_requests": "",
    "error_too_many_requests_message": "",
    "failed": "",
    "failure_ambiguous_outcome": "",
    "failure_lighting_backlit": "",
    "failure_motion_too_much_movement": "",
    "failure_network_problem": "",
    "failure_user_timeout": "",
    "iproov_ready_title": "",
    "iproov_ready_button": "",
    "iproov_success": "",
    "label_camera_selector": "",
    "iframe_bridge_title": "",
    "prompt_too_right": "",
    "prompt_increase_screen_brightness": "",
    "prompt_poor_lighting_conditions": "",
    "prompt_calibrating": "", // remove this
    "sdk_unsupported": ""
    // ...

:::

v3.4.0​

What to change from 3.3.8
  1. Edit the language strings (download the language file here with the value pair removed)

Fixed​

  • UI - Fixed an issue where the UI scaled incorrectly when shifting between orientations and resizing the window
  • UI - We've reduced the "page jank" when resizing the UI, when the window resizes change or the phone rotates

Changed​

  • UI - We've smoothed out the "move closer" prompt to avoid toggling between two UI states.
  • Timeouts - We now handle timeout logic in a much clearer way:
    • The SDK emits an error event with feedback code error_token_timeout if the user starts the iProov session too late.
    • As before, if the user starts iProoving but doesn't stream imagery in time, the SDK emits a failure event with the feedback code failure_user_timeout.
  • Error messaging and language - We've increased the level of detail, see iproov-en.json for the new strings:
    • When the SDK runs any of the following callbacks: error, cancelled, interrupted, permission_denied, no_camera or unsupported:
      • The language string mapping to the feedback event property is now displayed as the heading.
      • A new language string has been added for each feedback code, suffixed with _message.
      • Example: error_no_camera is the heading term, defaulting to "We couldn't find a camera connected to your device"
      • Example: error_no_camera_message is the text term displayed beneath the heading, defaulting to "A camera must be available to use iProov"
    • If your integration specifies language strings but doesn't implement the new _message suffix, then we fall back to the old behaviour:
      • Heading using the "error" language term, and text using the corresponding feedback code's language term.

Added​

  • Genuine Presence Assurance - added reflection strength estimation capabilities
  • Language strings:
    • error_token_timeout and error_token_timeout_message when sessions don't start within 10 minutes of token create
    • iproov_ready_title to allow internationalisation of "Ready to iProov" on the ready callback
    • iproov_ready_button to allow internationalisation of "Scan face" for the ready callback button

v3.3.8​

Changes​

Start button

  • After the user clicks the start button, we now briefly set the start button innerHTML to the prompt_loading language string while the video starts.

Support checker

    • For both GPA and Liveness, we now require fullscreen to be enabled on the webpage.