Power BI service throwing 403 error when using token to embed Power BI report

0 votes

I'm using angular-adal4 npm pachage and using it, i'm trying to embed Power bi on an Angular app that is based on the adal.js for the authentication.

The authentication is working correctly and the app is retrieving a a token, but when I try to use the token to embed the Power BI report i'm getting 403 error from power BI service.

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;
    }
}
Oct 3, 2018 in Power BI by lina
• 8,110 points

edited Oct 3, 2018 by lina 777 views
Can you please give some more information like your AAD configuration.

2 answers to this question.

0 votes

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

answered Oct 3, 2018 by Kalgi
• 42,330 points
could you please detail on this, what exactly is the "'aud' property inside"? Thank you
0 votes
To add to @Kalgi's answer, Also make sure you've granted all the required permissions in azure portal to embed reports and dashboard.
answered Oct 3, 2018 by Nilesh
• 6,880 points

Related Questions In Power BI

0 votes
1 answer

Is it possible to manage limits while using dedicated capacity power bi embedded app service?

These limits are not related to using ...READ MORE

answered Sep 24, 2018 in Power BI by Hannah
• 16,300 points
78 views
0 votes
1 answer

How to publish .pbix report from power bi desktop to power bi service directly?

To save powerbi file directly to report ...READ MORE

answered Sep 27, 2018 in Power BI by Kalgi
• 42,330 points
289 views
0 votes
1 answer

How to add an image to power bi report – power bi web

There are visuals (e.g. table) that can ...READ MORE

answered Sep 27, 2018 in Power BI by Kalgi
• 42,330 points
45 views
0 votes
1 answer
0 votes
1 answer

Displaying Table Schema using Power BI with Azure IoT Hub

Answering your first question, Event Hubs are ...READ MORE

answered Aug 1, 2018 in IoT (Internet of Things) by nirvana
• 3,060 points
105 views
0 votes
1 answer

Unable to install connector for Power Bi and PostgreSQL

I think the problem is not at ...READ MORE

answered Aug 21, 2018 in Power BI by nirvana
• 3,060 points
751 views
+2 votes
2 answers

Migrate power bi collection to power bi embedded

I agree with Kalgi, this method is ...READ MORE

answered Oct 11, 2018 in Power BI by Hannah
• 16,300 points
138 views
0 votes
1 answer

Connect power bi desktop to dataset and create custom reports

Yes using Power BI REST API to ...READ MORE

answered Sep 18, 2018 in Power BI by Kalgi
• 42,330 points
136 views
+1 vote
2 answers

403 error thrown by power bi report server when trying to get list of data sets

Hey @saranya, Try removing the header and ...READ MORE

answered Oct 29, 2018 in Power BI by Kalgi
• 42,330 points
211 views
0 votes
3 answers

How do I get token using javascript API while trying to embed graphs using Power BI

Use ADAL.js that will give you an ...READ MORE

answered Jun 22 in Power BI by anonymous
753 views