How to implement "Authorzation server" API in JavaScript embedding?

This article will guide you through the process of embedding a Bold BI dashboard into your application using an authorization server.

Prerequisites

• A Bold BI account with access to the dashboard you want to embed.
• A web application where you want to embed the dashboard.

Steps to Implement the Authorization Server

1. Implement an authorization endpoint in your application. This will act as the bridge between your application and the Bold BI server. You will also need to update the secure details, like email and group-based access if you would like to provide access to users from any group. Learn more about the authorization server here.

2. Create an authorization-server action method in your controller. Copy the following snippet into your controller. You can use the currently logged-in user email at user@domain.com or username at username, but this user should have access permission to the dashboard. To know more about managing permission refer to the help documentation.

[HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
    // Use your user-email as embed_user_email
    embedQuerString += "&embed_user_email=user@domain.com";

    // Use your username as embed_user_email
    //embedQuerString += "&embed_user_email=username";

    //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
    double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
    embedQuery += "&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;
    }
}

3. Add the GetSignatureUrl method. This method will be called from the previous GetEmbedDetails action.

public string GetSignatureUrl(string queryString)
{
    // Get the embedSecret key from Bold BI.
    var embedSecret = "8apLLNabQisvriG2W1nOI7XWkl2CsYY";
    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);
    }
}

Note: The above code snippet is in C#; you can use the language based on your application platform.

Additional References

• JavaScript Embedding
• Authorize Server Documentation
• Managing Permission to dashboard