Authentication is required to access Qlik Sense resources such as visualizations that are used in mashups. This topic describes how to authenticate with Qlik Sense SaaS when using an external web server to host a mashup. In the example provided here, we will create JavaScript code that redirects the user to the login page of the tenant. After a successful login, the browser is redirected back to the web server where the mashup is rendered.
Creating the main JavaScript file
You should have the following information available:
- The URL of the Qlik Sense tenant.
- The app ID.
- The web integration ID for the host serving your mashup. See Managing web integrations for more information.
Add the following code to the file. We will name this file Helpdesk.js.
var config = {
host: 'abc.qlikcloud.com',
prefix: '/',
port: 443,
isSecure: true,
webIntegrationId: 'am4oV5pTOkqcCZLDxDUTzXyFdq2uQ29x'
};
//Redirect to login if user is not logged in
async function login() {
function isLoggedIn() {
return fetch("https://"+config.host+"/api/v1/users/me", {
method: 'GET',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'qlik-web-integration-id': config.webIntegrationId,
},
}).then(response => {
return response.status === 200;
});
}
return isLoggedIn().then(loggedIn =>{
if (!loggedIn) {
window.location.href = "https://"+config.host+"/login?qlik-web-integration-id=" + config.webIntegrationId + "&returnto=" + location.href;
throw new Error('not logged in');
}
});
}
login().then(() => {
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources",
webIntegrationId: config.webIntegrationId
} );
//Load js/qlik after authentication is successful
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 -- inserted here --
var app = qlik.openApp( '4a22ba23-7f8c-4ef0-9b84-955fa9247554', config );
//get objects -- inserted here --
app.visualization.get('uETyGUP').then(function(vis){
vis.show("QV01");
} );
app.visualization.get('xfvKMP').then(function(vis){
vis.show("QV02");
} );
app.visualization.get('rJFbvG').then(function(vis){
vis.show("QV03");
} );
app.visualization.get('PAppmU').then(function(vis){
vis.show("QV04");
} );
app.visualization.get('a5e0f12c-38f5-4da9-8f3f-0e4566b28398').then(function(vis){
vis.show("QV05");
} );
app.visualization.get('298bbd6d-f23d-4469-94a2-df243d680e0c').then(function(vis){
vis.show("QV06");
} );
} );
});
Creating your HTML file
Create an HTML file to display your mashup. For example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://abc.qlikcloud.com/resources/autogenerated/qlik-styles.css">
<script src="https://abc.qlikcloud.com/resources/assets/external/requirejs/require.js"></script>
<script src="Helpdesk.js"></script>
<style>
div.flex-container {
display: flex;
flex-wrap: wrap;
margin: 0 45px 45px 0;
}
div.qvobject {
flex: 1 1 auto;
height: 300px;
min-width: 400px;
margin: 45px 0 0 45px;
}
</style>
</head>
<body>
<div class="flex-container">
<div id="QV01" class="qvobject"></div>
<div id="QV02" class="qvobject"></div>
<div id="QV03" class="qvobject"></div>
<div id="QV04" class="qvobject"></div>
<div id="QV05" class="qvobject"></div>
<div id="QV06" class="qvobject"></div>
</div>
</body>
</html>
Testing the authentication flow
- Refresh your mashup in the browser.
The browser is redirected to the tenant login page.
- Log in to your tenant.
The browser is redirected back to your mashup. You are now authenticated and your mashup can access Qlik Sense resources.