Service Principal Embed for Customer works in flas...

kmichielsen · ‎04-15-2024

Greetings,

I'm totally new to PowerBI myself, but for a customer there was a request to make some reports embedded in an Iframe. I've found the tutorial (https://github.com/microsoft/PowerBI-Developer-Samples/blob/master/Python/Embed%20for%20your%20custo...), which works for me. As you can see from the URL I'm developing in python and I'm able to show the required report in Flask. Only change I made was that I needed to add identities to see the report.

I was hoping that the embedUrl provided would been enough, but it was not. I've tried playing around with adding token in the url, but nothing seems to work.

I'm wondering is there something else i need to do for it to work in an iframe. I have not been able to find anything online that seems to point me in the correct direction.

Sorry for the inconvenience, thank you for helping me.

Kevin

kmichielsen · ‎04-17-2024

Hi @Anonymous ,

Thanks for replying.

As said before, the example provided works fine in Flask. Since then I've tried an tested some more.

I've reached the point that my iframe has my embedUrl and access token but is responding with a

Request ID: 95d9f2b6-17cc-560c-63c5-a7f50d8d0cdd
Time: Wed Apr 17 2024 09:09:13 GMT+0200 (Central European Summer Time)
Client version: 2404.2.18827-train
Error message: Get report failed

reportembed.externals.bundle.min.f69870e5931e35be9f49.js:5

GET https://api.powerbi.com/powerbi/globalservice/v201606/clusterdetails 403 (Forbidden)
Which seems odd, since with flask the same data (accessToken & embedUrl work). I've also tried passing the entire json as in the example to the iframe but it needs a specific parameter 'accessToken'

This is my code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded Power BI Report</title>
</head>
<body>
<!-- Button to trigger the updateEmbedReport function -->
<button id="bEmbedReportAction">Load Report</button>

<!-- The iframe where the Power BI report will be embedded -->
<iframe id="iFrameEmbedReport" width="800" height="600" frameborder="0"></iframe>

<script>
    // JavaScript code for updating and loading the Power BI report
    // Similar to what you provided earlier

    // window.onload event handler to attach the click event to the button
    window.onload = function () {
        var el = document.getElementById("bEmbedReportAction");
        if (el.addEventListener) {
            el.addEventListener("click", updateEmbedReport, false);
        } else {
            el.attachEvent('onclick', updateEmbedReport);
        }
    };

    // Function to update and load the Power BI report
    function updateEmbedReport() {
        var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=xxx&groupId=xxxx&w=2&config=xxx';
        var iframe = document.getElementById('iFrameEmbedReport');
        iframe.src = embedUrl;
        iframe.onload = postActionLoadReport;

    }

    // Function to post the access token to the iframe
    function postActionLoadReport() {
        var accessToken = 'xxx';
        var jsonData = {
            'tokenId': 'xx',
            'powerbiToken': 'xxx',
            'tokenExpiry': 'xxx',
            'reportConfig': {
                'reportId': 'xxx',
                'reportName': 'xx',
                'embedUrl': 'https://app.powerbi.com/reportEmbed?reportId=xxx&groupId=xxxx&w=2&config=xxx',
                'datasetId': ['xxx']}}

        var m = { action: 'loadReport', accessToken: accessToken}
        // var m = { action: 'loadReport', accessToken: accessToken, data: jsonData }
        var message = JSON.stringify(m);
        var iframe = document.getElementById('iFrameEmbedReport');
        iframe.contentWindow.postMessage(message, "*");
    }
</script>
</body>
</html>

I found the example here:

https://github.com/uglide/azure-content/blob/master/articles/power-bi-embedded/power-bi-embedded-iframe.md

It shows the html, after pressing the button it gives the error i've posted earlier in this post.
It might be dated. I've no real experience with javascript/html.

Thank you,

Kevin