在 Web 應(yīng)用程式中嵌入 Power BI 儀表板是與使用者安全共享見解的強大方法。在本教程中，我將指導(dǎo)您完成使用Express 為後端和React 為前端設(shè)定基本解決方案的步驟，同時涵蓋Azure 中的基本配置 和Power BI。

1. Azure 中的配置

要嵌入 Power BI 報告，您需要在 Azure Active Directory 中註冊應(yīng)用程式：

1. 註冊申請：

   • 前往 Azure 入口網(wǎng)站 → Azure Active Directory → 應(yīng)用程式註冊 → 新註冊。
   • 輸入名稱（例如「PowerBIEmbedApp」）並將重定向 URI 設(shè)定為前端的基本 URL。

2. API 權(quán)限:

   • 新增 Power BI 服務(wù)的權(quán)限（委派和應(yīng)用程式）。
   • 授予管理員同意權(quán)限。

3. 客戶秘密:

   • 在憑證和機密下建立新的客戶端機密。
   • 記下應(yīng)用程式（客戶端）ID、目錄（租用戶）ID和客戶端金鑰。

2. Power BI 中的配置

1. 啟用嵌入令牌產(chǎn)生:

   • 登入 Power BI 服務(wù) → 管理入口網(wǎng)站 → 租用戶設(shè)定。
   • 啟用「允許服務(wù)主體使用 Power BI API」。

2. 分配工作空間存取權(quán)限:

   • 以管理員或成員資格將服務(wù)主體（已註冊的應(yīng)用程式）新增至 Power BI 工作區(qū)。

3. 取得儀表板/報告 ID:

   • 記下要嵌入的內(nèi)容的工作區(qū)、儀表板和報告 ID。

3. 後端：快速設(shè)定

後端負責為儀表板產(chǎn)生嵌入式令牌。

安裝依賴項:

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 設(shè)定

安裝依賴項:

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（假設(shè)建立React App或類似設(shè)定）。
• 存取您的前端應(yīng)用程式以查看嵌入式 Power BI 儀表板。

重點

此設(shè)定提供了一種安全且簡單的方式來嵌入 Power BI 儀表板。對於生產(chǎn)，請考慮：

• 安全地儲存敏感環(huán)境變數(shù)（例如，使用 Azure Key Vault）。
• 實現(xiàn)更好的錯誤處理和日誌記錄。
• 透過驗證/授權(quán)保護 API 路由。

有關(guān)更多信息，我邀請您查看本文中我如何在現(xiàn)實場景中實現(xiàn)這一點。此外，您可以在此儲存庫中找到使用 Next.js 的實現(xiàn)，該實現(xiàn)適用於現(xiàn)代且可擴展的堆疊。

您可以根據(jù)您的專案需求隨意自訂此解決方案！

感謝您的閱讀！ ??

以上是嵌入 Power BI 儀表板：安全且簡單的解決方案的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！