Embed Power BI Report in HTML Page

Question

I am Trying to embed a Power BI report in an HTML page, now I know how to create the basic code to embed the report in an iframe using javascript, but the problem is that I could not automate the process to generate and refresh the access token in the backend. I was considering making the authentication process using ADAL JS. Anyone has experience in this?, or if someone have any other solution is welcome. Excuse my little knowledge but I am not a developer Thanks in advance

Answer 1

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Refresh-token-using-JavaScript-SDK-example

You can create the token via ADAL.js, or any other AJAX\\HTTP libraries

 function embedReportAndSetTokenListener(setAccessToken = false, reportId, groupId, datasetId, accessLevel, baseUri, embedUrl) { // Generate embed token generateEmbedToken(reportId, groupId) .then(function( Token ) { var embedToken = Token.token; // set config for embedding report var config = createConfig(embedToken,embedUrl,reportId); // Get a reference to the embedded report HTML element var embedContainer = $('#embedContainer')[0]; // Embed the report and display it within the div container. var report = powerbi.embed(embedContainer, config); // Report.off removes a given event handler if it exists. report.off("loaded"); // Report.on will add an event handler which prints to Log window. report.on("loaded", function() { // Set token expiration listener setTokenExpirationListener(Token.expiration, 2 /*minutes before expiration*/, reportId, groupId); }); }); } function setTokenExpirationListener(tokenExpiration, minutesToRefresh = 2, reportId, groupId){ // get current time var currentTime = Date.now(); var expiration = Date.parse(tokenExpiration); var safetyInterval = minutesToRefresh* 60 * 1000; // time until token refresh in milliseconds var timeout = expiration - currentTime - safetyInterval; // if token already expired, generate new token and set the access token if (timeout<=0) { console.log("Updating Report Embed Token"); updateToken(reportId, groupId); } // set timeout so minutesToRefresh minutes before token expires, token will be updated else { console.log("Report Embed Token will be updated in " + timeout + " milliseconds."); setTimeout(function() { updateToken(reportId, groupId); }, timeout); } } function updateToken(reportId, groupId) { // Generate new EmbedToken generateEmbedToken(reportId, groupId) .then(function( Token ) { // Get a reference to the embedded report HTML element var embedContainer = $('#embedContainer')[0]; // Get a reference to the embedded report. var report = powerbi.get(embedContainer); // Set AccessToken report.setAccessToken(Token.token) .then(function() { // Set token expiration listener // result.expiration is in ISO format setTokenExpirationListener(Token.expiration,2 /*minutes before expiration*/); }); }); }