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.
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.
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.
Select Contents
then Upload
and select your redirect file. This should now appear in the Contents list, as below.
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.
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
Click apply which will restart the proxy and apply the changes.
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
.
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/
Run the below commands to create a react app and install Motor's engine package.
1npx create-react-app motor-test234cd motor-test5npm i @motor-js/engine
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.
1import React from 'react';2import ReactDOM from 'react-dom';3import App from './App';4import { Motor } from "@motor-js/engine";56ReactDOM.render(7<React.StrictMode>8<Motor9config={{10host: "motor.westeurope.cloudapp.azure.com",11secure: true,12port: 19077,13prefix: "motor",14appId: "ec13659f-2501-4345-899e-2d7d15fc5964",15redirectFileName: "auth.html",16qsServerType: "onPrem",17}}18>19<App />20</Motor>21</React.StrictMode>,22document.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.
1import { useList } from "@motor-js/engine"23const Filter = () => {45const dimension = ['Country'];67const {8listData,9} = useList({10dimension,11});1213console.log(listData);1415return (16<div></div>17);1819};