Showcase

Getting Started#

How Motor Authenticates#

Out of the box, Motor leverages Qlik's default windows authentication mechanism. This page will walk you through how to create a virtual proxy for this and get up and running.

Motor handles authentication to your on-premise site via re-direct. Once the user hits your mashup URL, they will be directed to a file, which you will have uploaded in the QMC's Content Library. Before loading this resource, the user will be prompted to log in. Once logged in, the user will hit the file and be redirected back to the mashup with the session cookie. As a result, the user will be authenticated to view all the content in the mashup.

Getting Started#

1. Uploading Your Redirect File#

Now that you understand how Motor authenticates, we can start by uploading a redirect file.

Start by creating a html file with the below contents.

html
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Document</title>
6
</head>
7
<body>
8
    <!-- The below URL should be where your mashup is hosted -->
9
    <script>location.href="http://localhost:3000"</script>
10
</body>
11
</html>

Next, navigate to the QMC of your Qlik Sense site and select Content libraries, select Default -> Edit.

On Prem Instructions 1

Select Contents then Upload and select your redirect file. This should now appear in the Contents list, as below.

On Prem Instructions 2

2. Create a new virtual proxy#

Next, we need to create a new virtual proxy, which will handle our connection from Motor.

In the QMC navigate to Virtual Proxies and select Create New. Then tick all the Properties on the right hand side of the screen, so they are all visible.

Add a description of 'Motor', prefix of 'motor' and Session cookie header name of 'X-Qlik-Motor'. Note that the prefix and session cookier header name must be unique.

Then, add the Central Node to the Load Balanceing node. Your set up will now look like the below screenshot.

On Prem Instructions 3

Next, complete the advanced section. Set the SameSite attributes to None and add the following to the Additional Response Headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

You then need to add your mashup URL to the whitelist (see localhot has been added below). You'll need to also whitelist your Qlik site's DNS name and public IP for this proxy to work correctly.

Please see an example below

On Prem Instructions 4

Click apply which will restart the proxy and apply the changes.

3. Linking the virutal proxy#

Finally, we need to link our new virtual proxy to the Central node. Select Proxies under the Associated Items tab on the right hand side. Then select the Central node and press Link.

On Prem Instructions 5

4. Test your virtual proxy#

Access your Qlik site appending /motor to the url, log on and test whether your site is working

For example, you will be accessing a URL similar to: https://motor.westeurope.cloudapp.azure.com/motor/

5. Set up a React app and install Motor.#

Run the below commands to create a react app and install Motor's engine package.

cmd
1
npx create-react-app motor-test
2


3


4
cd motor-test
5
npm i @motor-js/engine

5. Configure the Motor component#

At the root of your project wrap your application with the Motor component. This handles connection to the Qlik engine and is needed for any of the hooks or components to work.

The below example is connecting to our Qlik site, so yours will look similar.

Remember that the redirectFileName should match the file you have uploaded into the QMC and prefix to the name of the virtual proxy you have created.

jsx
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import App from './App';
4
import { Motor } from "@motor-js/engine";
5


6
ReactDOM.render(
7
  <React.StrictMode>
8
    <Motor 
9
      config={{
10
        host: "motor.westeurope.cloudapp.azure.com",
11
        secure: true,
12
        port: 19077,
13
        prefix: "motor",
14
        appId: "ec13659f-2501-4345-899e-2d7d15fc5964",
15
        redirectFileName: "auth.html",
16
        qsServerType: "onPrem",
17
      }}
18
    >
19
      <App />
20
    </Motor>
21
  </React.StrictMode>,
22
  document.getElementById('root')
23
);

Next, import the hooks or components into your project and you are good to go. In the below example we are extracting data from the useList hook. 

jsx
1
import { useList } from "@motor-js/engine"
2


3
const Filter = () => {
4
    
5
    const dimension = ['Country'];
6


7
    const {
8
      listData,
9
    } = useList({
10
      dimension,
11
    });
12
    
13
    console.log(listData);
14


15
    return (
16
    <div></div>
17
    );
18


19
};
Getting Started
How Motor Authenticates
Getting Started
1. Uploading Your Redirect File
2. Create a new virtual proxy
3. Linking the virutal proxy
4. Test your virtual proxy
5. Set up a React app and install Motor.
5. Configure the Motor component