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.
