OAuth0 M2M And Qlik Embed in Angular Application

[cristian_dalsanto]

Hi all,

Following this example https://github.com/qlik-oss/qlik-cloud-embed-oauth-impersonation, I'm trying to authenticate and use Qlik-embed sheets in my Angular application.

I created a Node.js backend application that correctly returns the token. When I get the token, I rewrite the header to import the Qlik-embed-components JavaScript file.

After doing that, I update the Qlik-embed parameters to obtain the Qlik sheet, but unfortunately, I get a blank page.

Inspecting the HTML result page, I can see that the iframe is imported, but there are several 401 errors from gmfe-api.js calls and there isn’t any websocket. Maybe I'm doing something wrong, but I can't understand what.

Has anyone else had the same issue?

Please let me know if there are any other details you would like to include or if you need further adjustments.

Many thanks,

Cristian

[DaveChannon]

Is that failing on the api/v1/users/me call? Which scopes do you have assigned to the OAuth client used to generate the impersonation token, and which scopes did you pass when requesting it (did you include user_default)?

[alex_colombo]

@cristian_dalsanto are you running your front end app in http? When I run it with http I have 401 errors, switching to https it works. Any communications to Qlik SaaS should be always in https.

@DaveChannon I've modified the server.js file for running it over https and this solve the issue

// Start the server
// Read SSL certificate and key files
const options = {
  key: fs.readFileSync(path.join(__dirname, "/certs", "localhost-key.pem")),
  cert: fs.readFileSync(path.join(__dirname, "/certs", "localhost.pem")),
};
// Create HTTPS server
const server = https.createServer(options, app);

server.listen(PORT, () => {
  console.log(
    `Server is listening on port ${PORT}! Go to https://localhost:${PORT}`
  );
});

[cristian_dalsanto · Accepted solution]

Hi @alex_colombo and @DaveChannon ,

Thank you for the support and sorry for the late reply.

The problem was related to the use of property binding.

Replacing the app-id and sheet-id properties of the qlik-embed component from TypeScript is not correct. Probably, the qlik-embed component sends requests to the server even if the properties are not set.

So, I changed my approach and, instead of using property binding, I write the entire component directly from TypeScript and append it to the div present in the view, and it seems to be working.

 const qlikEmbed = this.renderer.createElement('qlik-embed');
          this.renderer.setAttribute(qlikEmbed, 'ui', 'classic/app');
          this.renderer.setAttribute(qlikEmbed, 'app-id', environment.PAQlikAppID);
          this.renderer.setAttribute(qlikEmbed, 'sheet-id', this.sheetId);
          this.renderer.setAttribute(qlikEmbed, 'theme', 'my-theme');
          this.renderer.appendChild(sheetDiv, qlikEmbed);

[DaveChannon]

Good plan, that's how I typically do it too. I will document that as it is in https://replit.com/@withdave/qlik-embed-auto-objects when I get a chance on qlik.dev!