Power BI ダッシュボードの埋め込み: 安全でシンプルなソリューション

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

export default Dashboard;

5. 最終ステップ

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

テイクアウト

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

• 機密性の高い環境変数を安全に保存します (例: Azure Key Vault を使用)。
• より優れたエラー処理とログ記録を実装します。
• 認証/認可による API ルートの保護。

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

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

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

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