嵌入 Power BI 仪表板：安全且简单的解决方案

在 Web 应用程序中嵌入 Power BI 仪表板是与用户安全共享见解的强大方法。在本教程中，我将指导您完成使用 Express 为后端和 React 为前端设置基本解决方案的步骤，同时涵盖 Azure 中的基本配置 和 Power BI。

1. Azure 中的配置

要嵌入 Power BI 报告，您需要在 Azure Active Directory 中注册应用程序：

1. 注册申请：

   • 转到 Azure 门户 → Azure Active Directory → 应用程序注册 → 新注册。
   • 输入名称（例如“PowerBIEmbedApp”）并将重定向 URI 设置为前端的基本 URL。

2. API 权限:

   • 添加 Power BI 服务的权限（委派和应用程序）。
   • 授予管理员同意权限。

3. 客户秘密:

   • 在证书和机密下创建新的客户端机密。
   • 记下应用程序（客户端）ID、目录（租户）ID和客户端密钥。

2. Power BI 中的配置

1. 启用嵌入令牌生成:

   • 登录 Power BI 服务 → 管理门户 → 租户设置。
   • 启用“允许服务主体使用 Power BI API”。

2. 分配工作空间访问权限:

   • 以管理员或成员身份将服务主体（注册的应用）添加到 Power BI 工作区。

3. 获取仪表板/报告 ID:

   • 记下要嵌入的内容的工作区、仪表板和报告 ID。

3. 后端：快速设置

后端负责为仪表板生成嵌入式令牌。

安装依赖项:

npm install express axios dotenv

后端代码:

const express = require('express');
const axios = require('axios');
const dotenv = require('dotenv');
dotenv.config();

const app = express();
app.use(express.json());

// Environment variables from .env
const {
  TENANT_ID,
  CLIENT_ID,
  CLIENT_SECRET,
  WORKSPACE_ID,
  REPORT_ID,
} = process.env;

const POWER_BI_AUTH_URL = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`;

app.get('/api/getEmbedToken', async (req, res) => {
  try {
    // Get Access Token
    const authResponse = await axios.post(POWER_BI_AUTH_URL, new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      scope: 'https://analysis.windows.net/powerbi/api/.default',
    }));

    const accessToken = authResponse.data.access_token;

    // Get Embed Token
    const embedResponse = await axios.post(
      `https://api.powerbi.com/v1.0/myorg/groups/${WORKSPACE_ID}/reports/${REPORT_ID}/GenerateToken`,
      { accessLevel: 'View' },
      { headers: { Authorization: `Bearer ${accessToken}` } }
    );

    res.json(embedResponse.data);
  } catch (error) {
    console.error(error.message);
    res.status(500).send('Error generating embed token');
  }
});

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

4. 前端：React 设置

安装依赖项:

npm install react powerbi-client axios

前端代码:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { PowerBIEmbed } from 'powerbi-client-react';

const Dashboard = () => {
  const [embedConfig, setEmbedConfig] = useState(null);

  useEffect(() => {
    const fetchEmbedToken = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/getEmbedToken');
        setEmbedConfig({
          type: 'report',
          tokenType: 1,
          accessToken: response.data.token,
          embedUrl: response.data.embedUrl,
          settings: { panes: { filters: { visible: false } } },
        });
      } catch (error) {
        console.error('Error fetching embed token:', error);
      }
    };
    fetchEmbedToken();
  }, []);

  if (!embedConfig) return <div>Loading...</div>;

  return (
    <PowerBIEmbed
      embedConfig={embedConfig}
      cssClassName="dashboard-embed"
    />
  );
};

export default Dashboard;

5. 最后步骤

• 运行后端：node server.js。
• 运行前端：npm start（假设创建React App或类似设置）。
• 访问您的前端应用程序以查看嵌入式 Power BI 仪表板。

要点

此设置提供了一种安全且简单的方式来嵌入 Power BI 仪表板。对于生产，请考虑：

• 安全地存储敏感环境变量（例如，使用 Azure Key Vault）。
• 实现更好的错误处理和日志记录。
• 通过身份验证/授权保护 API 路由。

有关更多信息，我邀请您查看本文中我如何在现实场景中实现这一点。此外，您可以在此存储库中找到使用 Next.js 的实现，该实现适用于现代且可扩展的堆栈。

您可以根据您的项目需求随意定制此解决方案！

感谢您的阅读！ ??

以上是嵌入 Power BI 仪表板：安全且简单的解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！