Retrieve and use OAuth impersonation tokens

Use case

When the Qlik Cloud tenant and the web application containing the embedded analytics do not have the same Identity Provider.

If you haven’t created an OAuth impersonation client in your Qlik Cloud tenant, do that before using this example. Learn how to create an OAuth impersonation client

Example

In this Node.js example, a post request is added to the web application backend to handle requests to Qlik Cloud for an access token. The web application frontend contacts the access token endpoint on the backend, which returns the access token to the frontend client browser. This enables the rendering of embedded analytics.

Backend using @qlik/api

import { auth as qlikAuth, users as qlikUsers } from "@qlik/api";

const qlikConfig = {
  authType: "oauth2",
  host: "https://tenantName.region.qlikcloud.com",
  clientId: "OAuth impersonation client Id",
  clientSecret: "OAuth impersonation client secret",
};

//set the host configuration to talk to Qlik tenant
qlikAuth.setDefaultHostConfig(qlikConfig);

//access token method the frontend will call
app.post("/access-token", requiresAuth(), async (req, res) => {
  const userId = req.session?.user?.id;
  try {
    //call to Qlik Cloud tenant to obtain an access token
    const accessToken = await qlikAuth.getAccessToken({
      hostConfig: {
        ...qlikConfig,
        userId,
        noCache: true,
      },
    });
    console.log("I got an access token!");
    //access token returned to front end
    res.send(accessToken);
  } catch (err) {
    console.log(err);
    res.status(401).send("No access");
  }
});

Backend using fetch

const hostConfig = {
  host: "https://tenantName.region.qlikcloud.com",
};

const payload = {
  client_id: "OAuth impersonation client Id",
  client_secret: "OAuth impersonation client secret",
  grant_type: "urn:qlik:oauth:user-impersonation",
  user_lookup: {
    field: "subject",
    value: "SUBJECT_VALUE",
  },
  scope: "user_default",
};

async function getAccessToken(hostConfig, payload) {
  const getToken = await fetch(`${hostConfig.host}/oauth/token`, {
    method: "POST",
    mode: "cors",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(payload),
  });
  const response = await getToken.json();
  //console.log(response);
  return response;
}

(async () => {
  await getAccessToken(hostConfig, payload);
})();

Frontend using qlik-embed

In this example, the data-get-access-token attribute in the qlik-embed configuration script points to the getAccessToken function. This function calls the backend route to obtain the access token for the user from Qlik Cloud. The returned access token is stored in browser memory.

<script
  crossorigin="anonymous"
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
  data-host="https://tenantName.region.qlikcloud.com"
  data-client-id="OAuth impersonation client Id"
  data-get-access-token="getAccessToken"
  data-auth-type="Oauth2"
></script>
<script>
  async function getAccessToken() {
    const response = await fetch("/access-token", {
      method: "POST",
      credentials: "include",
      mode: "same-origin",
      redirect: "follow",
    });
    if (response.status === 200) {
      return response.text();
    }
    const err = new Error("Unexpected serverside authentication error");
    err.status = response.status;
    err.detail;
    throw err;
  }
</script>