Das Einbetten von Power BI-Dashboards in eine Webanwendung ist eine leistungsstarke M?glichkeit, Erkenntnisse sicher mit Benutzern zu teilen. In diesem Tutorial führe ich Sie durch die Schritte zum Einrichten einer Basisl?sung mit Express für das Backend und React für das Frontend und behandle dabei wichtige Konfigurationen in Azure und Power BI.

1. Konfigurationen in Azure

Um Power BI-Berichte einzubetten, müssen Sie eine App in Azure Active Directory registrieren:

1. Antrag registrieren:

   • Gehen Sie zum Azure-Portal → Azure Active Directory → App-Registrierungen → Neue Registrierung.
   • Geben Sie einen Namen ein (z. B. ?PowerBIEmbedApp“) und legen Sie den Umleitungs-URI auf die Basis-URL Ihres Frontends fest.

2. API-Berechtigungen:

   • Berechtigungen für den Power BI-Dienst hinzufügen (Delegiert und Anwendung).
   • Erteilen Sie die Zustimmung des Administrators für die Berechtigungen.

3. Kundengeheimnis:

   • Erstellen Sie unter Zertifikate & Geheimnisseein neues Kundengeheimnis.
   • Notieren Sie sich die Anwendungs-ID (Client), die Verzeichnis-ID (Mandant) und das Client-Geheimnis.

2. Konfigurationen in Power BI

1. Einbettungs-Token-Generierung aktivieren:

   • Melden Sie sich beim Power BI-Dienst → Admin-Portal → Mandanteneinstellungen an.
   • Aktivieren Sie ?Dienstprinzipalen erlauben, Power BI-APIs zu verwenden“.

2. Arbeitsbereichszugriff zuweisen:

   • Fügen Sie den Dienstprinzipal (registrierte App) als Administrator oder Mitglied zum Power BI-Arbeitsbereich hinzu.

3. Dashboard-/Berichts-IDs erhalten:

   • Notieren Sie sich die Arbeitsbereichs-, Dashboard- und Berichts-IDs der Inhalte, die Sie einbetten m?chten.

3. Backend: Express-Setup

Das Backend ist für die Generierung eines eingebetteten Tokens für das Dashboard verantwortlich.

Abh?ngigkeiten installieren:

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}`));

4. Frontend: Reaktions-Setup

Abh?ngigkeiten installieren:

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;

5. Letzte Schritte

• Führen Sie das Backend aus: node server.js.
• Führen Sie das Frontend aus: npm start (vorausgesetzt, ?React App erstellen“ oder ein ?hnliches Setup).
• Besuchen Sie Ihre Frontend-Anwendung, um das eingebettete Power BI-Dashboard anzuzeigen.

Imbissbuden

Dieses Setup bietet eine sichere und einfache M?glichkeit, Power BI-Dashboards einzubetten. Berücksichtigen Sie bei der Produktion Folgendes:

• Sensible Umgebungsvariablen sicher speichern (z. B. mit Azure Key Vault).
• Implementierung einer besseren Fehlerbehandlung und -protokollierung.
• API-Routen mit Authentifizierung/Autorisierung sichern.

Für weitere Informationen lade ich Sie ein, sich in diesem Artikel anzusehen, wie ich dies in einem realen Szenario umgesetzt habe. Darüber hinaus finden Sie in diesem Repository die Implementierung mit Next.js, angepasst an einen modernen und skalierbaren Stack.

Sie k?nnen diese L?sung gerne an die Anforderungen Ihres Projekts anpassen!

Danke fürs Lesen!! ??

Das obige ist der detaillierte Inhalt vonEinbetten eines Power BI-Dashboards: Eine sichere und einfache L?sung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!