How to obtain CSRF token from Qlik Cloud

[cristian_dalsanto]

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

[alex_colombo]

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?

[cristian_dalsanto]

yes,

I'm usign the same OAuth client:

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

[alex_colombo]

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.

[cristian_dalsanto]

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.

[alex_colombo]

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.......'
  };

[cristian_dalsanto]

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

[alex_colombo]

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.

[cristian_dalsanto]

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

[alex_colombo]

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