Power BI ダッシュボードの埋め込み: 安全でシンプルなソリューション-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-24 00:40:13

オリジナル

726 人が閲覧しました

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

1. Azure での構成

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

アプリケーションを登録する:
- Azure portal → Azure Active Directory → アプリの登録 → 新規登録に移動します。
- 名前 (「PowerBIEmbedApp」など) を入力し、リダイレクト URI をフロントエンドのベース URL に設定します。
API 権限:
- Power BI サービス (委任およびアプリケーション) のアクセス許可を追加します。
- 権限に対して管理者の同意を与えます。
クライアントシークレット:
- 証明書とシークレット で新しいクライアントシークレットを作成します。
- アプリケーション (クライアント) ID、ディレクトリ (テナント) ID、および クライアントシークレットをメモします。

2.Power BI の構成

埋め込みトークンの生成を有効にする:
- Power BI サービス → 管理ポータル → テナント設定にログインします。
- 「サービスプリンシパルに Power BI API の使用を許可する」を有効にします。
ワークスペースへのアクセスの割り当て:
- サービスプリンシパル (登録済みアプリ) を管理者またはメンバーとして Power BI ワークスペースに追加します。
ダッシュボード/レポート ID の取得:
- 埋め込むコンテンツのワークスペース、ダッシュボード、レポート ID をメモします。

3. バックエンド: 高速セットアップ

バックエンドは、ダッシュボードの埋め込みトークンを生成する役割を果たします。

Embedding a Power BI Dashboard: A Secure and Simple Solution

依存関係をインストールします:

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;

ログイン後にコピー