Embed an Authenticated Chart using a Custom JWT Provider

Select a dashboard.

From your dashboard page, select the dashboard containing the chart you wish to embed.

Select a chart.

From the dashboard, click at the top-right of the chart to access its embedding information. Select Embed chart from the dropdown menu.

Enable external sharing on the data source

If you have already enabled external sharing on the data source this chart uses, skip this step. If you haven't yet enabled embedding on the data source, you can do so now. Click the Configure external sharing link.

Select the Authenticated tab in the dialog window.

click to enlarge

Toggle Enable authenticated access to On.

(Optional) Specify a filter function to inject per user.

You can specify a function to inject a MongoDB filter document for each user who views the chart. This is useful for rendering user-specific charts.

function getFilter(context) {
  return { ownerId: context.token.sub };
}

(Optional) Specify filterable fields for your chart.

Specify the fields on which chart viewers can filter data. By default, no fields are specified, meaning the chart cannot be filtered until you explicitly allow at least one field.

Copy the Chart Base URL and Chart ID

Use these values in your application code together with your Embedded Authentication Provider attributes to embed your chart.

Go to Charts.

If Atlas Charts is not already displayed, click the Charts tab in the Atlas UI.

Atlas launches an instance of Charts linked to your project.

Go to the Embedding page.

Click Embedding under the Development heading in the sidebar.

The Embedding page displays.

Go to the Authentication Settings view.

Click the Authentication Settings tab.

The Authentication Settings tab displays.

Add the authentication provider.

1. From the Authentication providers section, click Add.

2. Provide the following values to configure Charts to validate the JWT for the tutorial.

   Field	Value
   Name	Enter charts-jwt-tutorial.
   Provider	Select Custom JSON Web Token.
   Signing Algorithm	Select HS256.
   Signing Key	Enter topsecret.

3. Click Save.

In your application server code, generate and return a JWT. The implementation varies based on your authentication provider.

The app.js file in the sample application uses a simple web service and the jsonwebtoken package to generate and return a JWT signed using the HS256 algorithm when a user logs in to the application with these credentials:

• User name: admin

• Password: password

1
const express = require("express");
2
const bodyParser = require("body-parser");
3
const cors = require("cors");
4
const jwt = require("jsonwebtoken");
5
const config = require("./config.js");
6
7
const app = express();
8
const port = 8000;
9
10
// Configuring body parser middleware
11
app.use(bodyParser.urlencoded({ extended: false }));
12
app.use(bodyParser.json());
13
app.use(cors());
14
15
app.post("/login", (req, res) => {
16
  const loginDetails = req.body;
17
  // mock a check against the database
18
  let mockedUsername = "admin";
19
  let mockedPassword = "password";
20
21
  if (
22
    loginDetails &&
23
    loginDetails.username === mockedUsername &&
24
    loginDetails.password === mockedPassword
25
  ) {
26
    let token = jwt.sign({ username: loginDetails.username }, config.secret, {
27
      expiresIn: "24h" // expires in 24 hours
28
    });
29
    res.json({ bearerToken: token });
30
  } else {
31
    res.status(401).send(false);
32
  }
33
});
34
35
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

In the sample application, the signing key topsecret is defined in a file in your application named config.js:

module.exports = {
  secret: "topsecret"
};

Embed a chart.

1. Create a new object from the ChartsEmbedSDK class. Provide:

   • The value of the baseUrl property with the URL that points to your Charts instance. To embed one of your charts in the sample application, replace this value with the :guilabel:Base URL from your Embed Chart dialog.

   • The chartId property to specify the unique identifier of the chart you want to embed. To embed one of your charts in the sample application, replace this value with the :guilabel:Chart ID from your Embed Chart dialog.

   • The getUserToken property to specify the function that generates and returns a JWT from your authentication provider.

   • Any optional properties you want to provide. For a list of all properties you can use when you embed charts using the SDK, see SDK option reference.

   In the src/index.js file in the sample application, the login function in the getUserToken property calls the web service you created to generate a JWT. If login is successful, that function returns a valid JWT to the getUserToken property.

   1
   import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
   2
   import "regenerator-runtime/runtime";
   3
   4
   document
   5
     .getElementById("loginButton")
   6
     .addEventListener("click", async () => await tryLogin());
   7
   8
   function getUser() {
   9
   return document.getElementById("username").value;
   10
   }
   11
   12
   function getPass() {
   13
   return document.getElementById("password").value;
   14
   }
   15
   16
   async function tryLogin() {
   17
   if (await login(getUser(), getPass())) {
   18
     document.body.classList.toggle("logged-in", true);
   19
     await renderChart();
   20
   }
   21
   }
   22
   23
   async function login(username, password) {
   24
   const rawResponse = await fetch("http://localhost:8000/login", {
   25
     method: "POST",
   26
     headers: {
   27
       Accept: "application/json",
   28
       "Content-Type": "application/json"
   29
     },
   30
     body: JSON.stringify({ username: username, password: password })
   31
   });
   32
   const content = await rawResponse.json();
   33
   34
   return content.bearerToken;
   35
   }
   36
   37
   async function renderChart() {
   38
   const sdk = new ChartsEmbedSDK({
   39
     baseUrl: "https://localhost/mongodb-charts-iwfxn", // ~REPLACE~ with the Base URL from your Embed Chart dialog
   40
     chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065", // ~REPLACE~ with the Chart ID from your Embed Chart dialog
   41
     getUserToken: async function() {
   42
       return await login(getUser(), getPass());
   43
     }
   44
   });

2. For each chart that you want to embed, invoke the CreateChart method of the object you just created. To embed one of your charts in the sample application, replace the value of the id property with the :guilabel:Chart ID from your Embed Chart dialog.

   The following example shows an invocation of the CreateChart method in the src/index.js file in the sample application.

   const chart = sdk.createChart({ chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065" }); // ~REPLACE~ with the Chart ID from your Embed Chart dialog

Render the chart.

Use the render method of your chart object to render it in your application.

The following example shows an invocation of the render method in the src/index.js file in the sample application.

chart.render(document.getElementById("chart"));

Deploy and test your application.

Charts renders the chart if it can validate the token it received with the request to render the chart. If the token isn't valid, Charts doesn't render the chart and displays an error code.

For more information on the Charts embedding error codes, see Embedded Error Codes.