Power BI 대시보드 임베딩: 안전하고 간편하게 구현하는 방법

Power BI 대시보드 임베딩의 이점과 도입 방법

Power BI는 뛰어난 데이터 시각화 도구로, 비즈니스 인사이트를 어디서나 쉽게 공유할 수 있도록 지원합니다. 이번 글에서는 Power BI 대시보드를 안전하게 웹 애플리케이션에 임베드하는 방법에 대해 자세히 알아보겠습니다. 특히, Express.js와 React.js를 사용하여 백엔드와 프론트엔드를 구성하는 방법을 중점적으로 다루겠습니다.

Azure에서의 초기 설정

Power BI 대시보드를 임베드하기 위해서는 먼저 Azure Active Directory(AAD)에서 애플리케이션을 등록해야 합니다. 이는 사용자가 안전하게 대시보드를 접근할 수 있도록 하는 기초 작업입니다.

Azure 애플리케이션 등록

1. 애플리케이션 등록:

   • Azure 포털로 이동하여 'Azure Active Directory' → '애플리케이션 등록' → '새 등록'을 클릭합니다.
   • 앱의 이름을 정하고, Redirect URI를 프런트엔드의 기본 URL로 설정합니다.

2. API 권한 추가:

   • 'Power BI Service'에 대한 권한을 추가합니다. 여기서는 위임된 권한과 애플리케이션 권한을 모두 설정해야 합니다.
   • 설정 후, 관리자 승인도 필요합니다.

3. 클라이언트 시크릿 생성:

   • '인증서 및 비밀'에서 새 클라이언트 시크릿을 생성합니다. 애플리케이션(클라이언트) ID, 디렉터리(테넌트) ID, 클라이언트 시크릿을 기록해 두세요.

Power BI에서 설정

이제 Power BI 서비스에서 임베딩을 위한 몇 가지 설정이 필요합니다.

임베드 토큰 생성 허용

• Power BI 서비스에 로그인하여 '관리자 포털' → '테넌트 설정'으로 이동합니다.
• '서비스 프린시플이 Power BI API 사용 허용' 설정을 활성화합니다.

작업 영역 액세스 설정

• 등록된 앱을 Power BI 작업 공간에 관리자 또는 멤버로 추가하세요.

대시보드 및 보고서 ID 획득

• 임베딩할 콘텐츠의 작업 공간, 대시보드 및 보고서 ID를 기록해 둡니다.

서버 설정: Express 사용

Express는 간편하게 서버를 설정할 수 있는 Node.js 프레임워크입니다. 이 서버에서 Power BI 대시보드 임베딩을 위한 토큰을 생성합니다.

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());

// 환경 변수
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 {
    // 액세스 토큰 획득
    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;

    // 임베드 토큰 획득
    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('임베드 토큰 생성 오류');
  }
});

const PORT = 5000;
app.listen(PORT, () => console.log(`서버 시작: 포트 ${PORT}`));

프론트엔드 설정: 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);
      }
    };
    fetchEmbedToken();
  }, []);

  if (!embedConfig) return <div>로딩 중...</div>;

  return (
    <PowerBIEmbed
      embedConfig={embedConfig}
      cssClassName="dashboard-embed"
    />
  );
};

export default Dashboard;

최종 단계

1. 백엔드 실행: node server.js.
2. 프론트엔드 실행: npm start (Create React App 또는 유사한 설정 사용).
3. 프론트엔드 애플리케이션을 방문하여 임베드된 Power BI 대시보드를 확인하세요.

마무리 및 고려사항

이 설정은 Power BI 대시보드를 안전하고 간편하게 임베드할 수 있는 솔루션을 제공합니다. 프로덕션 환경에서는 아래와 같은 추가 사항을 고려하는 것도 좋습니다:

• 민감한 환경 변수를 Azure Key Vault와 같은 보안 장소에 저장합니다.
• 오류 처리 및 로깅을 강화합니다.
• API 경로를 인증/인가로 보장하여 보안을 강화합니다.

실제 시나리오에서 이 설정을 어떻게 구현했는지 자세히 알고 싶다면 이 링크를 확인해 보세요. Next.js를 사용하여 현대적이고 확장 가능한 스택으로 구현된 이 레퍼지토리도 참고할 수 있습니다. 프로젝트의 필요에 맞게 이 솔루션을 자유롭게 커스터마이징하세요!

감사합니다! 😊😊