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.

Using the Command “node -v” to Open the Command Prompt

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.

Using the command “npx create-react-app” to Create 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.

Using “code react- sample” to Open the React Application in VS Code

Step 2: Create the Bold BI instance

1. 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.

Using the “npm install @boldbi/boldbi-embedded-sdk” Command to Install the Bold BI Embed SDK NPM Package

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

Using the “npm install” Command to Install the Dependent Files

3. 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.

Retrieving the Root URL, Site Identifier, and Dashboard ID from the Downloaded Conf File

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.

To 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.

4. 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.

Accessing the Token from the Bold BI Server UI and REST API

5. 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.

App.js Folder

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.

Run React Application Using the “npm start” Command

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.

Dashboard Rendered in React Application

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 15-day 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.

Originally published at https://www.boldbi.com on July 9, 2024.