Question

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

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

我已经检查了应用程序在Azure中的权限是更正，我能够使用.NET库提取正确的令牌，并使用角度应用程序中的令牌代码嵌入工作。

我一直在阅读adal.js库，我看到它正在发送一个带有response_type＆＃34; id_token＆＃34;的请求，我在.NET中使用的示例是发送一个response_type＆＃34; code＆＃34;

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

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

有人可以帮我解决这个问题吗？

我会很高兴任何建议/最佳实践分享。谢谢！

AAD Configuration `

adalConfig: { instance: "https://login.microsoftonline.com/", tenant: 'xx.com', clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', loginResource: "https://analysis.windows.net/powerbi/api", postLogoutRedirectUri: 'http://localhost:4200/logout', },

＆＃13;

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;
    }
}

＆＃13;

Answer 1

确保Aad令牌具有正确的＆＃39; aud＆＃39;内部属性，以便它可以与powerbi / api端点通信......

此外，请确保您已在Azure门户中授予权限并在令牌中具有正确的范围，即您已为嵌入报表（Reports.Read.All）或仪表板（Dashboard.Read.All）添加了正确的权限。在Azure（或Power BI）中注册您的应用程序时

Power BI，Angular和ADAL.JS

1 个答案: