React JS Embedding: Server Authentication via Access Token

Introduction

Embedding analytics in React JS applications is crucial for real-time insights and user experience. React JS embedding empowers developers to integrate analytics seamlessly, enhancing app functionality and interactivity. To enhance the customer experience and simplify the embedding process in applications, Bold BI^® has added Token API member support in the JS embedding feature starting from version 7.10. This ensures secure and efficient data access, providing users with personalized and dynamic analytical experiences.

In this blog post, we will explore how to use the Token API for authenticating dashboard embedding in React-based applications, providing a step-by-step guide to implement access token securely.

Let's get started.

Step 1: Create a React sample

1. First, open the command prompt. Ensure that the Node version is installed in your machine by using command node -v; this will display the version number of Node if it's installed correctly.
   

   node -v

   
   


2. Next, create a react sample using the command npx create-react-app FolderName to set up a new React application in the folder you choose.
   

   npx create-react-app react-sample

   
   


3. After the React application has been created, open the react application in VS code using the code FolderName. Here, we have used the react-sample as our Folder Name.
   

   code react-sample

   
   

   
   Step 2: Create the Bold BI instance

   
   


4. Next, install the Bold BI Embedded SDK NPM package by using the command npm install @boldbi/boldbi-embedded-sdk in your terminal to add the necessary SDK to your project environment.
   

   npm i @boldbi/[email protected]

   
   


5. Next, install the dependent files by using the command npm install to fetch all required dependencies for your project.
   

   npm install

   
   


6. Navigate to the \src folder and create a component named DashboardRendering along with a file named js. Within the DashboardRendering.js file, set up essential properties such as root URL, site identifier, dashboard ID, and token.

You can easily retrieve the root URL, site identifier, and dashboard ID by downloading the embed configuration file or the dashboard's Get link option in Bold BI Server. For more details, refer to the Embed Settings – Embedded BI | Bold BI Documentation.

import React from 'react';

import ' .. /index';

import { BoldBI } from '@boldbi/boldbi-embedded-sdk';



//Rooturl of the BoldBI. This can be domain name/IP/Localhost along with the '/bi' at the end.

const rootUrl = "http://localhost:60011/bi";



//This is by defaul 'site/site1'. If you have created the new tenant in your onpremise version.

const siteidentifier = "site/site1";



//Unique Id of the Dashboard

const DashboardID = "352eb8e9-8a67-4f7a-a4e2-17d92fd7ca5b";



// Use the Token generated by using Server UI.

const access_token ="LCJJUCI6Ijo6MSIsImlzc3V1ZF9kYXRlIjoiMTcxOTU3MM.81i9G7N_DUy2fH41cRM"

[caption id="" align="alignnone" width="804"] Retrieving the Root URL, Site Identifier, and Dashboard ID from the Downloaded Conf File[/caption]

Retrieving the Root URL, Site Identifier, and Dashboard ID from the Downloaded Conf FileTo obtain the access_token, you have the option to generate it from the Bold BI server UI or to use the REST API. You can check this documentation for further reference.

1. Implement the render() method to create the DOM elements and the componentDidMount() method to create the Bold BI instance and render the dashboard in DshboardRendering.js.
   
   

   // Use the Token generated by using Server UI.
   
   const access_token = "LCJJUCI6Ijo6MSIsImlzc3V1ZF9kYXRlIjoiMTcxOTU3MM.81i9G7N_DUy2fH41cRM"
   
   class Dashboard extends React.Component {
   
     render() {
   
         return (
   
             <div id="DashboardRendering">
   
                 <div id="dashboard"></div>
   
             </div>
   
         );
   
     }
   
     async componentDidMount() {
   
         this.dashboard = BoldBI.create({
   
             serverUrl: rootUrl + "/" + siteidentifier,
   
             dashboardId: DashboardID,
   
             embedContainerId: "dashboard",
   
             height: "800px",
   
             width: "1400px",
   
             token: access_token
   
         });
   
         this.dashboard.loadDashboard();
   
     }
   
   }
   
   export default Dashboard;

   
   [caption id="" align="alignnone" width="748"] Accessing the Token from the Bold BI Server UI and REST API[/caption]
   
   
   
   
   
   
   
   1. In the js folder, ensure the code imports the necessary modules. Also, define the App component to render the dashboard component and export it for use in other files.
      
      

      import React from 'react';
      
      import DashboardRendering from './DashboardRendering//DashboardRendering';
      
      class App extends React.Component {
      
        render() {
      
            return (
      
                <div>
      
                    <DashboardRendering />
      
                </div>
      
            );
      
        }
      
      }
      
      export default App;

      
      [caption id="" align="alignnone" width="785"] App.js Folder[/caption]
      
      
      
      
      

      
      Step 3: Run the embedding application

      
      
      
      
      
      1. Before you can see your application in action, it's essential to launch the React environment. Run the React application using the command npm start, and your development server will initialize.
         

         npm start

         
         
      
      
      2. Once the server is up and running, navigate to your web browser. The dashboard will render in the React application, providing you with a visual interface to interact with.
      
      
      
      
      

      

      
      
      

      The limitations of Token API member support in JS embedding

      
      
      

      Although the Token API member support in JS embedding offers many benefits in the world of embedded analytics, it does have some limitations. Here are some embedding modules that cannot be accessed using the Token authentication:

      
      
      
      
      
      • Dashboard viewer or designer with dashboard name.
      
      
      • Widget embedded with widget name.
      
      
      • Edit data sources with the data source name.
      
      
      • Views embedded with view name.
      
      
      • Multiple widgets embedded with widget name.
      
      
      
      
      

      It's important to understand these drawbacks to make informed decisions when implementing this technology.

      
      
      

      The following GIF image provides an overview of the Token API member support in a JS embedded application. Please check it to learn more on how to access the token in embedding.

      
      
      

      Integrating Token Member Support when Embedding in a JS Application

      
      
      

      Conclusion

      
      
      

      I hope this blog has provided you with sufficient insight into embedding a Bold BI^® dashboard in a JavaScript application. By using the access token for embedding, you can seamlessly integrate dashboards not only in React embed applications, but also in those built with ASP.NET Core, ASP.NET MVC, ASP.NET, Node.js, and Angular. This support eliminates the need for making up an AuthorizeAPI endpoint for authorization, making the authentication process straightforward and efficient. For further details on embedding dashboards into your application, please refer to this blog and our documentation.

      
      
      

      Get started with Bold BI now by signing up for a free trial based on your interest. If you have any questions about this blog, please don't hesitate to leave a comment below. Additionally, you can reach out to us by submitting your support inquiries through the Bold BI website. If you already have an account, simply log in to submit your question.