Бесшовная интеграция Power BI в приложение Next [закрыто]

Мне сейчас нужна помощь, если у кого-то есть опыт в встраивании отчетов Power BI в их Next-приложение? Я планирую, чтобы процесс входа в систему был бесшовным, чтобы пользователям не нужно было вводить свои учетные данные для просмотра отчета. Я смог встроить свой отчет Power BI, но он все еще вызывает всплывающее окно входа.

На данный момент у меня есть зарегистрированное приложение в Azure, я сделал необходимые разрешения для моего приложения на доступ к услугам Power BI (делегированные разрешения). А также предоставил разрешение на членство приложения в своем рабочем пространстве Power BI. Вот мой код, я заменил свои реальные идентификаторы на заполнители:

// serverAuthService.ts
    // Этот файл предназначен для получения токена доступа для аутентификации серверной службы с помощью Power BI REST API
    import { ConfidentialClientApplication } from "@azure/msal-node";

    const msalConfig = {
      auth: {
        clientId: "<Мой-Клиент-ID>",
        authority: "https://login.microsoftonline.com/<Tenant-ID>", 
        clientSecret: "<Секрет-клиента>", 
      },
    };

    const cca = new ConfidentialClientApplication(msalConfig);

    export const acquireServerToken = async (): Promise<string | null> => {
      try {
        const result = await cca.acquireTokenByClientCredential({
            scopes: ["https://analysis.windows.net/powerbi/api/.default"], 
        });
        return result?.accessToken || null;
      } catch (error) {
        console.error("Ошибка при получении серверного токена:", error);
        return null;
      }
    };
    

powerBIReports.tsx – компонент

// PowerBIReport.tsx
    import React, { useEffect, useState } from "react";
    import axios from "axios";
    import { PowerBIEmbed } from "powerbi-client-react";
    import { models } from "powerbi-client";

    const PowerBIReport: React.FC = () => {
      const [embedToken, setEmbedToken] = useState<string | null>(null);

      useEffect(() => {
        const fetchEmbedToken = async () => {
          try {
            const response = await axios.get("/api/getPowerBIEmbedToken");

            console.log("TOKEN AXIOS: ", response.data.embedToken);
            setEmbedToken(response.data.embedToken);
          } catch (error) {
            console.error("Не удалось получить токен встраивания:", error);
          }
        };

        fetchEmbedToken();
      }, []);

      if (!embedToken) {
        return <div>Загрузка отчета Power BI...</div>;
      }

      return (
        <PowerBIEmbed
          embedConfig={{
            type: "report",
            id: "<ID-отчета>",
            embedUrl: "https://app.powerbi.com/reportEmbed?reportId=<ID-отчета>&groupId=<ID-группы>&w=2&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVNPVVRILUVBU1QtQVNJQS1DLVBSSU1BUlktcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQiLCJlbWJlZEZlYXR1cmVzIjp7InVzYWdlTWV0cmljc1ZOZXh0Ijp0cnVlfX0%3d",
            accessToken: embedToken,
            tokenType: models.TokenType.Embed,
            settings: {
              panes: {
                filters: {
                  visible: false,
                },
              },
              navContentPaneEnabled: true,
            },
          }}
          cssClassName="report-container"
        />
      );
    };

    export default PowerBIReport;
    

getPowerBIEmbedToken.ts

// pages/api/getPowerBIEmbedToken.ts
    import type { NextApiRequest, NextApiResponse } from "next";
    import { acquireServerToken } from "../../components/serverAuthService"; // Настройте этот путь
    import axios from "axios";
    import {jwtDecode} from "jwt-decode";

    export default async (req: NextApiRequest, res: NextApiResponse) => {
      try {
        // Получите токен доступа с помощью MSAL Node
        const accessToken = await acquireServerToken(); // Это предназначено для аутентификации приложения
        console.log("Токен доступа:", accessToken);

        // Декодируйте токен, чтобы проверить аудиторию
        if(accessToken){
            const decodedToken: any = jwtDecode(accessToken);
            console.log("Декодированная аудитория токена (aud):", decodedToken.aud);
        }

        if (!accessToken) {
          return res.status(500).json({ error: "Не удалось получить токен доступа" });
        }

        console.log("Это токен доступа: ", accessToken);

        // Вызовите Power BI REST API, чтобы получить токен встраивания
        const embedResponse = await axios.post(
          'https://api.powerbi.com/v1.0/myorg/groups/<Groups-ID>/reports/<Reports-ID>/GenerateToken',
          {
            accessLevel: "View", // Настройте уровень доступа при необходимости
          },
          {
            headers: {
              Authorization: `Bearer ${accessToken}`,
              "Content-Type": "application/json",
            },
          }
        );

        return res.status(200).json({ embedToken: embedResponse.data.token });
      } catch (error) {
        console.error("Ошибка при получении токена Power BI для встраивания:", error);
        return res.status(500).json({ error: "Не удалось получить токен встраивания Power BI" });
      }
    };
    

В ходе своих исследований я обнаружил, что вам также необходимо разрешить права приложения (хотя мне нужно подтверждение на это), но он показывает только Tenant, чтобы убедиться, что я предоставил изображение здесь: Разрешение приложения