PowerBI Embed in Angular "User Owns Data" | Getting InteractionRequiredAuthError: AADSTS65001...

I am trying to embed a PowerBI report in angular web application using "User Owns Data" method.

Design Philosophy


The idea is to login to my web application where Azure AD authenticates the user, then the user provides this Azure AD provided access token to the power bi service and get the embed token for the report. Of course, the user needs to have access to organization's power bi and the report. I have followed these steps.

Set Up App Registration with below API permission




Publish report from premium workspace in app.powerbi.com

• I have pro license and Admin access to the workspace
• I published the report
• I granted access to my team members

Created an angular web app

auth.service.ts


export class AuthService {
private msalConfig = {
auth: {
clientId: environment.clientId,
authority: environment.authority,
redirectUri: environment.redirectUri,
},
};

private msalInstance = new Msal.UserAgentApplication(this.msalConfig);

login() {
console.log(this.msalInstance)
return this.msalInstance.loginPopup({
scopes: ['openid', 'profile', 'user.read'],
});
}

getAccessToken() {
return this.msalInstance.acquireTokenSilent({
scopes: ['openid', 'profile', 'Tenant.Read.All'],
});
}
}


I used msal ClientId I used here is from the earlier App Registration step and the redirect url is 'http://localhost/4200'.

report.component.html


<powerbi-report [embedConfig]="embedConfig"></powerbi-report>

report.component.ts


export class ReportComponent implements OnInit {
@ViewChild(PowerBIReportEmbedComponent)
reportObj!: PowerBIReportEmbedComponent;
embedConfig!: IReportEmbedConfiguration;
eventHandlersMap = new Map([
[
'loaded',
(e: any) => {
console.log('Loaded:', e);
},
],
[
'rendered',
(e: any) => {
console.log('Rendered:', e);
},
],
]) as Map<
string,
(event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null
>;

constructor(private authService: AuthService) {}

ngOnInit(): void {
this.authService
.login()
.then((res: any) => {
console.log('Login Success', res);
this.authService
.getAccessToken()
.then((r: any) => {
console.log(r);
this.updateCongiguration(r.accessToken);
})
.catch((e) => {
console.error('Error fetching access token:', e);
});
})
.catch((err) => {
console.error('Error during login:', err);
});
}

updateConfiguration(accessToken: string) {
this.embedConfig = {
type: 'report',
embedUrl: environment.embedUrl,
tokenType: models.TokenType.Aad,
accessToken,
settings: {
panes: {
filters: {
expanded: false,
visible: true,
},
},
background: models.BackgroundType.Transparent,
},
};
}
}

package.json


"msal": "^1.4.18",
"powerbi-client-angular": "^3.0.5",

The error


When the component initializes, msal successfully completes the login. After successful login, when it tries to get the powerbi access token I am getting below error -

Error fetching access token: InteractionRequiredAuthError:
AADSTS65001: The user or administrator has not consented to use the
application with ID {client id of my app registration} named {my app
registration name}. Send an interactive authorization request for this
user and resource. Trace ID: {trace id} Correlation ID: {correlation
id}​

I think the issue is at the API access provided in the app registration for my web app, but I am not sure. What I am doing wrong? Any help will be appreciated.

Continue reading...