如何从浏览器认证并连接QlikSense Enterprise？基于React构建QlikSense Mashup的适配方案

Great question! Yes, you absolutely can authenticate and connect to QlikSense Enterprise directly from the browser when building your React mashup. The exact approach depends on your QlikSense Enterprise's authentication configuration, so let's break down the most common scenarios and implementations:

1. General Browser-Based Connection (Using Qlik Capability API) #

This is the standard method that works with most default QlikSense Enterprise setups:

Prerequisites #

• Your mashup's domain is added to QlikSense Enterprise's allowed origins (configured in the Qlik Management Console under "Virtual Proxies")
• QlikSense Enterprise has enabled authentication methods compatible with browser flows, such as Windows Authentication (NTLM/Kerberos), Anonymous Access (if permitted), or other browser-friendly schemes

Implementation in React #

First, load Qlik's Capability API resources. You can add this to your index.html or dynamically load it in a component:

<script src="https://<your-qlik-enterprise-server>/resources/assets/external/requirejs/require.js"></script>

Then, initialize the Qlik connection in your React component:

import { useEffect } from 'react';

const QlikEnterpriseMashup = () => {
  useEffect(() => {
    // Configure RequireJS to point to Qlik's resources
    window.require.config({
      baseUrl: 'https://<your-qlik-enterprise-server>/resources',
      paths: {
        qlik: 'assets/external/qlik'
      }
    });

    // Load Qlik API and establish connection
    window.require(['qlik'], (qlik) => {
      // Authentication happens automatically here:
      // - For NTLM/Kerberos: Uses the current Windows account logged into the browser
      // - For form-based auth: Redirects to Qlik's login page, sets session cookies post-login
      const qlikApp = qlik.openApp('<your-app-id>', {
        host: '<your-qlik-enterprise-server>',
        prefix: '/',
        port: 443, // Adjust to your Qlik server's port (typically 443 for HTTPS)
        isSecure: true
      });

      // Once connected, you can interact with the app (e.g., render a visualization)
      qlikApp.getObject('qlik-container', '<your-visualization-object-id>');
    });
  }, []);

  return <div id="qlik-container"></div>;
};

export default QlikEnterpriseMashup;

2. JWT-Based Authentication (For Flexible Frontend Integrations) #

If your QlikSense Enterprise is configured with JWT authentication, this is a great option for decoupled React apps:

Prerequisites #

• QlikSense Enterprise has JWT Authentication enabled (configured in QMC under "Authentication" with valid public/private keys)
• Your frontend can retrieve a valid JWT token from your backend authentication service (since frontend shouldn't handle secret key generation)

Implementation in React #

import { useEffect, useState } from 'react';

const QlikJwtMashup = () => {
  const [jwtToken, setJwtToken] = useState('');

  // Fetch JWT token from your backend first
  useEffect(() => {
    const fetchQlikJwt = async () => {
      const response = await fetch('/api/your-auth-endpoint');
      const authData = await response.json();
      setJwtToken(authData.qlikJwtToken);
    };
    fetchQlikJwt();
  }, []);

  // Initialize Qlik connection once token is available
  useEffect(() => {
    if (!jwtToken) return;

    window.require.config({
      baseUrl: 'https://<your-qlik-enterprise-server>/resources',
      paths: { qlik: 'assets/external/qlik' }
    });

    window.require(['qlik'], (qlik) => {
      const qlikApp = qlik.openApp('<your-app-id>', {
        host: '<your-qlik-enterprise-server>',
        prefix: '/',
        port: 443,
        isSecure: true,
        jwt: jwtToken // Pass the JWT token for authentication
      });

      // Interact with the app as needed
      qlikApp.getObject('jwt-qlik-container', '<your-visualization-object-id>');
    });
  }, [jwtToken]);

  return <div id="jwt-qlik-container"></div>;
};

export default QlikJwtMashup;

Key Notes & Troubleshooting #

• CORS Issues: Always ensure your mashup's domain is added to the Qlik virtual proxy's allowed origins—otherwise, the browser's CORS policy will block requests.
• Virtual Proxy Customization: For non-default auth flows (like JWT), you'll likely need to create a custom virtual proxy in QMC to handle the authentication scheme and CORS settings.
• Form-Based Auth: If your QlikSense uses form-based LDAP or SAML, the browser will automatically redirect to Qlik's login page; after successful login, session cookies will let your mashup connect seamlessly.

内容的提问来源于stack exchange，提问作者gangata arun