Hi
I am struggling to embed a power bi report into a web application.
I created an Azure App and granted the Power BI Service authentication but still receiving error.
This is the error that appears in developer tools in the web browser: and then the steps i took:
blazor.server.js:19
[2022-02-11T13:49:10.049Z] Error: Microsoft.Rest.HttpOperationException: Operation returned an invalid status code 'Unauthorized'
at Microsoft.PowerBI.Api.ReportsOperations.GetReportInGroupWithHttpMessagesAsync(Guid groupId, Guid reportId, Dictionary`2 customHeaders, CancellationToken cancellationToken)
at Microsoft.PowerBI.Api.ReportsOperationsExtensions.GetReportInGroupAsync(IReportsOperations operations, Guid groupId, Guid reportId, CancellationToken cancellationToken)
at BlazorPowerBIEmbed.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\Users\ic\Desktop\Sandbox\BlazorPowerBIEmbed\BlazorPowerBIEmbed\Pages\Index.razor:line 55
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Simple, Blazor Service Side App
_Host.cshtml
<script src="js/powerbi.min.js"></script>
<script>
window.ShowMyPowerBI = {
showReport: function (reportContainer, accessToken, embedUrl, embedReportId) {
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
// Embed the report and display it within the div container.
powerbi.embed(reportContainer, config);
},
};
</script>
PowerBI.razor
@page "/PowerBI"
@using System.Net.Http
@using System.Threading.Tasks
@using Microsoft.Identity.Client
@using Microsoft.PowerBI.Api
@using Microsoft.PowerBI.Api.Models
@using Microsoft.Rest
@using Newtonsoft.Json.Linq
@using Microsoft.Extensions.Configuration
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
@inject IConfiguration _configuration
<h3>PowerBI Embedded</h3>
<div @ref="@PowerBIElement" style="width:100%;height:600px;max-width: 2000px" />
@code {
private ElementReference PowerBIElement;
string TenantID = "asdf";
string ClientID = "asdf";
string ClientSecret = "asdf";
string workspaceId = "asdf";
string reportId = "asdf";
protected override async Task
OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var result = new PowerBIEmbedConfig();
// Authenticate using created credentials
AuthenticationResult authenticationResult = null;
authenticationResult = await DoAuthentication();
var tokenCredentials =
new TokenCredentials(authenticationResult.AccessToken, "Bearer");
using (var client = new PowerBIClient(
new Uri("https://api.powerbi.com/"), tokenCredentials))
{
var report =
await client.Reports.GetReportInGroupAsync(
new Guid(workspaceId),
new Guid(reportId));
var generateTokenRequestParameters =
new GenerateTokenRequest(accessLevel: "view");
var tokenResponse =
await client.Reports.GenerateTokenAsync(
new Guid(workspaceId),
new Guid(reportId),
generateTokenRequestParameters);
result.EmbedToken = tokenResponse;
result.EmbedUrl = report.EmbedUrl;
result.Id = report.Id.ToString();
await Interop.CreateReport(
JSRuntime,
PowerBIElement,
tokenResponse.Token,
report.EmbedUrl,
report.Id.ToString());
}
}
}
private const string AuthorityFormat = "https://login.microsoftonline.com/{0}/v2.0";
private const string MSGraphScope = "https://analysis.windows.net/powerbi/api/.default";
private async Task<AuthenticationResult>
DoAuthentication()
{
IConfidentialClientApplication daemonClient;
daemonClient = ConfidentialClientApplicationBuilder.Create(ClientID)
.WithAuthority(string.Format(AuthorityFormat, TenantID))
.WithClientSecret(ClientSecret)
.Build();
AuthenticationResult authResult =
await daemonClient.AcquireTokenForClient(new[] { MSGraphScope }).ExecuteAsync();
return authResult;
}
}
