topic Re: How to obtain CSRF token from Qlik Cloud in Integration, Extension & APIs

How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Mon, 04 Nov 2024 15:45:07 GMT

Hi all,

I’m currently migrating a mashup from Qlik On-Premise to Qlik Cloud.

My mashup uses Enigma.js and Nebula.js for visualizations, but I’m running into issues while trying to obtain the CSRF token. I’ve tried two different approaches:

1. Qlik Cloud with standard Identity Provider and frontend with Keycloak as Identity Provider

Here’s the scenario:

The frontend authenticates users through Keycloak.
The frontend calls a Node.js API, passing the Qlik userId as parameter, and retrieves a web token via OAuth impersonation.
After obtaining the web token, the frontend calls a separate Node.js API to retrieve the CSRF token. However, this results in a 404 error ("token not found").

2. Qlik Cloud with Keycloak as Identity Provider

In this scenario:

The frontend authenticates users through Keycloak.
The frontend calls a Node.js API, passing the Keycloak session token to obtain the CSRF token. Unfortunately, I’m still getting the same 404 error.

I suspect the issue might be that the /api/v1/csrf-token endpoint isn’t designed to issue a CSRF token when a web token is used as an authorization bearer token. The documentation includes an example with an API key, but that solution isn’t feasible in my case because multiple users need access to the mashup.

Can anyone offer some guidance on this?

Thanks for the support!

Cristian

Re: How to obtain CSRF token from Qlik Cloud

mpc — Tue, 05 Nov 2024 09:06:50 GMT

Hi,

Following this post, you're right, you cannot use bearer auth token . Solved: How can i fetch a csrf token with an access token? - Qlik Community - 1900614

Regards

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Tue, 05 Nov 2024 14:21:00 GMT

Hey @cristian_dalsanto , if you are using a M2M impersonation token you should not need to use CRSF token. What is your goal? You want to get a CSRF token for doing what?

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Tue, 05 Nov 2024 14:34:17 GMT

Hi @alex_colombo

The M2M impersonation token works well when embedding visualizations using the Qlik-embed framework—I’ve successfully used it in a different mashup scenario.

Here, though, I need to establish a WebSocket connection to Qlik Cloud, and from what I read in the documentation, a CSRF token is required for this connection. Am I mistaken? Is it possible to create a WebSocket connection directly using the M2M impersonation token? If so, could you please point me to any documentation on that?

Thank you very much for your support!

Cristian

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Tue, 05 Nov 2024 15:34:13 GMT

You are referring to this article about CRSF token? This is needed only for onprem version of the product, and not Qlik Cloud.

What are you using for creating WebSocket connection? enigma.js, qlik/api or custom code? In any case, you should be able to use M2M impersonation token without CSRF token. Please give it a try.

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Tue, 05 Nov 2024 17:38:35 GMT

I create the web socket using enigma.create method as the following code:

I tried 2 different scenario.

1. Qlik and Mashup using the same Identity provider (keycloak).

2. Qlik with standard IdP and Mashup under Keycloak. In this case, before creating the web socket I retrieve a M2M impersonation token from a node.js backend. But I don't know how to pass it to the enigma.create method...

Any suggestions would be greatly appreciated.

Thanks

Cris

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Wed, 06 Nov 2024 12:56:13 GMT

If you are using enigma.js, just update enigma at latest version and enigma will take care about CRSF token. For M2M impersonation, try to attach it to websocket header. For using websocket header try to do this like did it here.

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Tue, 12 Nov 2024 10:17:39 GMT

Thanks Alex for the support.

However, despite trying different methods, I still can't find the right way to authenticate my WebSocket without going through the login process.

I'll try to describe my situation more clearly:

My mashup is an Angular application that uses Keycloak for security management. When the application starts, during the initialization phase, a Keycloak service checks if I'm authenticated. If not, it redirects me to the Keycloak login page. After logging in, I can obtain the Qlik Cloud user ID among the attributes of the logged-in user.

With this user ID, I can call a backend service (node.js) that, through an M2M OAuth2 impersonation, provides me with an access token.

