Power BI 대시보드 포함: 안전하고 간단한 솔루션

웹 애플리케이션에 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"></powerbiembed>
  );
};

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!