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

+2 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,220 points

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

2 answers to this question.

+1 vote

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

Ready to take your data skills to new heights? Delve into the details of our Power BI Syllabus and discover the roadmap to transforming your data analysis expertise!

answered Oct 3, 2018 by Kalgi
• 52,350 points
could you please detail on this, what exactly is the "'aud' property inside"? Thank you
+1 vote
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
• 7,060 points

Related Questions In Power BI

0 votes
0 answers
+1 vote
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
• 18,520 points
725 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
• 52,350 points
1,953 views
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,130 points
1,345 views
+1 vote
1 answer

Unable to install connector for Power Bi and PostgreSQL

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

answered Aug 22, 2018 in Power BI by nirvana
• 3,130 points
2,740 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
• 18,520 points
1,515 views
+1 vote
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
• 52,350 points
1,662 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
• 52,350 points
5,091 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, 2019 in Power BI by anonymous
4,580 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP