Silent Auth using qlik-embed and OAuth

[Ouadie]

On a previous blog post, we took a look at qlik-embed, Qlik’s newest embedding framework and saw how easy it is to get started using it to integrate content from Qlik directly in your web applications.

Today, we will see how to integrate qlik-embed UIs in your web applications that are connected to an OIDC-compliant IDP silently, without prompting users for authorization.

Before we get started, consider the following pre-requisites:

1- IDP:

• We need an IDP, in this blog post, I will use Auth0 which offers a Free starter plan that you can use to test out this functionality.

2- Qlik Cloud Tenant:

• We will configure the Qlik Cloud tenant with both the IDP provider and an OAuth Client.

3- Web App

• Our Web App will be served using Node.js, so make sure to have the latest node.js version installed

Step 1- Auth0 IDP Configuration

After creating an account on Auth0, create an Application and select “Single Page Web Application” as the application type.

Next,, navigate to Settings and take node of the following:

• Domain
• Client ID
• Client Secret
• OpenID Configuration URL (you will find this after you expand Advanced Settings under Endpoints)

We will need these values later on in the post.

In the allowed Callback URLs field, add the following URL:

https://{YOUR TENANT DOMAIN}.us.qlikcloud.com/login/callback

In Allowed Web Origins, add the following URL:

https://localhost:3000

 

Step 2- Qlik Cloud Tenant Configuration

In this step, we will do 2 things, first, we will create and configure an identity provider. Second, we will configure an OAuth client.

2.1- Identity Provider:

• Navigate to your Management Console > Identity Provider > Create New
• Choose OIDC as the type
• Choose Auth0 as the Provider
• Enter the OpenID Configuration URL from Step 1
• Enter the Client ID and Client Secret from Step 1
• Expand Advanced Options and turn ON Email Verified Override

• You can now Save and then Validate the IDP configuration, this will prompt you to authenticate to Auth0 (make sure you have an active user).

2.1- Configure the OAuth Client:

• Navigate to the Management Console > OAuth > Click on Create new

• Select Single-page app as the Client type

• Select user_default for scope

• Add the following as your Redirect URL

  https://localhost:3000/oauth-callback.html

• Add the following in the allowed origins:

  https://localhost:3000

• Once your Save, Copy the Client ID
  We will need it in the next step.

Step 3- Creating the Web Application

3.1- Server: We will use Express to spin up a small server and use the “express-openid-connect” as a middleware to configure Auth0 and require authentication when a user tried to access resources without being authenticated.

It will redirect the user to log in and then back to the site once successfully authenticated.

• the .env file should contain your Environment variables with the following:
  • HOST → localhost:3000
  • clientId → the client ID from Auth0 from step1
  • clientSecret → the client secret from Auth0 from step1
  • idpUri → the Domain from Auth0 from step1
  • sessionSecret → A random string
  • tenantUri → Qlik Cloud tenant
  • redirectPage → oauth-callback.html

3.2- Frontend

• index.html: In the public folder, the index.html contains the setup for qlik-embed. In the script tag, the following values need to be entered:
  • data-host: Qlik Cloud tenant
  • data-client-id: The OAuth client Id from Step 2.2
  • data-auto-redirect: set to True, this will remove the Authorize button that appears on qlik-embed UIs. It will silently redirect to Qlik Cloud if the user is authenticated.

• oauth-callback.html
  This file contains a script tag with a qlik-embed callback. Make sure to set up data-host to your Qlik Cloud tenant url.

The entire source code can be found in the following Github Repo:
https://github.com/ouadie-limouni/silent-auth-qlik-embed 

Run the project:

First, you will need to generate a self signed certificate to put in the certs folder so we can be able to open localhost as https.

You can do this using openssl by following the directions below:

1- run the following command:
openssl genrsa -out cert.key 2048

2- then run and hit enter on all the prompts:
openssl req -new -key cert.key -out cert.csr

3- then run:
openssl x509 -req -days 3650 -in cert.csr -signkey cert.key -out cert.crt

you will generate a cert.crt and cert.key files that you should put in the certs folder.

To compile and run the project:

• run: npm install
• then run: node index.js

Once you open https://localhost:3000, you will be automatically redirected to the Auth0 page.

After successfully authenticating in Auth0, you will be redirected to the web app and the qlik-embed UI will render the Qlik Sense app.

I hope you found this post helpful, for a more in depth tutorial and more, visit https://qlik.dev/embed/qlik-embed/