使用自定义 JSON web token 提供商嵌入经过身份验证的图表

选择一个仪表盘。

在 Dashboards 页面中，选择包含要嵌入的图表的仪表盘。有关导航到仪表盘的说明，请参阅仪表盘。

选择一个图表。

在仪表盘中，单击以访问其嵌入信息。 从下拉菜单中选择Embed chart 。

在数据源上启用外部共享

如果您已对此图表使用的数据源启用外部共享，请跳过此步骤。 如果您尚未在数据源上启用嵌入，现在可以执行此操作。 单击Configure external sharing链接。

在对话框窗口中选择 Authenticated标签页。

点击放大

将 切换为Enable authenticated access On。

（可选）指定要为每个用户注入的过滤器函数。

您可以指定一个函数，为每个查看图表的用户注入 MongoDB 筛选器文档。 这对于呈现特定于用户的Atlas Charts非常有用。

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

（可选）指定图表的可筛选字段。

指定图表查看器可以筛选数据的字段。默认情况下，不指定任何字段，这意味着在您明确允许至少一个字段之前，无法筛选图表。

复制 Chart Base URL 和 Chart ID

在应用程序代码中使用这些值以及嵌入式身份验证提供者属性来嵌入图表。

在应用程序服务器代码中，生成并返回 JWT。实现因身份验证提供者而异。

app.js当用户使用以下凭证登录应用程序时，示例应用程序中的文件使用简单的 Web 服务和包生成并返回使用算法签名的jsonwebtoken JSON webHS256 token ：

• 用户名： admin

• 密码： 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}!`));

在示例应用程序中，签名密钥topsecret在应用程序中名为config.js的文件中定义：

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

嵌入图表。

1. 从ChartsEmbedSDK类创建一个新对象。 提供：

   • baseUrl属性的值以及指向您的 Charts 实例的 URL。 要将一个Atlas Charts嵌入到示例应用程序中，请将此值替换为“嵌入图表”对话框中的 :guilabel: Base URL 。

   • chartId属性，用于指定要嵌入的图表的唯一标识符。 要将一个Atlas Charts嵌入到示例应用程序中，请将此值替换为“嵌入图表”对话框中的 :guilabel: Chart ID 。

   • getUserToken属性，用于指定从身份验证提供商生成并返回JSON web token的函数。

   • 要提供的任何可选属性。 有关使用 SDK 嵌入Atlas Charts时可以使用的所有属性的列表，请参阅SDK 选项参考。

   在示例应用程序的src/index.js文件中， getUserToken属性中的login函数会调用您创建的 Web 服务来生成JSON web token 。如果登录成功，该函数将向getUserToken属性返回一个有效的JSON web token 。

   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. 对于要嵌入的每个图表，调用刚刚创建的对象的CreateChart方法。 要将一个Atlas Charts嵌入应用程序中，请将属性的值替换为“嵌入图表”对话框中的id :guilabel:Chart ID 。

   以下示例显示了对示例应用程序中src/index.js文件中CreateChart方法的调用。

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

渲染图表。

使用图表对象的render方法在应用程序中呈现它。

以下示例显示了对示例应用程序中src/index.js文件中render方法的调用。

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

部署并测试您的应用程序。

如果 Charts 可以验证通过呈现图表的请求收到的令牌，则它会呈现图表。 如果令牌无效，Charts 则不会呈现图表并显示错误代码。

有关 Charts 嵌入错误代码的更多信息，请参阅嵌入式错误代码。