In my previous mashup, where I used qlik-embed, I passed this web token directly to Qlik Embed following this example:

and everything worked fine.

In this case, however, I need to interact with the engine, as I require variables and hypercubes. So I need to establish a WebSocket connection to the engine. But I can’t find a way to do this without having to go through Qlik Cloud’s login again.

Am I perhaps using the wrong approach? Is enigma.js on the client side maybe not the best choice?

I’ve also looked at @qlik/api, which does roughly the same thing, but even there, authentication via token isn’t supported (at most, @qlik/api accepts an API key, which isn’t suitable for my case).

Do you have any suggestions for me?

Many Thanks

Cristian

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Tue, 12 Nov 2024 11:40:26 GMT

Ok now it is more clear. The right approach is to use qlik/api and using Engine APIs. I know, it is not documented yet but you can use OAuth M2M token with qlik/api. Below how to do it (replace oauthToken variable with your M2M token):

const config = { authType: "oauth2", host: configParams.tenantHostname, clientId: configParams.oAuthClientId, getAccessToken: oauthToken }; qlikApi.auth.setDefaultHostConfig(config); //Open an app using qix const appSession = qlikApi.qix.openAppSession(configParams.appId); // get the "qix document (qlik app)" const app = await appSession.getDoc();

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Tue, 12 Nov 2024 14:35:20 GMT

Thanks Alex,

I was looking for a method just like this.
I’ve just implemented it as follows:

async function getEnigmaSessionAndApp2(webToken: string) { const hostConfig: any = { authType: "oauth2", host: environment.QLIK_PARAMETERS.QLIK_URL, clientId: environment.QLIK_PARAMETERS.CLIENT_ID, getAccessToken: webToken } auth.setDefaultHostConfig(hostConfig); const session = qix.openAppSession({ appId: environment.QLIK_PARAMETERS.QLIK_APPID }); const app = await session.getDoc(); return [session, app]; }

Unfortunately, I’m getting a 401 error when I do

session.getDoc();

as if the token were invalid...
Am I missing something?
And here’s the returned error.

Thanks,

Cris

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Tue, 12 Nov 2024 16:38:50 GMT

Are you using in qlik/api configuration the same OAuth client id use in M2M impersonation token request?

What are the scopes set in OAuth client in Management Console? Can you share the config here?

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Tue, 12 Nov 2024 17:47:28 GMT

yes,

I'm usign the same OAuth client:

I use the same client in a second mashup (Qlik-embed) and it's working fine

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Wed, 13 Nov 2024 08:43:36 GMT

Which scope you are using when you are requesting M2M token? Which userid you are using? Did you check if that userId has access to the app you are trying to open?

Another thing, try to avoid mixed content, I see you have your webapp running on http but Qlik SaaS uses https. Please change your local websever to https.

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Wed, 13 Nov 2024 13:28:37 GMT

I tested three different scopes: 'user_default,' 'admin_classic,' and 'apps,' but received the same error each time.

The token impersonates my Qlik user, which has full access to the space/app.

I also tried running the application on a test web server, but the same error occurs. The web server is whitelisted in the OAuth client configuration.

Please note that a different mashup, which uses the same service to obtain the token through the Qlik-embed framework, works fine on both my laptop and the test web server with the same token.

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Thu, 14 Nov 2024 14:53:46 GMT

When you are setting qlik/api configuration, M2M OAuth token has to be defined as string. Are you using a function as you are doing with qlik-embed?

To be clear, in below code getAccessToken has to be the token and not the function for retrieving the token

const config = { authType: "oauth2", host: configParams.tenantHostname, clientId: configParams.oAuthClientId, getAccessToken: 'ejshajeid.......' };

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Thu, 14 Nov 2024 17:19:02 GMT

Correct. I do exactly that

This is my backend API. As you can see accessToken is returned from qlikAuth.getAccessToken and that's a string. As I said before I tried 3 different scopes: 'user_default,' 'admin_classic,' and 'apps,' but received the same error each time

