topic Re: OAuth0 M2M And Qlik Embed in Angular Application in Integration, Extension & APIs

OAuth0 M2M And Qlik Embed in Angular Application

cristian_dalsanto — Fri, 28 Jun 2024 18:20:08 GMT

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

Re: OAuth0 M2M And Qlik Embed in Angular Application

Dave_Channon — Tue, 02 Jul 2024 08:25:08 GMT

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)?

Re: OAuth0 M2M And Qlik Embed in Angular Application

alex_colombo — Wed, 03 Jul 2024 08:17:50 GMT

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

@Dave_Channon 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}` ); });

Re: OAuth0 M2M And Qlik Embed in Angular Application

cristian_dalsanto — Mon, 15 Jul 2024 08:19:49 GMT

Hi @alex_colombo and @Dave_Channon ,

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);

Re: OAuth0 M2M And Qlik Embed in Angular Application

Dave_Channon — Mon, 15 Jul 2024 19:12:31 GMT

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!