Onboarding links into WebView and iFrame

This section will support the integration of Onboarding links into WebView and iFrame.

WebView

Android

In order for web Onboarding integrations that use WebView for Android to function properly, it is necessary that setDomStorageEnabled is set as true. Example below:

myWebView.getSettings().setDomStorageEnabled(true);

iOS

In order for web Onboarding integrations that use WKWebView for iOS to function properly, it is necessary to customize the configuration to allow media playback without request user's action and to reproduce the media inline. Example below:

let webView: WKWebView

init() {
    let audioVisualMediaType: WKAudiovisualMediaTypes = []
    let configuration = WKWebViewConfiguration()
    configuration.mediaTypesRequiringUserActionForPlayback = audioVisualMediaType
    configuration.allowsInlineMediaPlayback = true

    webView = WKWebView(frame: .zero, configuration: configuration)
}

Other platforms

On other platforms, e.g. Flutter and React Native, you should look for WebView's configurations to allow media playback without require user gesture and to reproduce camera video inline, not in the native full-screen controller.

iFrame

To integrate Onboarding into an iFrame, use the example code below. Note that you only need to give access permission to the device's camera in the allow attribute and also use geolocation to capture the location for the trust platform dashboard.

<iframe src="https://cadastro.io/:token" allow="camera;geolocation"></iframe>

Onboarding service may not work within an iFrame, if the user enters the website while Block third-party cookies is enabled on their browser. This typically occurs when user enters through an anonymous browser session.

Emitted Events

For Onboarding to communicate with the iFrame or WebView, it emits events using window.postMessage(). Currently, we have event support for iFrame, Flutter* and React Native.

Listening to message event:

window.addEventListener('message', function (e) {
  ...
  console.log(e.data); 
  ...
}, false)

Return Example:

{
  code: "ONBOARDING_FINISHED",
  response: {
    executionId: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
}

The event you should listen to will always be the "message" because we are interacting through an iframe with the onboarding link using the postMessage specification

How to use a specific event code from Onboarding:

window.addEventListener('message', function (e) {
  ...
  if(e.data.code === "SDK_BACK_CAPTURE_STARTED"){
    console.log("The capture was started");
  }
  ...
}, false)

If using Web Message Listeners with Flutter, then InAppWebView should be used, with jsObjectName set as FutterOnboardingChannel

The events that can be issued by Onboarding are as follows:

• SDK_CAPTURE_INVALID: Will be triggered when capture is invalid, such as an incorrect document or poor image quality. (Document Detector and Passive Face Liveness)

• SDK_CAPTURE_FAILED: Some other failure in the capture. (Document Detector and Passive Face Liveness)

• SDK_CAPTURE_RESULT: Result of the capture. (Liveness and FaceAuthenticator)

• SDK_BACK_CAPTURE_STARTED: Started capturing the backside of the document (Document Detector)

• SDK_FRONT_CAPTURE_STARTED: Started capturing the front of the document (Document Detector)

• DD_CAPTURE_FINISH: Document Detector capture step in onboarding completed (If it has both sides, it will only be triggered when both sides are captured) in fact it is only triggered when you are already moving on to the next step, if everything is ok with the capture

• ONBOARDING_FINISHED: Onboarding finished