How to Embed the Dashboards of Multiple Tenant using JavaScript Embedding?
When integrating Bold BI dashboards into your applications, you might wonder if you need to set up a separate Authorization Server REST API for each site. But you can use a single Authorization Server REST API with minor adjustments to embed dashboards of multiple sites. This article will guide you through the process of embedding Bold BI dashboards from different sites using a simple approach.
To embed dashboards from various sites, you need to adjust the following parameters:
- Site Identifier: This parameter is employed to pinpoint the relevant tenant.
- Email ID: Used to generate an access token for accessing Bold BI server resources.
- Dashboard ID: Specifies the dashboard to be embedded.
Code modification in the front-end application
Here’s an example code showing the parameters to be adjusted in the BoldBI.create() method to embed dashboards of different tenants:
Based on the site you should change the values of siteIdentifier, and dashboardId with the appropriate values.
function renderDashboard() {
this.dashboard = BoldBI.create({
serverUrl: rootUrl + "/" + siteIdentifier,
dashboardId: dashboardId,
embedContainerId: "dashboard",
mode: BoldBI.Mode.View,
embedType: embedType,
environment: environment,
width: "100%",
height: "100%",
expirationTime: 100000,
authorizationServer: {
url: authorizationServerUrl
},
});
console.log(this.dashboard);
this.dashboard.loadDashboard();
}
Code modification in the back-end application
Ensure that the &embed_user_email= value is set to the user email associated with the site and who has the necessary permissions to read the dashboard. The common “Embed Secret Key” can be obtained from the User Management Server (UMS) and is valid across different sites.
Below is a C# example of an Authorization Server REST API implementation:
[HttpPost]
[Route("AuthorizationServer")]
public string AuthorizationServer(string embedQuerString, string dashboardServerApiUrl)
{
embedQuerString += "&embed_user_email=" + "user@domain.com";
double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
embedQuerString += "&embed_server_timestamp=" + timeStamp;
var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
var embedDetailsUrl = "/embed/authorize?" + embedQuerString + embedSignature;
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(dashboardServerApiUrl);
client.DefaultRequestHeaders.Accept.Clear();
var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
string resultContent = result.Content.ReadAsStringAsync().Result;
return resultContent;
}
}
public string GetSignatureUrl(string queryString)
{
if (queryString != null)
{
var encoding = new System.Text.UTF8Encoding();
var keyBytes = encoding.GetBytes(EmbedSecret);
var messageBytes = encoding.GetBytes(queryString);
using (var hmacsha1 = new HMACSHA256(keyBytes))
{
var hashMessage = hmacsha1.ComputeHash(messageBytes);
return Convert.ToBase64String(hashMessage);
}
}
return string.Empty;
}
Conclusion
By following theses steps you can embed Bold BI dashboards of multiple tenants into your applications. This approach simplifies the integration process and maintains a consistent authentication mechanism across your site.
Additional References
