Search results

Embed Dashboards using SSO in Bold BI

Bold BI supports embedding the dashboards to other web applications using Single Sign-On authentication.

Steps to embed dashboards

Below are the steps to embed dashboards into other web applications.

NOTE: A similar procedure should be followed to render the multi-tab dashboard in view mode.

Get embed secret code

  1. Go to the settings page and click Embed. Enable the Enable embed authentication under that page.

    Enable embed authentication

  2. Click Generate Secret button.

    Generate secret code

  3. On clicking it, the secret code will be generated. Save the secret key safely, as it will not be able to retrieve or restore this generated secret.

    Copy secret code

  4. Once the secret code is generated, it can be regenerated by clicking the Regenerate Secret button.

    Regenerate secret code

Warning : Resetting this code will break the previously working embedded dashboards.

Creating the embed URL for view mode

The embed URL should be in the following format.

{dashboard URL}/{embed parameters}&embed_signature={signature}

Example: http://test.boldbi.com/bi/en-us/site/site1/dashboards/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?embed_nonce=3e253410-1a82-4fb3-a337-122a8007dafc&embed_user_email=test@syncfusion.com&embeds=sdwd&embed_dashboard_views_edit=true&embed_dashboard_views=true&embed_dashboard_export=true&embed_dashboard_comments=true&embed_widget_comments=true&embed_dashboard_favorite=true&embed_timestamp=1583928213&embed_expirationtime=100&embed_signature=VYrDMVX4h85PrRBKX9mystRHYkU8z+HVC9bkVMc2qGY='

Please find the details of the parameter in the URL as follows.

Parameter Description
dashboard URL URL of the dashboard to be embed.
embed parameters Parameters required to embed the dashboard with SSO.
signature Authorized key for the dashboard to be embed.

Parameters to generate the signature in the embed URL

The below values are necessary to form the signature

Parameter Mandatory Description Example
embed_nonce Yes Random string that restricts the URL reconstruction or attacks from the hackers. 0fa8d95d-e262-4a89-0976-390e3a57ee50
embed_user_email Yes The email id of the user. test@syncfusion.com
embed_dashboard_views No This value makes you to check the views in the embedded dashboard. true
embed_dashboard_views_edit No This value allows you to perform the actions such as save view, update view and delete views in the embedded dashboard. true
embed_dashboard_export No The export option to various format of the dashboard and widget in embedded dashboard is displayed based on this value. true
embed_dashboard_comments No The actions related to comments such as post, edit, delete, reply, watch, un-watch, posting the image and user mention list options can be performed in dashboard based on this value. true
embed_widget_comments No The actions related to comments such as post, edit, delete, reply, posting the image and user mention list options can be performed in widgets based on this value. true
embed_dashboard_favorite No The embedded dashboard can be marked as favorite based on this value. true
embed_datasource_filter No The embedded dashboard can be filtered with passed Dashboard Parameter and URL Parameter. `If you would like to pass Dashboard Parameter - embed_datasource_filter=&&Parameter1=Value1`
`If you would like to pass URL Parameter - embed_datasource_filter=&Parameter2=Value2`
`If you would like to pass both Dashboard and URL parameter - embed_datasource_filter=&&Parameter1=Value1&Parameter2=Value2`
embed_timestamp Yes The current time as UNIX time stamp. The embed URL formed is valid for 5 minutes from this embed time stamp. 1583934776
embed_expirationtime No Set the duration for the token to be alive. It must be represented in seconds. The default time is 86400 s and the maximum is 604800 s. 604800

Generating the signature for the embed URL

Parameter Mandatory Description Example
embed_signature Yes A signature generated using the secret code to authenticate the embed URL. VYrDMVX4h85PrRBKX9mystRHYkU8z+HVC9bkVMc2qGY=

The embed parameter should be formed as in the below format.

embed_nonce=55a1c8f4-5015-487d-8463-d3ebeae655fd&embed_user_email=test@syncfusion.com&embed_dashboard_views_edit=true&embed_dashboard_views=true&embed_dashboard_export=true&embed_dashboard_comments=true&embed_widget_comments=true&embed_dashboard_favorite=true&embed_timestamp=1583935418&embed_expirationtime=100

