Embedding Power BI dashboards in a web application is a powerful way to share insights securely with users. In this tutorial, I'll guide you through the steps to set up a basic solution using Express for the backend and React for the frontend, while covering essential configurations in Azure and Power BI.
To embed Power BI reports, you need to register an app in Azure Active Directory:
Register an Application:
API Permissions:
Client Secret:
Enable Embed Token Generation:
Assign Workspace Access:
Obtain Dashboard/Report IDs:
The backend is responsible for generating an embedded token for the dashboard.
Install dependencies:
npm install express axios dotenv
Backend Code:
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}`));
Install dependencies:
npm install react powerbi-client axios
Frontend Code:
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;
This setup provides a secure and simple way to embed Power BI dashboards. For production, consider:
For more information, I invite you to check out how I implemented this in a real-world scenario in this article. Additionally, you can find the implementation using Next.js in this repository, adapted to a modern and scalable stack.
Feel free to customize this solution based on your project's needs!
Thanks for reading !! ??
The above is the detailed content of Embedding a Power BI Dashboard: A Secure and Simple Solution. For more information, please follow other related articles on the PHP Chinese website!