403 禁止尝试嵌入 Power BI 报告

Question

我正在尝试将 Power BI 报告嵌入到 Vue/Nuxt 应用程序中，但没有成功。 我们正在针对应用程序拥有数据模型进行实施。

我可以成功检索访问令牌并为特定报告生成嵌入令牌。

生成的令牌和我拥有的报告 ID，通过 Power BI Playground 成功解析并嵌入报告，因此我知道我们拥有正确的详细信息和权限。

我还使用 Microsoft 的官方 Power BI 客户端包来执行嵌入：

https://www.npmjs.com/package/powerbi-client

当我尝试时，我得到以下信息：

我已确认服务主体对所有工作区具有管理员权限，并且我正在测试的报告已重新发布以确保其具有最新权限，但没有成功。

这是正在实现的代码（当前通过路由传递数据）：

<template>
<v-container
    fluid
    class="ma-0 pa-0"
>
    <v-row class="app-bar ma-0 py-0 px-6">
        <v-col
            cols="12"
            class="px-0"
        >
            <NuxtLink to="/"
                ><v-icon
                    color="#2670ca"
                    size="x-large"
                    >mdi-chevron-left
                </v-icon>
            </NuxtLink>
            <div class="pl-3">{{ reportName }}</div>
        </v-col>
    </v-row>
</v-container>
<v-container
    fluid
    class="ma-0 pa-0 fill-height"
>
    <div
        id="report-container"
        ref="reportContainer"
        width="100%"
        height="100%"
        style="display: flex; flex-wrap: wrap; flex: 1 1 auto; max-width: 100%"
    ></div>
</v-container>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as pbi from "powerbi-client";
const route = useRoute();
const user = useSupabaseUser();
console.log("Confirming login...");
watch(
    user,
    () => {
        if (!user.value) {
            return navigateTo("/login");
        }
    },
    { immediate: true }
);
const reportName = computed(() => (route.query.name === undefined ? "Unknown" : String(route.query.name)));

console.log("Available permissions...");
console.log(pbi.models);

onMounted(() => {
    // Set up the configuration object that determines what to embed and how to embed it.
    let embedConfiguration = {
        accessToken: route.query.accessToken?.toString(),
        embedUrl: route.query.embedUrl?.toString(),
        id: route.query.id?.toString(),
        permissions: pbi.models.Permissions.Read,
        tokenType: pbi.models.TokenType.Embed,
        type: route.query.reportType?.toString(),
        pageView: "fitToWidth",
    };

    console.log("Check embed configuration...");
    console.log({ embedConfiguration: embedConfiguration });

    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

    // Get a reference to the HTML element that contains the embedded report.
    let embedContainer = document.getElementById("report-container")!;

    // Embed the report or dashboard.
    let report = powerbi.embed(embedContainer, embedConfiguration);
    
    report.off("loaded");
    report.off("rendered");
    report.on("error", function (err) {
        console.log("Embed report error:");
        console.log({ embedError: err });
        report.off("error");
    });
});

我们的配置/代码中可能缺少/不正确哪些内容在 MS 文档中不明显？

编辑

确实有些奇怪的事情。我是从新西兰打这个电话的。当我在 3 月 25 日（2024-03-25）上午 8:49 请求访问令牌时，返回的到期日期似乎已经无效......即时区等。

已解决：时间看起来相同，但晚了 12 小时...但是，作为 UTC，夏令时的计算并不明显，因此实际时间早了一小时，这意味着 1 小时令牌到期是有效的。

编辑2

已确认我的用户对我尝试查看的报告具有读取权限。

编辑3

我已经尝试过 Pro PBI 许可证，但仍然没有成功。

上面的错误消息：“403 Forbidden - 无法初始化 - 无法解析集群”被 MS 描述为“错误的令牌类型或错误的令牌”。此时，我确信我们正在通过应用程序拥有数据方法来实现，因此“嵌入”的令牌类型是正确的。

人们应该如何知道他们的代币是否“不好”？更不用说它出了什么问题以及如何修复它！

Answer 1

从疑难解答文档中，错误的原因可能是访问令牌错误或嵌入令牌类型与令牌类型不匹配。

问题中没有说明如何生成访问令牌。

1. 如果您通过点击端点

   https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token

   生成访问令牌，请确保传递例如

   https://analysis.windows.net/powerbi/api/.default

   的范围。 在这种情况下，令牌类型将为

   models.TokenType.Aad

   并且需要在您的 embedConfig 中更新它。

2. 如果您通过点击嵌入式 Rest API 生成令牌来获取 accessToken，则令牌类型将为

   models.TokenType.Embed

   。

如果问题仍然存在，需要提供有关如何生成访问令牌的更多详细信息。