Forum Discussion
Troubleshooting 'Get report failed' Error When Embedding Power BI Report in webpage
I am trying to embed a Power BI report into my Laravel project using the Power BI REST API. The report is loading successfully. Although to load that report currently I am using an Access Token which I got in the 'Learn Microsoft- REST API Try It' console.
Using the code below, my report loads successfully if I use the access token which I got in the 'Learn Microsoft- REST API Try It'.
I am also generating an Access Token using Postman using these headers, parameters and URL with the help of this documentation. (First Case: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow)
URL: https://login.microsoftonline.com/{$tenantID}/oauth2/v2.0/token
Request headers:- Content-Type : application/x-www-form-urlencoded
Request Body:
In x-www-form-urlencoded,
client_id : 'clientID',
scope : 'https://analysis.windows.net/powerbi/api/.default',
client_secret : 'client_secret',
grant_type : 'client_credentials'
But, if I use the Access Token generated using the above Postman request to load Powerbi report in my project then I get this error.
Here's the code I am using to load powerbi report (using Powerbi Rest Api) using the Access Token generated by 'Learn Microsoft- REST API Try It' console.
<html>
<head>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/models.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/models.min.js"></script>
</head>
<body>
<div id="embedContainer"></div>
<script>
let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
let report;
const models = window['powerbi-client'].models;
function embedPowerBIReport() {
const accessToken = 'access token';
const embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=7rfxxxxxxxxxxxxxxxxxxxxx';
const embedReportId = '7rfxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const tokenType = '0';
const permissions = models.Permissions.All;
const config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
}
}
};
const embedContainer = $('#embedContainer')[0];
report = powerbi.embed(embedContainer, config);
report.off("loaded");
report.on("loaded", function () {
loadedResolve();
report.off("loaded");
});
report.off("error");
report.on("error", function (event) {
console.log(event.detail);
});
report.off("rendered");
report.on("rendered", function () {
renderedResolve();
report.off("rendered");
});
}
embedPowerBIReport();
async function applyFilter() {
const filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "WBL-AllReviews-Export Less Records",
column: "Partner Name"
},
operator: "In",
values: ["WBL Central", "WBL Western"]
};
await reportLoaded;
await reportRendered;
await report.updateFilters(models.FiltersOperations.Add, [filter]);
}
try {
setTimeout(applyFilter);
console.log("Report filter was added.");
}
catch (errors) {
console.log(errors);
}
</script>
</body>
</html>
As I mentioned you need to use an App registration to surpass the Outh2
Please watch this video
https://m.youtube.com/watch?v=2RZkc_qrV1g&t=610s
You need to be aware using this method will only get you the last 30 days of data.
6 Replies
use jwt.io to validate that your token has the required scope.
Hi lbendlin , As you said I decoded both tokens, and I found different payload data for both tokens. The one which I got from 'Microsoft-Learn Try It Rest Api' have scopes and the other one which I got from the postman request have 'roles' instead of 'scopes'. I am posting a difference here.
Please advice me what should I do to obtain the access token that I received from 'Microsoft REST API Try It Console'Payload data in token I got from 'Microsoft Try It' it
{
"rh": "0asdfaxxxxxxxxxxxxxxxxxxxxx",
"scp": "App.Read.All Capacity.Read.All Capacity.ReadWrite.All Content.Create Dashboard.Read.All Dashboard.ReadWrite.All Dataflow.Read.All Dataflow.ReadWrite.All Dataset.Read.All Dataset.ReadWrite.All Gateway.Read.All Gateway.ReadWrite.All Pipeline.Deploy Pipeline.Read.All Pipeline.ReadWrite.All Report.Read.All Report.ReadWrite.All StorageAccount.Read.All StorageAccount.ReadWrite.All Tenant.Read.All Tenant.ReadWrite.All UserState.ReadWrite.All Workspace.Read.All Workspace.ReadWrite.All",
"signin_state": [
"kmsi"
],
"sub": "xxxxxxxxxxxxx",
"tid": "TenantID",
"unique_name": "MyEmailId",
"upn": "MyEmailId",
"uti": "",
"ver": "1.0",
"wids": [
"xxxxxxxxxxxxxxxx"
]
}
Payload Data I got from Access Token which I got by Postman request
{
"rh": "0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"roles": [
"Tenant.ReadWrite.All",
"Tenant.Read.All"
],
"sub": "xxxxxxxxxxxxxxxxxxxxxxxx",
"tid": "Tenant Id",
"uti": "xxxxxxxxxxxxxxxxxxx",
"ver": "1.0"
}You need scopes, not roles. You probably need to register an app and then use the app credentials in Postman.
