Embed Qlik analytics with qlik-embed and OAuth impersonation

Overview

This tutorial shows how to easily deploy analytics into your solution with a seamless login experience for your users, even when your web app or portal does not have a backend identity provider for user authentication.

Note: This project is not production-ready. It is structured for learning and evaluation of qlik-embed with a simple OAuth impersonation configuration. For a production app:

This project leverages qlik-embed, qlik/api, and OAuth machine-to-machine impersonation capabilities. It showcases several embedding techniques, such as:

  • qlik-embed classic/app: full sheet embed supporting the native experience.
  • qlik-embed analytics/sheet: lightweight full sheet embed.
  • qlik-embed classic/chart: load legacy charts in a similar manner to classic/app.
  • qlik-embed field: lightweight way to render a list box containing dimension values.
  • qlik-embed selections: lightweight way to render a full Qlik Sense selections bar.
  • qlik-embed retrieval of hypercube data from an existing object.
  • qlik/api retrieval of hypercube data without an existing qlik-embed object.

What you’ll learn

By the end of this step-by-step tutorial, you will have:

  • Embedded Qlik Sense analytics into your solution using various qlik-embed techniques.
  • Configured OAuth impersonation for a seamless user login experience.
  • Deployed a working example of an embedded Qlik Sense app.

Prerequisites

  • Node.js version 18 or higher
  • A backend OAuth M2M client with scopes user_default and admin_classic, and allowed origins set to http://localhost:3000
  • A frontend OAuth M2M impersonation client with scope user_default, and allowed origins set to http://localhost:3000

Step 1: Set up your local project

In this step, you’ll set up a local development environment by cloning the GitHub repository or downloading the project files.

Method 1: Clone the GitHub repository

Clone the GitHub repository using the git clone command.

Terminal window
git clone https://github.com/qlik-oss/qlik-cloud-embed-oauth-impersonation.git

Method 2: Download and extract the project files

Alternatively, you can download and extract the project files.

  1. On the project’s GitHub page, click Code.
  2. Select Download ZIP.
  3. Extract the content of the ZIP file in the folder of your choice.

Step 2: Upload the demo Qlik Sense app

In this step, you’ll upload a demo Qlik Sense app that serves as the data source for the embedded analytics examples.

  1. Upload the demo Qlik Sense app to your tenant.
  2. Open the app and copy the ID (it will be a GUID similar to 946d5af4-e089-42d3-9ba7-1d21adb68472).

    Note: The project files contain some hard-coded values for this demo Qlik Sense app.

  3. Move the app into a new shared space.
  4. Edit the space configuration to provide Can view access to anyone in the tenant.

    Note: In a production deployment, ensure the logged-in user has access to the app.

Step 3: Set up environment variables

In this step, you’ll configure environment variables to securely store sensitive information and connect to the right resources.

  1. Rename the template.env file to .env.dev.
  2. Edit the .env.dev file with values that match your Qlik Cloud deployment:
    • OAUTH_BACKEND_CLIENT_ID and OAUTH_BACKEND_CLIENT_SECRET: enter the credentials obtained when you created the OAuth M2M client in the Administration activity center.
    • OAUTH_FRONTEND_CLIENT_ID and OAUTH_FRONTEND_CLIENT_SECRET: enter the credentials obtained when you created the OAuth M2M impersonation client in the Administration activity center.

      Note: Keep these secrets safe as they provide wide access to your tenant.

    • SESSION_SECRET: enter a random long string that will be used to sign the session ID cookie.
    • TENANT_URI: enter the hostname of the Qlik Cloud tenant against which the app will run, such as z29kgagw312sl0g.eu.qlikcloud.com.
    • APP_ID: enter the ID for the Qlik Sense app that you uploaded to your tenant (used for analytics/sheet, classic/app, analytics/chart and classic/chart examples). For more information about IDs for common Qlik Sense embedded resources, see Find IDs for embedding.
    • SHEET_ID: enter the sheet ID from the Qlik Sense app (used for the analytics/sheet and classic/app examples).
    • OBJECT_ID: enter the chart (object) ID from the Qlik Sense app (used for the analytics/chart and classic/chart examples).
    • FIELD_ID: enter the name of a field from the Qlik Sense app (used for the filter pane example).

      Important: Do not change the values for SHEET_ID, OBJECT_ID, and FIELD_ID if using the demo app from step 2.

Step 4: Install the dependencies and run the app

Now that the project is configured, you can install the required dependencies and run the app locally to view the embedded analytics.

  1. Open a terminal window and navigate to the folder containing the project files you extracted or cloned.

    Terminal window
    cd <project-folder>

  2. Install the project dependencies.

    Terminal window
    npm install

  3. Start the development server:

    Terminal window
    npm run dev

  4. Open http://localhost:3000 in your browser.

You should see your web app running locally with embedded Qlik Sense analytics rendered using various qlik-embed techniques.

Screenshot of a web app displaying embedded Qlik Sense analytics

Troubleshooting

  • If the app does not load, verify the environment variable values configured in step 3 and review any error messages in the terminal.
  • If you get authorization errors, verify the scopes configured for your OAuth M2M clients.

Next steps

Now that you have a working example, you can experiment with other qlik-embed parameters.

Was this page helpful?