Power BI ダッシュボードを Web アプリケーションに埋め込むことは、ユーザーと安全に洞察を共有する強力な方法です。このチュートリアルでは、Azure の基本的な構(gòu)成をカバーしながら、バックエンドに Express を使用し、フロントエンドに React を使用して基本的なソリューションをセットアップする手順を説明します。 および Power BI。

1. Azure での構(gòu)成

Power BI レポートを埋め込むには、Azure Active Directory にアプリを登録する必要があります。

1. アプリケーションを登録する:

   • Azure portal → Azure Active Directory → アプリの登録 → 新規(guī)登録に移動します。
   • 名前 (「PowerBIEmbedApp」など) を入力し、リダイレクト URI をフロントエンドのベース URL に設(shè)定します。

2. API 権限:

   • Power BI サービス (委任およびアプリケーション) のアクセス許可を追加します。
   • 権限に対して管理者の同意を與えます。

3. クライアントシークレット:

   • 証明書とシークレット で新しいクライアント シークレットを作成します。
   • アプリケーション (クライアント) ID、ディレクトリ (テナント) ID、および クライアント シークレットをメモします。

2.Power BI の構(gòu)成

1. 埋め込みトークンの生成を有効にする:

   • Power BI サービス → 管理ポータル → テナント設(shè)定にログインします。
   • 「サービス プリンシパルに Power BI API の使用を許可する」を有効にします。

2. ワークスペースへのアクセスの割り當(dāng)て:

   • サービス プリンシパル (登録済みアプリ) を管理者またはメンバーとして 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. 最終ステップ

• バックエンドを?qū)g行します: ノードserver.js.
• フロントエンドを?qū)g行します: npm start (Create React App または同様のセットアップを想定)。
• フロントエンド アプリケーションにアクセスして、埋め込み Power BI ダッシュボードを確認(rèn)します。

テイクアウト

このセットアップでは、Power BI ダッシュボードを安全かつ簡単に埋め込む方法が提供されます。実稼働環(huán)境では、以下を考慮してください。

• 機(jī)密性の高い環(huán)境変數(shù)を安全に保存します (例: Azure Key Vault を使用)。
• より優(yōu)れたエラー処理とログ記録を?qū)g裝します。
• 認(rèn)証/認(rèn)可による API ルートの保護(hù)。

詳細(xì)については、この記事で実際のシナリオでこれをどのように実裝したかを確認(rèn)してください。さらに、このリポジトリでは、最新のスケーラブルなスタックに適応した Next.js を使用した実裝を見つけることができます。

プロジェクトのニーズに基づいてこのソリューションを自由にカスタマイズしてください!

読んでいただきありがとうございます!! ??

以上がPower BI ダッシュボードの埋め込み: 安全でシンプルなソリューションの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。