Skip to main content

Qlik

cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
Ouadie
Employee
Employee
3 weeks ago

Silent Auth using qlik-embed and OAuth

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.

1.png

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.

2.png

3.png

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

 4.png

 

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

5.png

6.png

 

  • 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).

7.png

2.1- Configure the OAuth Client:

8.png

 

9.png

 

  • 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

10.png

 

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.

 

11.png

  • 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.

12.png

 

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.

 

13.png

14.png

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

15.png

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

262 Views
Subscribe by Topic