Implementation Through An Iframe

Initial Steps

To enable the integrator client to execute the entire gateway process directly from their corporate domain, MobbID Gateway can be seamlessly integrated using an <iframe>. This requires only the inclusion of an HTML <iframe> tag within their web page.

Example Code

<iframe allow="camera; microphone" src="{{ gatewayUrl }}"></iframe>

Key Details

1. src Attribute

   • The src attribute in the <iframe> tag must contain the gatewayUrl, which is obtained by the integrator client’s server.

2. allow Attribute

   • The allow attribute must include the permissions for camera and/or microphone. These permissions are essential for requesting user consent to access the device's camera and/or microphone.

   Example:

   • allow="camera; microphone"

With this configuration, end users can initiate the gateway process directly within their browser, ensuring a secure and smooth integration experience.

Informative events

These events report an event that occurred during the process, and are merely informative.

• ProcessStarted: The user has started the process.
• ProcessFinished: The user has completed the process, either because he has done all the steps correctly or because an error has occurred during the process.

Example code:

// Allow window to listen for a postMessage
window.addEventListener("message", (event) => {
  // Always verify the sender's identity using the origin and source properties to avoid security leaks
  if (event.origin !== gatewayUrl) return;

  const { processId, type, value } = event.data;

  const { name } = value; // Info type

  if (type === "Info") {
    switch (name) {
      case "ProcessStarted":
        // The process has started
        break;

      case "ProcessFinished":
        // The process has finished
        break;

      default:
        break;
    }
  }
});

At the end of the process, the MobbID Gateway component will perform two actions:

1. Send from the <iframe> to the parent page an event of type info with the value "ProcessFinished".

2. Make an automatic redirect to the redirectUrl if exists in the client's configuration.

Error events

These events report an error that occurred during the process, especially at the beginning, and make it impossible to continue the process.

• BiometricError: A problem occurred during the biometric operation process.
• ConnectionError: The user's device does not have a stable network connection or is not available.
• HardwareError: The user's device does not have a camera and/or microphone (if necessary), or is not available for use due to a hardware problem.
• PermissionError: The user has not granted access permissions to the camera and/or microphone (if required).
• SupportError: The process cannot be completed because an unexpected error has occurred (contact us to report it).
• TimeoutError: The process has been canceled because the user has exceeded the maximum time set.
• TokenError: The processId has expired and is no longer valid.

Example code:

// Allow window to listen for a postMessage
window.addEventListener("message", (event) => {
  // Always verify the sender's identity using the origin and source properties to avoid security leaks
  if (event.origin !== gatewayUrl) return;

  const { processId, type, value } = event.data;

  const { extraInfo, message, name } = value; // Error type

  if (type === "Error") {
    switch (name) {
      case "ConnectionError":
        // Suggest the user to check the network settings of the device
        break;

      case "HardwareError":
        // Suggest the user to perform the process with another device
        break;

      case "PermissionError":
        // Ask the user to allow access to the camera and/or microphone
        break;

      case "TimeoutError":
        // Get a new token and reload the iframe
        break;

      case "TokenError":
        // Get a new token and reload the iframe
        break;

      case "SupportError":
        // Contact support
        break;

      default:
        // Get a new token and reload the iframe
        break;
    }
  }
});