使用ServicePrincipal在React中获取Power BI Embed授权令牌的咨询

可以通过ServicePrincipal方式获取Power BI REST API需要的Authorization令牌，但是注意：纯前端React场景下无法安全实现无用户参与的纯ServicePrincipal身份验证，因为该模式需要用到的客户端密钥（Client Secret）属于敏感信息，硬编码在前端会直接泄露导致权限滥用。如果是测试场景或允许用户登录的场景，可直接用Azure AD的MSAL库实现令牌获取；生产环境建议配合后端服务中转令牌生成逻辑，前端只拿最终的embed token即可。

• 在Azure AD完成应用注册，开通Power BI Service Principal访问权限，记录好租户ID（Tenant ID）、客户端ID（Client ID）
• 将注册的ServicePrincipal添加到对应Power BI工作区的访问成员列表中，分配至少报表查看者权限

1. 安装依赖库

npm install @azure/msal-browser powerbi-client powerbi-client-react

2. 新增MSAL配置文件msalConfig.js

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
  auth: {
    // 替换为你的Azure AD应用客户端ID
    clientId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    // 替换为你的租户ID，对应authority地址
    authority: "https://login.microsoftonline.com/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
};

// Power BI API权限请求配置
const loginRequest = {
  scopes: ["https://analysis.windows.net/powerbi/api/.default"],
};

export const msalInstance = new PublicClientApplication(msalConfig);
export { loginRequest };

3. 封装Power BI嵌入组件

import { useEffect, useState } from "react";
import { msalInstance, loginRequest } from "./msalConfig";
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

const PowerBIReport = () => {
  const [embedConfig, setEmbedConfig] = useState(null);
  // 替换为你的工作区ID、报表ID
  const workspaceId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
  const reportId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";

  useEffect(() => {
    const fetchTokenAndInit = async () => {
      try {
        // 获取Azure AD身份验证令牌
        const accounts = msalInstance.getAllAccounts();
        let authResponse;
        if (accounts.length > 0) {
          authResponse = await msalInstance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
          });
        } else {
          authResponse = await msalInstance.acquireTokenPopup(loginRequest);
        }
        const authToken = authResponse.accessToken;

        // 调用Power BI REST API生成embed token
        const embedTokenRes = await fetch(
          `https://api.powerbi.com/v1.0/myorg/groups/${workspaceId}/reports/${reportId}/GenerateToken`,
          {
            method: "POST",
            headers: {
              "Authorization": `Bearer ${authToken}`,
              "Content-Type": "application/json"
            },
            body: JSON.stringify({ accessLevel: "View" })
          }
        );
        const embedTokenData = await embedTokenRes.json();

        // 初始化嵌入配置
        setEmbedConfig({
          type: 'report',
          id: reportId,
          embedUrl: `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${workspaceId}`,
          accessToken: embedTokenData.token,
          tokenType: models.TokenType.Embed,
          settings: {
            panes: {
              filters: { visible: false },
              pageNavigation: { visible: true }
            }
          }
        });
      } catch (err) {
        console.error("初始化Power BI报表失败：", err);
      }
    };

    fetchTokenAndInit();
  }, [workspaceId, reportId]);

  return embedConfig ? (
    <PowerBIEmbed embedConfig={embedConfig} cssClassName="w-full h-[600px]" />
  ) : (
    <div>报表加载中...</div>
  );
};

export default PowerBIReport;

• 不要在前端直接进行ServicePrincipal身份验证，也不要在前端代码中存储任何密钥类敏感信息
• 把生成embed token的逻辑移到后端服务实现：后端用ServicePrincipal的客户端ID、密钥获取Authorization令牌，调用Power BI API生成embed token后返回给前端，前端直接使用该token嵌入报表即可，完全规避敏感信息泄露风险

内容的提问来源于stack exchange，提问作者PedroNeves