Qlik Sense on Windows: How to use mashups with SAML authentication

Sonja_Bauernfeind — Tue, 23 Feb 2021 09:16:11 GMT

This is a sample on how to use SAML authentication with Qlik Sense mashups that are externally hosted (Not hosted in Qlik Sense).

Important note: Due to how the SAML redirection workflow works in Qlik Sense for Windows, it is necessary to use the Stub page below in order to ensure that the browser does not block the redirection requests.

Environments:

Qlik Sense Enterprise for Windows June 2017 and later

The easiest to perform SAML authentication with a mashup is to create a stub page hosted in a content library in the Qlik Sense QMC that would be responsible for redirecting to the mashup after the authentication is completed.

In the following example:

Qlikserver1.domain.local is the Qlik Sense server
Qlikserver2.domain.local is the web server where the mashup is hosted

Create an HTML file called stubpage.html with the following content:

stubpage.html

<!doctype html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <script>
        var goto = 'https://qlikserver2.domain.local/samlsample/samlsample.html';
        window.open(goto, '_self');
    </script>
</body>
</html>

In the Qlik Sense QMC > Content Library, create a new content library, and make it available to all users.
Upload stubpage.html to the content library and copy the link from the column "URL path"

Create the HTML page for the mashup, with this sample, if the user access the mashup first, it will get redirected to stubpage.html, and redirected to the Identity Provider for authentication.

samlsample.html (hosted on https://qlikserver2.domain.local/samlsample/samlsample.html)

<!doctype html>
<html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Qlik Sense Mashup</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="cleartype" content="on">
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            margin: 0 45px 45px 0;
        }
    
        .qvplaceholder, .qvobject {
            flex: 1 1 auto;
            height: 300px;
            min-width: 400px;
            margin: 45px 0 0 45px;
        }
    </style>
    <script type="text/javascript">
        function login() {
          const servernameprefix = "https://qlikserver1.domain.local/adfs";
          function isLoggedIn() {
            return fetch(servernameprefix+"/qrs/about?xrfkey=0000000000000000", {
              method: 'GET',
              mode: 'cors',
              credentials: 'include',
              headers: {
                'Content-Type': 'application/json',
                'X-Qlik-xrfkey': '0000000000000000'
             },
             redirect: 'manual',
            }).then(response => {
                console.log(response.url);
                return response.status === 200;
            });
          }
          return isLoggedIn().then(loggedIn => {
            if (!loggedIn) {
              alert('You are not logged in');
              
              window.location.href= servernameprefix+"/content/sample/stubpage.html";
            }else{
                //load qlik-styles.css
                var style1 = document.createElement("link");  // create a link DOM node
                style1.type = "text/css";
                style1.rel = "stylesheet";
                style1.href = servernameprefix+"/resources/autogenerated/qlik-styles.css";
                document.head.appendChild(style1);
                
                //load requirejs
                var script = document.createElement("script");  // create a script DOM node
                script.async=false; //this is to ensure that requirejs is loaded before jwtsample.js otherwise it will fail.
                script.defer=false;
                script.src = servernameprefix+"/resources/assets/external/requirejs/require.js";
                document.head.appendChild(script);
                //load the mashup js file
                var script2 = document.createElement("script");  // create a script DOM node
                script2.async=false;
                script2.defer=false;
                script2.src = "samlsample.js";
                document.head.appendChild(script2);
            }
          });
        }
        login()
      </script>
</head>
<body style="overflow: auto">
<div class="flex-container">
    <div id="QV01" class="qvobject"></div>
    <div id="QV02" class="qvplaceholder"></div>
    <div id="QV03" class="qvplaceholder"></div>
</div>
</body></html>

samlsample.js (hosted on https://qlikserver2.domain.local/samlsample/samlsample.js)

var config = {
	host: "qlikserver1.domain.local",
	prefix: "/adfs/",
	port: 443,
	isSecure: true
};
require.config( {
	baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
} );

require( ["js/qlik"], function ( qlik ) {
	qlik.on( "error", function ( error ) {
		$( '#popupText' ).append( error.message + "<br>" );
		$( '#popup' ).fadeIn( 1000 );
	} );
	$( "#closePopup" ).click( function () {
		$( '#popup' ).hide();
	} );

	//open apps 
	var app = qlik.openApp('106614d5-09ed-4cc3-95bd-e0d4e6b7381d', config);

	//get objects
	app.getObject('QV01','upJSPc');

} );

Now when you access your mashup at https://qlikserver2.domain.local/samlsample/samlsample.html, you will get redirected to authenticate if you are not logged in yet, and then redirected back to your mashup once authenticated.

Re: Qlik Sense on Windows: How to use mashups with SAML authentication

surya_30 — Tue, 12 Jul 2022 11:49:24 GMT

Hi, How does this work, or what is the equivalent for Azure AD-based SSO SAML of QLiksense on Azure VM ?

Re: Qlik Sense on Windows: How to use mashups with SAML authentication

surya_30 — Tue, 12 Jul 2022 11:50:34 GMT

Sonja_Bauernfeind

Re: Qlik Sense on Windows: How to use mashups with SAML authentication

Sonja_Bauernfeind — Wed, 13 Jul 2022 07:09:11 GMT

Hello @surya_30

Please clarify your question, as we are not certain currently what it is you are attempting to achieve. This document has been written as an example for SAML (which also applies to your Azure AD-based SSO SAML query).

If you are looking for assistance in getting this off the ground and aren't certain how to apply this article, I recommend posting it in our Integrations forum for Qlik Sense. And if you are looking for a direct engagement, then our Professional Services can assist.

All the best,
Sonja

article Qlik Sense on Windows: How to use mashups with SAML authentication in Official Support Articles

Qlik Sense on Windows: How to use mashups with SAML authentication

Re: Qlik Sense on Windows: How to use mashups with SAML authentication

Re: Qlik Sense on Windows: How to use mashups with SAML authentication

Re: Qlik Sense on Windows: How to use mashups with SAML authentication