Authentication using browser redirection with Qlik Cloud

Note: Where possible, use qlik-embed rather than this framework. Review the tutorial embedding Qlik Analytics using qlik-embed web components.

Third-party cookies: This tutorial leverages cookies for auth, which are blocked by some browser vendors. Please use an OAuth solution where possible, which doesn’t leverage cookies.

Authentication is required to access Qlik Sense resources such as visualizations that are used in mashups. This topic describes how to authenticate with Qlik Cloud when using an external web server to host a mashup. In the example provided here, you 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 Cloud 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. You will name this file helpdesk.js.

Code sample (helpdesk.js):

var config = {
    host: '<TENANT_URL>',
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '<WEB_INTEGRATION_ID>'
};

//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( '<APP_ID>', config );
       
        //get objects -- inserted here --
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV01");
        } );
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV02");
        } );
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV03");
        } );
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV04");
        } );
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV05");
        } );
        app.visualization.get('<OBJECT_ID>').then(function(vis){
        vis.show("QV06");
        } );
    } );
});

Creating your HTML file

Create an HTML file to display your mashup. For example:

Code sample (helpdesk.html):

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://<TENANT_URL>/resources/autogenerated/qlik-styles.css">
<script src="https://<TENANT_URL>/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 (open helpdesk.html).

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 Cloud resources.