// Get access token (M2M impersonation) for use in front-end by qlik-embed using qlik/api app.post("/oauth/access-token", async (req, res) => { console.log('Retrieving access token for', req.body.userId + ' ----------------------------'); const userId = req.body.userId; if (userId != undefined && userId.length > 0) { try { const accessToken = await qlikAuth.getAccessToken({ hostConfig: { ...config, userId, scope: "apps", }, }); console.log("Retrieved access token for: ", userId, 'token', accessToken); res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'POST'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); res.send(accessToken); } catch (err) { console.log(err); res.status(401).send("No access"); } } });

in the frontend I get the token and I use it to open a session:

async function getEnigmaSessionAndApp2(userInfo: any, http: HttpClient) { const url = `${environment.JWT_PROVIDER}/oauth/access-token`; const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); const body = { 'userId': userInfo.QlikSUb }; const webToken: string = await firstValueFrom(http.post(url, body, { headers, responseType: 'text' })); const hostConfig: any = { authType: "oauth2", host: environment.QLIK_PARAMETERS.QLIK_URL, clientId: environment.QLIK_PARAMETERS.CLIENT_ID, getAccessToken: webToken } auth.setDefaultHostConfig(hostConfig); const session = qix.openAppSession({ appId: environment.QLIK_PARAMETERS.QLIK_APPID }); const app = await session.getDoc(); return [session, null, app]; }

But when I try to open the session I get the error:

In the network section of Chrome I can't see any web socket...

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Fri, 15 Nov 2024 14:25:00 GMT

Ok, your code is working on my end.

Looking better at the errors in console, those errors are refrring to your qlik-embed code. Are you using qlik-embed somewhere? You told me that you are trying to use qlik/api.

Seems that you are trying to use qlik-embed with M2M impersonation token and you are defining the function for evaluated data-get-access-token property in the wrong way. Could you please share your code for qlik-embed? Function for setting data-get-access-token has to be set in html head tag, before your script which will create qlik-embed configuration.

Re: How to obtain CSRF token from Qlik Cloud

cristian_dalsanto — Fri, 15 Nov 2024 16:08:25 GMT

Sorry, I don't understand. I'm not using Qlik-embed in any module of my application. I used it in another mashup, but this is a new project where I use "Qlik/api" to open the document and Nebula.js to create the visualizations.

Just to be sure, I double-checked: none of the HTML components contain the Qlik-embed tag, and I haven't imported the framework either.

The error in the console appears when I execute the following:

const app = await session.getDoc();

In the image below I stopped the execution at openSession step:

the next step should be the the getDoc, but at this point, I get the error, even though all the parameters are set correctly:

As you can see I got the error and never reached the breakpoint at 273 line.

Here, network elements filtered by "qlik". I think qmfe-api are related to "Qlik_api" api

Re: How to obtain CSRF token from Qlik Cloud

alex_colombo — Fri, 15 Nov 2024 16:20:25 GMT

Which qlik/api version you are using?

Anyway. Can't help more than this here. For reproduce the error on my end I need to connect to your tenant and run the code on my end. For this I need tenant url, OAuth client id and client secret for generate token and userId. Alternatively, you could send me (with private message) a valid M2M OAuth token and then I can test it

Re: How to obtain CSRF token from Qlik Cloud

SteveAO — Fri, 07 Feb 2025 18:34:53 GMT

Peace, @cristian_dalsanto . Ensure you do use a function for your getAccessToken in the setDefaultHostConfig. For example:

import { auth, qix } from "@qlik/api";

auth.setDefaultHostConfig({
    host: import.meta.env.VITE_SENSE_BASE_URI,
    authType: "Oauth2",
    clientId: import.meta.env.VITE_OAUTH_CLIENT_ID,
    getAccessToken: async () => {
        // console.log('Bearer token string sent from the backend', token);
        return token;
    }
});
const app = await qix
.openAppSession({
appId: appId,
})
.getDoc();

For further details: https://lab.pendraco.com/-/snippets/43