在 Web 應用程式中嵌入 Power BI 儀表板是與使用者安全共享見解的強大方法。在本教程中,我將指導您完成使用Express 為後端和React 為前端設定基本解決方案的步驟,同時涵蓋Azure 中的基本配置 和Power BI。
要嵌入 Power BI 報告,您需要在 Azure Active Directory 中註冊應用程式:
註冊申請:
API 權限:
客戶秘密:
啟用嵌入令牌產生:
分配工作空間存取權限:
取得儀表板/報告 ID:
後端負責為儀表板產生嵌入式令牌。
安裝依賴項:
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}`));
安裝依賴項:
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;
此設定提供了一種安全且簡單的方式來嵌入 Power BI 儀表板。對於生產,請考慮:
有關更多信息,我邀請您查看本文中我如何在現實場景中實現這一點。此外,您可以在此儲存庫中找到使用 Next.js 的實現,該實現適用於現代且可擴展的堆疊。
您可以根據您的專案需求隨意自訂此解決方案!
感謝您的閱讀! ??
以上是嵌入 Power BI 儀表板:安全且簡單的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!