angular - Power BI、Angular 和 ADAL.JS

Question

我正在尝试将 Power BI 嵌入 Angular 应用程序，我正在使用基于 adal.js 的 angular-adal4 npm 包进行身份验证。

身份验证工作正常，应用正在检索 token ，但当我尝试使用该 token 嵌入 Power BI 报告时，我从 Power BI 服务中检索到 403 错误。

我已经检查了该应用程序在 Azure 中的正确性，我能够使用 .NET 库提取正确的 token ，并在嵌入工作的 Angular 应用程序中使用 token 代码。

我一直在阅读 adal.js 库，我看到它正在发送一个带有 response_type“id_token”的请求，而我在 .NET 中使用的示例正在发送一个 response_type“code”。

经过大量测试。我被困在这一点上。

我不确定我是否向 adal.js 发送了错误的配置，或者库是否无法为 Power BI 检索正确的 token

谁能帮我解决这个问题？

我很乐意分享任何建议/最佳实践。 谢谢!

AAD Configuration `

adalConfig:{ 实例:“https://login.microsoftonline.com/”， 租户:'xx.com'， clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', 登录资源:“https://analysis.windows.net/powerbi/api”， postLogoutRedirectUri: 'http://localhost:4200/logout', },

import { Injectable } from '@angular/core';
import { Component, OnInit, Inject, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { service as PBIService, IEmbedConfiguration, Embed, models } from 'powerbi-client';
import { Adal4Service } from 'adal-angular4';

@Injectable()
export class EmbedingReports {
    component: Embed;
    @Output() embedded: EventEmitter<number> = new EventEmitter<number>();

    constructor (private adalService: Adal4Service, @Inject('PowerBIService') public powerBIService: PBIService.Service) {}

    public embedReport(groupId:string, reportId:string, powerbiFrame: ElementRef) {
        var tokenType  = models.TokenType.Aad;
        var embedUrl  = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${groupId}`;
       
        var accessToken = this.adalService.userInfo.token;
        var id = reportId;
        var type = 'report';
        let config: IEmbedConfiguration = {
            accessToken,
            tokenType,
            embedUrl,
            type,
            id
        }
      
        if (this.validateOptions(accessToken, embedUrl)) {
            this.embed(powerbiFrame.nativeElement, config);
        }
    }

    public embedDashboard(htmlElement, groupId:string, dashboardId:string, powerbiFrame: ElementRef){
        var tokenType  = models.TokenType.Aad;
        var embedUrl  = `https://app.powerbi.com/dashboardEmbed?dashboardId=${dashboardId}&groupId=${groupId}`;
        var accessToken = this.token;
        var id = dashboardId;
        var type = "dashboard";
        let config: IEmbedConfiguration = {
            accessToken,
            tokenType,
            embedUrl,
            type,
            id
        }
      
        if (this.validateOptions(accessToken, embedUrl)) {
        this.embed(powerbiFrame.nativeElement, config);
        }
    }


    private embed(element: HTMLElement, config: IEmbedConfiguration) {
        this.component = this.powerBIService.embed(element, config);
        this.embedded.emit((this.component as any));
      }
    
    
    private validateOptions(accessToken: string, embedUrl: string): boolean {
        if (!(typeof embedUrl === 'string' && embedUrl.length > 0)
            || !(typeof accessToken === 'string' && accessToken.length > 0)
        ) {
            return false;
        }
        return true;
    }
}

Answer 1

确保 Aad token 内部具有正确的“aud”属性，以便它可以与 powerbi/api 端点通信...

此外，请确保您已在 Azure 门户中授予权限并在 token 中具有正确的范围，即您已添加正确的权限以嵌入报告 (Reports.Read.All) 或仪表板 (Dashboard.Read.All)在 Azure(或 Power BI)中注册你的应用时