Forum Discussion

ajhops's avatar
ajhops
Frequent Visitor
9 years ago

Integrate tile into an app sample javascript error.

Following the steps in the sample here: https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-tile/

 

In the final step, load the tile into an iFrame I have a problem posting the messageStructure to the iframe source. 

var messageStructure = {
        action: "loadTile",
        accessToken: document.getElementById('MainContent_accessToken').value,
        height: 500,
        width: 500
    };
    message = JSON.stringify(messageStructure);

    // Push the message
    document.getElementById('iFrameEmbedTile').contentWindow.postMessage(message, "*");;

 

A Javascript error occurs in powerbivisualrenderer.min.js when the atob method is called on a string that is not base64 encoded. My hunch is that the access token is supposed to be a valid base64 string. I verified that by passing in a valid base64 string in the accessToken variable, and the error ceased (but of course I got a 403 forbidden). 

 

My access token is 1475 characters long with no "=" sign at the end and is definitely not a base64 encoded string. The access token is working everywhere else in that example in the server side code when sent in the authorization header. 

 

So, is the accessToken supposed to be a Base64 encoded string? If not, what would cause this error:

 

caught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
at T (https://app.powerbi.com/13.0.1700.1256/scripts/powerbivisualrenderer.min.js:2:16257)
at Object.success (https://app.powerbi.com/13.0.1700.1256/scripts/powerbivisualrenderer.min.js:2:10067)
at j (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js:2:26860)
at Object.fireWith [as resolveWith] (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js:2:27673)
at x (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js:4:11120)
at XMLHttpRequest.<anonymous> (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js:4:14767)

7 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago

    ajhops

    I don't experience that error. My token is a long string starts with "eyJ0eX....". Here is a static HTML which works perfect in my test, just replace the embed url and token with the ones in your case.

     

     

    <html lang="en">
<head> 
    <script type="text/javascript">

        window.onload = function () {
		
		updateEmbedTile(); 
        };

        var width = 500;
        var height = 500; 

        // update embed tile
        function updateEmbedTile() {
            // replace your embed url here
            var embedTileUrl = "https://app.powerbi.com/embed?dashboardId=f1f5155b-c6e2-4147-991b-28d914927d05&tileId=2dcd2a32-725e-4454-9753-b3e01e41a4a1";
            if ("" === embedTileUrl)
                return;

            // to load a tile do the following:
            // 1: set the url, include size.
            // 2: add a onload handler to submit the auth token
            iframe = document.getElementById('iFrameEmbedTile');
            iframe.src=embedTileUrl + "&width=" + width + "&height=" + height;
            iframe.onload = postActionLoadTile;
        }

        
        // post the auth token to the iFrame. 
        function postActionLoadTile() {
            // replace your token here
            accessToken = "eyJ0eXAiOiJKV....kGoJT_tGqBbsXCv60YIXJZTdheFAiwFw";

            // return if no a
            if ("" === accessToken)
                return;

            var h = height;
            var w = width; 

            // construct the push message structure
            var m = { action: "loadTile", accessToken: accessToken, height: h, width: w};
            message = JSON.stringify(m);

            // push the message.
            iframe = document.getElementById('iFrameEmbedTile');
            iframe.contentWindow.postMessage(message, "*");;
        }

    </script>
</head>
<body>

<iframe ID="iFrameEmbedTile" src="" height="500px" width="500px" frameborder="0" seamless></iframe>

 
</body>
</html>

     

    • ajhops's avatar
      ajhops
      Frequent Visitor
      9 years ago

      Thank you for your reply! I still get the same error. My access token also starts with "eyJ0eXAiOiJ" and is very long. There are no new lines in the string and no whitespace. Can you do me one quick favor and open your browser developer console and execute:

       

      atob("YOUR_ACCESS_TOKEN")

      and tell me if you get an error. 

      • Eric_Zhang's avatar
        Eric_Zhang
        Microsoft Employee
        9 years ago

        ajhops

         

        I've got the same error, however I can still embed with that token. 

         

         

        Embedding is working fine with the HTML in my previous reply. All responses 200(ok).

         

        Not sure if it is the issue of the cluster node, will you try to replace the app.powerbi.com in the embed url with below IP, it is the actual remote server in my test, captured from the chrome dev tool.

        https://13.78.91.196/embed?dashboardId=f1f5155bxxxxx914927d05&tileId=2dcd2a32-725e-4454-9753-b3