在 React JS 中传递用户访问令牌以呈现 Power BI 报告时出现问题

Question

我正在使用 React JS 构建一个 Web 应用程序，其中我使用

Microsoft MSAL JS

库实现了用户身份验证。我还尝试使用

[powerbi-client-react](https://www.npmjs.com/package/powerbi-client-react)

库嵌入 power bi 报告。在我的代码分类并根据运行时属性值显示所需的报告中，我尝试传递用户身份验证后获得的用户访问令牌（Aad 令牌）。在我的控制台日志窗口中，我可以将该访问令牌作为普通字符串获取，并将其保存在变量中，并将其进一步传递到

<PowerBIEmbed />

。

问题是 - 对于该变量，报告不会显示，但如果我将访问令牌作为纯字符串（硬编码）传递，则报告显示正常。所以我认为不存在任何与权限相关的问题。

下面是我的代码片段。

我的期望是显示或呈现所需的报告，同时传递用户身份验证后获得的访问令牌并将其存储在任何类型的变量中并传入

<PowerBIEmbed />

我的 authConfig.js 中的代码；

export const pbiToken = {
    scopes: ["https://analysis.windows.net/powerbi/api/Report.Read.All"],
}

import React, { useState, useEffect } from 'react';

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
import { pbiToken } from '../authConfig';
import { useMsal } from '@azure/msal-react';

export const EmbedReport = (props) => {
  const [powerBIAccessToken, setPowerBIAccessToken] = useState(null);
  const reportId = props.reportId;
  const embedUrl = props.embedUrl;
  const { instance, accounts } = useMsal();

  const getPowerBIToken = async () => {
    try {
      // Acquire an access token for Power BI using the scopes from authConfig
      const response = await instance.acquireTokenSilent({
        scopes: pbiToken.scopes,
        account: accounts[0],
      });
      if (response.accessToken) {
        console.log("reading token", response.accessToken);
        setPowerBIAccessToken(JSON.stringify(response.accessToken));
      }
    } catch (error) {
      // Handle token acquisition errors
      console.error("Error acquiring Power BI token:", error);
    }
  };

  useEffect(() => {
    const isLoggedIn = accounts.length > 0;
    if (isLoggedIn) {
      getPowerBIToken();
    }
  }, [accounts.length]);

  return (
    <>
      {powerBIAccessToken ? (
        <PowerBIEmbed
          embedConfig={{
            type: "report",
            id: reportId,
            embedUrl: embedUrl.href,
            accessToken: powerBIAccessToken,
            tokenType: models.TokenType.Aad,
            settings: {
              panes: {
                filters: {
                  expanded: false,
                  visible: false,
                },
              },
              background: models.BackgroundType.Transparent,
            },
          }}
          eventHandlers={
            new Map([
              [
                "rendered",
                function () {
                  console.log("Report rendered");
                },
              ],
              [
                "error",
                function (event) {
                  console.log(event.detail);
                },
              ],
              ["visualClicked", () => console.log("visual clicked")],
            ])
          }
          cssClassName={"reportClass"}
          getEmbeddedComponent={(embeddedReport) => {
            window.report = embeddedReport;
          }}
        />
      ) : (
        <p>'hello'</p> //NOTE: this line or condition is part of triage and can be gone later
      )}
    </>
  );
};

export default EmbedReport;

更新： 当我尝试解决问题时，出现以下错误：

{message: 'LoadReportFailed', detailedMessage: 'Fail to initialize - Could not resolve cluster', errorCode: '403', level: 6, technicalDetails: {…}}

detailedMessage: "Fail to initialize - Could not resolve cluster"
errorCode: "403"
level: 6
message: "LoadReportFailed"
technicalDetails: {requestId: '2e3c92c0-098b-40d6-9c22-306a6b555866', errorInfo: undefined}
[[Prototype]]: Object

Answer 1

您遇到的错误可能是因为访问令牌错误或嵌入类型与令牌类型不匹配。有关错误的更多详细信息，请参阅故障排除文档。

如果您使用主用户身份验证方法嵌入报告，请参阅React 开发人员示例。

如果您使用服务主体身份验证方法嵌入报告，请参阅我的 GitHub 存储库