This is a sample showing how to use JWT authentication in a mashup in Qlik Sense Enterprise for Windows.
Environments:
- Qlik Sense Enterprise for Windows November 2018 and later
The way JWT authentication works in Qlik Sense in Windows is that it will validate the JWT token the first time it receives it and creates a session cookie in the browser.
Once the session cookie is set in the browser, the user is authenticated unless the session expires or he logs out.
Please note that JWT implementation is different in Qlik Sense for Windows and Qlik Sense on Cloud Services, this sample will not work for Qlik Sense on Cloud Services.
The sample has two files, jwtsample.html and jwtsample.js, just save the files in the same folder and update the values specific to your environment (highlighted in red below)
jwtsample.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">
const servernameprefix = "https://qlikserver1.domain.local/jwt";
function login() {
function isLoggedIn() {
return fetch(servernameprefix+"/qrs/about?xrfkey=0000000000000000", {
method: 'GET',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'X-Qlik-xrfkey': '0000000000000000',
'Authorization': 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6Ik...vfsfiNrGYeqx0amchtrXbn5gYA',
},
}).then(response => {
return response.status === 200;
});
}
return isLoggedIn().then(loggedIn => {
if (!loggedIn) {
alert('You are not logged in');
}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="jwtsample.js";
document.head.appendChild(script2);
}
});
}
login()
</script>
</head>
<body style="overflow: auto">
<div class="flex-container">
<div id="QV01" class="qvplaceholder"></div>
<div id="QV02" class="qvplaceholder"></div>
<div id="QV03" class="qvplaceholder"></div>
</div>
</body>
</html>
jwtsample.js
var config = {
host: "qlikserver1.domain.local",
prefix: "/jwt/",
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();
} );
var app = qlik.openApp('106614d5-09ed-4cc3-95bd-e0d4e6b7381d', config);
//get objects -- inserted here --
app.getObject('QV01','aUsNBCp');
} );
