iFrame integration Guide

This guide will help you to integrate your application using TruConnect.

What is an iFrame?

According to MDN docs: The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

In Truora, we allow you to use this feature to integrate the validation process using a flow from TruConnect in your application.

iFrame integration

To integrate your application using TruConnect via Web, you need to create an URL link to do the redirect from your process, as is shown in the following steps:

  1. Create a flow using TruConnect's flow builder as you can see in the guide to create a Flow using our flow builder or via API.

    NOTE:

    • In the event that you use our flow builder, you must select Web and app in the Select comunication channel option while creating the flow.
    • Using our flow builder, you can customize your flow's look and feel and branding. Select the Configuration option in the flow builder and then select the Brand Theme option. Branding flow example

  2. Generate a web token via API to link the flow from the previous step with the URL https://identity.truora.com/?token=api_key and perform the validations.

    NOTE:

    • Replace api_key with the value obtained in the API response.
    • The Web Integration Tokens have a 2 hours shelf life by default.

  3. Include the iFrame tag within the HTML page where you want to visualize our flow:

<iframe 
src="https://identity.truora.com/?token=api_key" 
allow="camera" 
width="·· px" 
height="·· px">
</iframe>

Replace:

  • api_key with the value obtained in the previous step.

  • width and height with the desired values in px.

    NOTE:

    • Adding the allow="camera" attribute allows the user to use the camera to take a picture of the document.
    • Before you embed the iFrame in your site, you must have your application registered in Truora, this means let our team know what is the URL where you are going to embed the iFrame. If you don't have your application registered yet, please contact your integration manager and give them this information.

Security considerations

The iFrame integration is a secure way to integrate TruConnect in your application. However, you must take into account the following security considerations:

  • Review your Content Security Policy (CSP).
  • Employ defensive code in the UI to ensure that the current frame is the most top level window.
  • Properly set authentication cookies with SameSite=Strict (or Lax) and Secure flags.

We strongly recommend you to review the following resources to learn more about security considerations when using iFrames: