cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Yaostha Regular Visitor
Regular Visitor

PowerBI Embed in web application using powerbi.js and ADAL.js

Hi,

   I am using below code to embed powerbi reports and dashboards on my web application.

Would like is there any other better and efficient method of doing this? what i am doing is having any security issues?

How do i avoid having the Azure Active Directory App ID (clientid) visible to end user when i do view source? Any way of decrypting or masking the clientid?

 

<script src="~/jquery-1.9.1.min.js"></script>
<script src="~/adal.min.js"></script>
<script src="~/powerbi.js"></script>

<script type="text/javascript">
(function() {

"use strict";

var subscriptionId = 'tenantname.onmicrosoft.com';
// Copy the client ID of your AAD app here once you have registered one, configured the required permissions, and
// allowed implicit flow https://msdn.microsoft.com/en-us/office/office365/howto/get-started-with-office-365-unified-api
var clientId = 'guid';
var config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
resource: 'https://analysis.windows.net/powerbi/api',
prompt: 'none',
cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
embedUrlBase: 'https://app.powerbi.com/reportEmbed',
dashboardId: 'guid of dashboard',
groupId: 'guid of group',
response_type:'id_token'
};

// AuthenticationContext is coming from ADAL.min.js
var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);

authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// If not logged in force login
var user = authContext.getCachedUser();

if (!user) {
//alert('user login required');
authContext.login();
//alert('user login completed');
}

// Acquire token for resource.
authContext.acquireToken(config.resource, function(error, token) {
// alert('acquireToken fn called');
// Handle ADAL Errors.
if (error || !token) {
alert('ADAL error occurred: ' + error);
console.log('ADAL error occurred: ' + error);
return;
}

// Store our token
config.authToken = token;

$(document).ready(function(){

var models = window['powerbi-client'].models;

// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
//var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=guidofreport&groupId=guidofgroup';
//var embedUrl = 'https://app.powerbi.com/dashboardEmbed?dashboardId=guidofdashboard&groupId=guidofgroup';
var embedUrl = "https://app.powerbi.com/dashboardEmbed?dashboardId="+ config.dashboardId +"&groupId="+ config.groupId;

// alert(embedUrl);
var pbiconfig = {
type: 'dashboard',
tokenType: models.TokenType.Aad,
accessToken: config.authToken,
embedUrl: embedUrl,
id: config.dashboardId,
pageView: 'fitToWidth'
};
var pbiconfigmessage = JSON.stringify(pbiconfig);


// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#divDashBoardContainer')[0];

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, pbiconfig);

// Get a reference to the embedded dashboard.
var dashboard1 = powerbi.get(dashboardContainer);

// Displays the dashboard in full screen mode.
dashboard1.fullscreen();
// push the message.
// iframe.contentWindow.postMessage(message, "*");;
});

});
})();

</script>

<div id="divDashBoardContainer" style="height:758px; border-style: double; border-color: aqua; border-width: thick; "></div>

 

Thank you

 

Regards,

Yasotha

1 REPLY 1
Microsoft v-jiascu-msft
Microsoft

Re: PowerBI Embed in web application using powerbi.js and ADAL.js

Hi Yasotha,

 

I would suggest you try these demo here. Related reference:

https://stackoverflow.com/questions/36870522/hiding-my-admin-login-information-html

https://stackoverflow.com/questions/38015985/securing-web-config-settings

https://stackoverflow.com/questions/5549374/how-to-disable-directory-browse-in-web-config

 

Best Regards,

Dale

Community Support Team _ Dale
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
New Ranks and Rank Icons in 2020

New Ranks and Rank Icons in 2020

Read the announcement for more information!

New Kudos Given Badges Coming

New Kudos Given Badges Coming

We're rolling out new Kudos Given badges. Find out how many Kudos you've given.

November 2019 Community Highlights

November 2019 Community Highlights

Get an overview of the events and great community content from November.

Power Platform World Tour

Power Platform World Tour

Find out where you can attend!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)