Javier Rodriguez
Javier Rodriguez

Reputation: 41

Power BI, Angular and ADAL.JS

I am trying to embed Power BI on an Angular App, I am using the angular-adal4 npm package that it is based on the adal.js for the authentication.

The authentication is working correctly and the app is retrieving a token, but when I try to use that token to embed the Power BI report I am retrieving a 403 error from the Power BI service.

I have checked the right that the app has in Azure are the corrects, I am able to extract a correct token using the .NET libraries and using the token code in the angular app the embedding is working.

I have been reading the adal.js library and I saw that is sending a request with response_type "id_token", and the example that I am using with .NET is sending a response_type "code".

After a lot of tests. I am stuck at this point.

I am not sure if I am sending the incorrect config to the adal.js or if the library is not able to retrieve the correct token for Power BI

Could anyone help me with this issue?

I would be happy for any advice / best practice sharing. Thank you!

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', },

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

Upvotes: 3

Views: 1128

Answers (1)

RBreuer
RBreuer

Reputation: 1391

Make sure the Aad token is with the correct 'aud' property inside, such that it can communicate with powerbi/api endpoints...

In addition, make sure you have granted permissions in Azure portal and have the correct scopes in the token, i.e. you have added the correct permissions to embed report (Reports.Read.All) or dashboard (Dashboard.Read.All) when registering your app in Azure (or Power BI)

Upvotes: 1

Related Questions