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