To obtain the signature for the embed URL, pass the query parameters as an argument to the below GetSignatureUrl method. It will return the hashed signature, which you must append to the existing query parameters with the query parameter name as ‘embed_signature’.

        
        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);
            }
        }

We have provided the code snippet to generate the signature in C#. You can write the equivalent code in your platform language.

Available parameter

Name Type In Dashboards In Widgets
embed_dashboard_comments boolean Show/hide dashboard comments NA
embed_widget_comments boolean NA Show/hide widget comments
views boolean Show/hide dashboard views NA
export boolean Show/hide dashboard export option Show/hide widget export option
hide_header boolean Show/hide dashboard header NA
hide_tool string Predefined values: tm-Theme,dp-Dashboard Parameter,fo-Filter Overview,fs-FullScreen,rf-Refresh,om-Option Menu NA
hide_widget_tool string NA Predefined values: fr-Filter,fs-FullScreen,om-Option Menu

How to pass the dashboard parameter and URL parameter filters in embed URL

In embed URL, you can pass both types of filters(Dashboard Parameter/URL Filter Parameter) values at the same time.

Pass your filters to the embed_datasource_filter URL parameter in the embed URL as follows.

Example: http://test.boldbi.com/bi/en-us/site/site1/dashboards/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?embed_nonce=3e253410-1a82-4fb3-a337-122a8007dafc&embed_user_email=test@syncfusion.com&embeds=sdwd&embed_dashboard_views_edit=true&embed_dashboard_views=true&embed_dashboard_export=true&embed_dashboard_comments=true&embed_widget_comments=true&embed_dashboard_favorite=true&embed_timestamp=1583928213&embed_expirationtime=100&embed_datasource_filter=&&dashboardparameter1=value1&urlparameter1=value1&embed_signature=VYrDMVX4h85PrRBKX9mystRHYkU8z+HVC9bkVMc2qGY=
  • In the embed URL, the dashboard parameter filter must be started with a double ampersand &&. For more details, Refer to this link.

  • In the embed URL, the URL filter parameter must be started with a single ampersand &. For more details, refer to this link .

Creating the embed URL to create dashboard

The embed URL should be in the following format.

{create dashboard URL}/{embed parameters}&embed_signature={signature}

Example: http://test.boldbi.com/bi/en-us/site/site1/dashboard-designer?embed_nonce=3e253410-1a82-4fb3-a337-122a8007dafc&embed_user_email=test@syncfusion.com&embeds=sdwd&embed_timestamp=1583928213&embed_signature=VYrDMVX4h85PrRBKX9mystRHYkU8z+HVC9bkVMc2qGY='

Please find the details of the parameter in the URL as follows.

Parameter Description
create dashboard URL URL to create a new dashboard
embed parameters Parameters required to embed the dashboard in create mode with SSO.
signature Authorized key for embedding the dashboard in create mode.

Creating the embed URL for edit dashboard

The embed URL should be in the following format.

{dashboard edit URL}/{embed parameters}&embed_signature={signature}

Example: http://test.boldbi.com/bi/en-us/site/site1/dashboard-designer/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?embed_nonce=3e253410-1a82-4fb3-a337-122a8007dafc&embed_user_email=test@syncfusion.com&embeds=sdwd&embed_timestamp=1583928213&embed_signature=VYrDMVX4h85PrRBKX9mystRHYkU8z+HVC9bkVMc2qGY='

Please find the details of the parameter in the URL as follows.

Parameter Description
dashboard edit URL URL of the dashboard to be edited.
embed parameters Parameters required to embed the dashboard in design mode with SSO.
signature Authorized key for the dashboard to be embed.

Parameters to generate the signature in the embed URL

The following values are necessary to form the signature.

Parameter Description Example
embed_nonce Random string that restricts the URL reconstruction or attacks from the hackers. 0fa8d95d-e262-4a89-0976-390e3a57ee50
embed_user_email The email id of the user. test@syncfusion.com
embed_timestamp The current time as UNIX time stamp. The embed URL formed is valid for 5 minutes from this embed time stamp. 1583934776

Sample to embed dashboard using SSO authentication

You can download the sample here.