Connect qlik-embed web components to Qlik

Connection options

You can connect to qlik-embed in these ways:

  • Qlik Cloud API keys (cookie-less)
  • Qlik Cloud OAuth2 clients (cookie-less)
  • Qlik Cloud interactive login (cookies)
  • Qlik Sense Enterprise Client Managed interactive login (cookies)
  • None

Note: Choosing none requires handling authenticated requests using an authorization proxy. You can learn more about authorization proxy here.

Add qlik-embed to your web application

Connecting to qlik-embed when you use the web components implementation requires adding a <script> element in the <head> tag. The attributes of the script element are a mix of standard and specific attributes relevant to the connection you choose.

Standard attributes

There are three attributes that must appear in <script> element for using qlik-embed web components.

The crossorigin attribute tells the script element how to handle cross-origin requests. Setting the attribute to anonymous sets the script element to operate in same-origin mode.

The type attribute is set to application/javascript so that the web components JavaScript file is used properly by the web application.

The src attribute is the URI location for the qlik-embed web components library.

the data-host attribute is the URI hostname of the Qlik Cloud tenant, client managed server, or the authorization proxy.

If you are not using an authorization strategy, set only these attributes. Here’s an example:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://example.authproxy.hostname.com"
></script>

Authorization specific attributes

Using API keys

Add a data-api-key attribute to the script element and set it to the API key you are using to make a connection.

Note: Using an API key in a production deployment is NOT recommended because the credential appears in plain text of the web application.

Now the script element looks like:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://tenant.region.qlikcloud.com"
      data-api-key="<some API key value>"
></script>

Using OAuth clients

OAuth clients provide a way to authorize embedded content in your web application without cookies. Using an OAuth client with qlik-embed requires attributes data-client-id, data-redirect-uri, and data-access-token-storage.

data-client-id

The client-id comes from the OAuth client you create in your tenant.

data-redirect-uri

The redirect-uri points back to a callback page for which the access token is granted and allowed to be used. To help make it easier to configure and use OAuth tokens, Qlik provides a OAuth callback handler you can use so that your web application need only a single access token to authorize content embedded on multiple pages. You can create an html page and add this code, adapting the data-host attribute in this code to match that of data-host in the qlik-embed configuration script. Add the page to your web application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      crossorigin="anonymous"
      type="application/javascript"
      data-host="https://tenant.region.qlikcloud.com"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components/dist/oauth-callback.js"
    ></script>
  </head>
</html>

data-access-token-storage

The access-token-storage attribute indicates to qlik-embed whether to place the token in local storage or session storage.

The qlik-embed connection script for OAuth2 will look like this:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://tenant.region.qlikcloud.com"
      data-client-id="bee7e4b5c786af1033e6780d0bbe9727"
      data-redirect-uri="https://your-web-application.example.com/oauth-callback.html"
      data-access-token-storage="session"
></script>

Using Qlik Cloud interactive login

If your web application is not impacted by third-party cookie blocking by the browser, you can use a web integration Id supplied by your tenant and use it with the data-web-integration attribute. You can create a web integration Id in the management console.

In addition, you need to set data-cross-site-cookies attribute to true or false to instruct Qlik to allow cross-site cookie requests for embedded content.

Here’s what the Qlik Cloud interactive login connection script should look like:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://tenant.region.qlikcloud.com"
      data-web-integration-id="bee7e4b5c786af1033e6780d0bbe9727"
      data-cross-site-cookies="true"
></script>

Connecting to Qlik Sense Client-managed edition

To connect qlik-embed to the client-managed edition of Qlik Sense Enterprise, use the data-login-uri and data-cross-site-cookies attributes in the connection script.

The data-login-uri is the http address of the Qlik Sense server including the virtual proxy path (example: https://senseserver.example.com/virtualproxypath) . Set data-cross-site-cookies attribute to true or false to instruct the Qlik server how to handle cross-site cookie requests for embedded content.

An example for connecting qlik-embed to Qlik Sense client-managed may look like this:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://senseserver.example.com"
      data-login-uri="https://senseserver.example.com/virtualproxypath"
      data-cross-site-cookies="true"
    ></script>

Not using an authorization strategy

In the case where you intend to handle managing connectivity to Qlik on the backend of your application, you supply only the standard attributes for connecting to qlik-embed. Make sure the data-host attribute points to your backend. Here’s an example:

<script
      crossorigin="anonymous"
      type="application/javascript"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
      data-host="https://example.authproxy.hostname.com"
></script>

Next steps

After you’ve configured your connection script for qlik-embed, you can begin using the component in your web application. Review the qlik-embed quick start tutorial to begin your embedded analytics journey.

ON THIS PAGE

Was this page helpful?