? ??????? Power BI ????? ???? ?? ???? ???? ???? ??? ? ?? ??? ?????. ? ??????? ???? Express? ???? ?????? React? ???? ?? ???? ???? ??? ???? Azure? ?? ??? ??????. ? Power BI.

1. Azure? ??

Power BI ???? ????? Azure Active Directory? ?? ???? ???.

1. ?????? ??:

   • Azure Portal → 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(Create React App ?? ??? ?? ??).
• ??? Power BI ????? ??? ????? ??????? ?????.

?????

? ??? Power BI ????? ???? ???? ??? ??? ?????. ?? ? ?? ??? ?????.

• ??? ?? ??? ???? ?????(?: Azure Key Vault ??).
• ? ?? ?? ?? ? ??? ?????.
• ??/???? API ??? ?????.

??? ??? ? ???? ?? ?????? ?? ??? ????? ????? ????. ?? ? ????? Next.js? ???? ????? ?? ??? ??? ?? ??? ??? ?? ? ????.

???? ????? ?? ? ???? ???? ???????!

????? ?????!! ??

? ??? Power BI ???? ??: ???? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!