Embed using Secure Authentication

On Studio you have an option to embed with secure user credentials in your application with user login. Embedding user credentials in your public link of the published app helps in making the link secure and only accessed by the authorized user, along with this it also helps in making the public link dynamic to distinctive users allowing it to have a broad range of authorized users.

The overall procedure to embed with secure authentication is carried out by auth token of type SSO which is generated uniquely by each published app. A curl request is made to an API endpoint where we pass the auth token along with all microapp as well as user-specific information like user email, allowed origins, and custom query string parameters, and then this will return an auth token that can be used in an iframe of the webpage to build your web app.

Embedded Authentication Steps

Generate an SSO Token

Curl request to generate the SSO authorization token

This is the first step, where your server-side code makes an API request to retrieve an authorization token of type SSO. The result of this request is a user-specific authorization token that will be used in step 2 to securely embed the microapp in your web application.

A curl request is made to the API endpoint including various information and properties of the published microapp.

  • Token: This is a unique token which is given to every published microapp in the studio. The token of the microapp that SSO token should have accessed to.
  • Email: The email address of the user.
  • Type: Put type as SSO
  • Properties: It is a query string to pass parameters such as the five variants of UTM parameters.
    1. utm_source
    2. utm_medium
    3. utm_campaign
    4. utm_term
    5. utm_content

These are default query string parameters; you can also add and use custom query string parameters in your app

Token Response

The response to the curl request, we get the SSO authorization token. This is the token that will be used in the next step (client-side) to embed the microapp in your web application in a secure way.

NOTE: Multi-tenant embed: In case you are embedding the microapp for showing multi-tenant data or you want to pass more user or other parameters, you can create your keys in the query string in settings and pass the keys and their values in the properties object.

This step is required to be done on the server-side for security reasons as you don’t want to expose your token to the client-side or else users will be able to make changes or grant themselves access to datasets of your microapp.

Embed the microapp

In this step, we’ll use the SSO authorization token from step 1 to securely embed the microapp in your web application.

Simply import the above script into your HTML page along with providing the token received from step 1. This will make your micro app run on the webpage.
Now, internally, the above library, using the API key should fetch User email, User Group, and all other custom query string parameters set by the admin user at the time of creating API key and set it to Studio Keywords -

  • USERNAME
  • USEREMAIL
  • USERGROUPS
  • QUERYSTRING parameters custom set

Embedding Application using Secure Authentication

Use an API platform to perform the first step and generate the SSO token. We will be using Postman Service here to perform a POST request with application token and account as well as micro-app specific details.

Once you have retrieved the SSO token move forward with the second step.
Copy the script and include it on the head tag of the page. Then copy the web component, put it in as a native HTML tag, and include the SSO token it which you retrieved earlier.

Before publishing your microapp, set up the Query String Parameters which you are going to pass with the token request. In this case, we have uid and tracking_ID. So I have already set up these two parameters.

Click on Save Query String and set these values in read-only text fields and numeric control for tracking_ID and uid respectively.

image

APP Preview

You can notice that the value of tracking_ID and uid is the same as what we have passed with our query string while making the request.