Power BI 嵌入 Angular UI 应用程序中

Question

我们开发了 Power BI 报告，并且需要将 Power BI 报告嵌入到 Angular 应用程序中。Angular 应用程序使用 OAuth 身份验证。我们已经了解了如何嵌入 Power BI 报告（如链接中所述 - 为客户嵌入 - https://learn.microsoft.com/en-us/power-bi/developer/embedding#embedding-for-your-customers）

我们还需要在 Power BI 报告中进行细粒度授权。是否可以根据登录 Angular UI 应用程序的用户来过滤数据？

Answer 1

是的，有可能，我使用过Ngx-power-bi。尝试这个：

private powerBiService: NgxPowerBiService;
private pbiContainerElement: HTMLElement;

private reportId = "YOUR REPORT ID";
private groupId = "YOUR GROUP ID";
private filterPaneEnabled= false;
private navContentPaneEnabled= true;
    
constructor(private authService: AuthService,private dashboardService:DashboardService) {
this.powerBiService = new NgxPowerBiService();
}

ngOnInit() {

//Get the token from backend, You may use switchMap or flatMap 
//to get the user data (table, column, value etc)

this.dashboardService.getAccessToken().pipe(untilDestroyed(this)).subscribe(token=>{
    const config = {
        type: 'report',
        id: this.reportId,
        embedUrl:
          'https://app.powerbi.com/reportEmbed?' +
          'reportId='+this.reportId +
          '&groupId='+ this.groupId,
        accessToken:token.accessToken,
        settings: {
          filterPaneEnabled: this.filterPaneEnabled,
          navContentPaneEnabled: this.navContentPaneEnabled
        },
        filters:[{
            $schema: "http://powerbi.com/product/schema",
            filterType:1,
            target: {
              table: "Master", // filter table
              column: "companyId" // filter column
            },
            operator: "In",
            values: [101]   // value that you need to filter

          }]
      };
    this.pbiContainerElement = <HTMLElement>(document.getElementById('pbi-container'));
    this.powerBiService.embed(this.pbiContainerElement, config);
})