> 웹 프론트엔드 > JS 튜토리얼 > Power BI 대시보드 포함: 안전하고 간단한 솔루션

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

Barbara Streisand
풀어 주다: 2024-12-24 00:40:13
원래의
722명이 탐색했습니다.

웹 애플리케이션에 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. 백엔드: 빠른 설정

백엔드는 대시보드에 내장된 토큰을 생성하는 역할을 담당합니다.

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;
로그인 후 복사

5. 최종 단계

  • 백엔드 실행: node server.js.
  • 프런트엔드 실행: npm start(Create React App 또는 유사한 설정 가정).
  • 내장된 Power BI 대시보드를 보려면 프런트엔드 애플리케이션을 방문하세요.

테이크아웃

이 설정은 Power BI 대시보드를 포함하는 안전하고 간단한 방법을 제공합니다. 제작 시 다음 사항을 고려하세요.

  • 민감한 환경 변수를 안전하게 저장합니다(예: Azure Key Vault 사용).
  • 더 나은 오류 처리 및 로깅을 구현합니다.
  • 인증/승인으로 API 경로를 보호합니다.

자세한 내용은 이 기사에서 실제 시나리오에서 이를 어떻게 구현했는지 확인하시기 바랍니다. 또한 이 저장소에서 Next.js를 사용하여 현대적이고 확장 가능한 스택에 맞게 조정된 구현을 찾을 수 있습니다.

프로젝트 요구사항에 따라 이 솔루션을 자유롭게 맞춤설정하세요!

읽어주셔서 감사합니다!! ??

위 내용은 Power BI 대시보드 포함: 안전하고 간단한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