How to Embed Bold BI Dashboards Without Exposing the Bold BI Server

Overview

This section explains about how to embed Bold BI dashboards in a Blazor Server application while keeping the actual Bold BI Server hidden from end users. The browser communicates only with the Blazor app (for example, https://localhost:44342 during development or your app’s public URL in production). The Blazor app then performs all server‑to‑server calls to the Bold BI Server.

Because of this proxy pattern, any URLs visible in the browser’s DevTools show the app’s endpoint (localhost or your domain) instead of the Bold BI Server. In other words, the actual server URL is intentionally masked in client traffic. Example mapping:

• Actual server URL (backend only): https://your-boldbi-server.com/bi/v1.0/design/loaddashboard
• Browser‑visible URL (proxied): https://localhost:44342/v1.0/design/loaddashboard

Use Case

This sample is ideal for:

• Developers integrating Bold BI dashboards into custom web applications.
• Businesses needing to display analytics dashboards to users securely.
• Scenarios requiring restricted client access to the Bold BI Server for security or compliance reasons.

By using this sample, you can embed interactive Bold BI dashboards into your Blazor application, providing a seamless and secure user experience.

Key Benefits

• Security: All API calls are processed server-side, concealing the Bold BI Server URL from clients.
• Simplicity: Easy-to-follow configuration steps for quick setup.
• Compatibility: Built with Bold BI Server and Embed SDK version 12.1.5 or higher.

Prerequisites

Before using the sample, ensure you have:

• Bold BI Server: Version 12.1.5 or higher.
• Embed Secret Key: Obtained from the Bold BI Administration page (Embed tab, with “Enable embed authentication” enabled).
• User Email: A valid Bold BI user account for generating access tokens.

Getting Started with the Sample

The sample application is hosted on GitHub: Bold BI Blazor Embed Sample

Follow these steps to configure and run the sample.

Step 1: Clone the Sample Repository

1. Clone the repository to your local machine.
2. Open the project in Visual Studio or your preferred IDE.

Step 2: Configure Your Credentials

The sample uses an appsettings.json file to store your Bold BI credentials. Update this file to connect to your Bold BI Server.

1. Locate and open appsettings.json in the project root.

2. Replace the placeholder values with your actual Bold BI credentials:

   {
     "BoldBI": {
       "ServerUrl": "https://your-boldbi-server.com/bi", // Your Bold BI Server URL
       "SiteIdentifier": "site/your-site-name", // Your site identifier (e.g., site/tenant1)
       "UserEmail": "user123@domain.com", // Your Bold BI user email
       "EmbedSecret": "your-embed-secret-key-here", // Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page
       "CurrentApplicationControllerPath": "https://localhost:44342" // Url to the dashboard rendering endpoint
     }
   }
   

   Where to find these values:

   • ServerUrl: Your Bold BI Server URL (e.g., https://boldbi-server.com/bi).
   • SiteIdentifier: In Bold BI Server’s site settings (e.g., site/your-site-name).
   • UserEmail: The email of a registered user in your Bold BI Server.
   • EmbedSecret: In Bold BI, navigate to Administration > Embed tab, enable embed authentication, and copy the key.
   • CurrentApplicationControllerPath: Url to the dashboard rendering endpoint.

Step 3: Build and Run the Application

1. Restore project dependencies by running:

   dotnet restore
   

2. Build the project to check for errors:

   dotnet build
   

3. Run the application:

   dotnet run
   

4. Open a web browser and navigate to https://localhost:44342 (or the port displayed in your console).

5. The embedded Bold BI dashboard should now be visible.

   Expected Output:
   

   

Step 4: Verify Secure Embedding

To confirm that the embedding is secure:

1. Open your browser’s developer tools (press F12 and go to the Network tab) and Check the Fetch/XHR requests.

2. Ensure that request URLs point to your Blazor app (e.g., https://localhost:44342/), not the Bold BI Server URL.

   Example Network View:
   

   

Workflow Overview

The diagram below illustrates how the Blazor Server app acts as an intermediate server between the client and the Bold BI Server, ensuring secure embedding.

Workflow Diagram:

How the Sample Works

The sample application demonstrates a secure method for embedding Bold BI dashboards. Below are the key components and their functions:

1. Configuration with appsettings.json

The appsettings.json file stores your Bold BI credentials. The Blazor Server app reads these settings to authenticate and communicate with the Bold BI Server, keeping sensitive data secure on the server side.

2. Authentication with DashboardHelper.cs

The DashboardHelper.cs class manages authentication and API communication:

• GetTokenAsync Method: Generates an access token using the UserEmail and EmbedSecret from appsettings.json.
• HTTP Client: Sends secure server-side requests to the Bold BI Server to retrieve designer payloads.
  
  

3. Dashboard Rendering with RenderDashboard

The RenderDashboard method, located in a controller, processes designer payloads and renders the dashboard:

• It retrieves ServerUrl and CurrentApplicationControllerPath from appsettings.json.
• Makes server-side calls to the Bold BI designer to fetch and display the dashboard.
• Ensures all communication is routed through the Blazor app, not directly from the client.
  
  

4. Security Mechanism

• All API calls to the Bold BI Server are handled server-side, so the client’s browser only interacts with the Blazor app.
• Network traffic, visible in the browser’s Network tab, shows requests to the Blazor app URL, not the Bold BI Server, ensuring security.