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

许多网站使用的身份验证系统会生成 JSON web token来表示已登录的用户。如果您的网站生成JSON web token ，则可以配置 Atlas Charts 以验证现有令牌，从而授权呈现嵌入式图表。或者，如果您的站点尚未使用JWT作为身份验证过程的一部分，您可以编写代码来显式生成JWT ，以便授权图表呈现。

本教程介绍后一种方法。该示例向您展示如何为登录用户生成简单的JSON web token并将其发送到 Charts。

Charts 使用您在配置提供程序时提供的详细信息来验证它收到的带有渲染嵌入式图表请求的JWT 。如果令牌无效或不符合您提供的详细信息，Charts 将不会呈现经过身份验证的图表视图。

先决条件

您必须是 Atlas 项目所有者才能为链接的 Charts 实例配置嵌入式身份验证提供程序。
创建新控制面板(New Dashboard)
创建图表

步骤

为图表启用经过身份验证的嵌入

启用经过身份验证的嵌入以生成 Charts 基本 URL 和图表 ID。您需要 Charts 基本 URL 和图表 ID 才能在网页上显示图表。

选择一个仪表盘。

从仪表盘页面中，选择包含要嵌入的图表的仪表盘。

选择一个图表。

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

注意

如果图表位于已启用嵌入功能的仪表盘上，则会自动启用Embed Chart选项。因此无法在已启用嵌入功能的仪表盘中为图表选择Embed chart选项。

在数据源上启用外部共享

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

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

点击放大

将切换为Enable authenticated access On。

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

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

例子

以下筛选器函数仅呈现文档的 ownerId字段与嵌入式身份验证提供程序的令牌的sub字段的值匹配的数据：

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

提示

要了解有关为每个用户注入筛选器的更多信息，请参阅注入特定于用户的筛选器。

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

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

提示

要了解有关可筛选字段的更多信息，请参阅指定可筛选字段。

复制Chart Base URL 和Chart ID

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

配置 Charts 以使用自定义 JSON web token 提供商

注意

使用自定义 JWT 提供程序配置身份验证时，您可以选择签名算法。本教程使用 HS256 签名算法。如果选择 RS256 签名算法，还可以选择以下签名密钥之一：

JSON Web 密钥 (JWK) 或JSON Web 密钥设立(JWKS) URL： Charts从指定URL的 JWK 或 JWKS文件中检索密钥。然后， Charts使用该密钥来验证JSON web token。如果文件中有多个键， Charts会尝试每个键，直到找到匹配项为止。
PEM 公钥：Charts 使用指定的公钥来验证 JSON web token。

GoCharts 。

警告

导航改进正在进行中

我们目前正在推出改进的全新导航体验。如果以下步骤与您在Charts用户界面中的视图不匹配，请参阅预览文档。

如果尚未显示 Atlas Charts，请单击 Atlas 用户界面中的 Charts 选项卡。

Atlas 发布关联到项目的 Charts 实例。

转到 Embedding（快速入门）页面。

警告

导航改进正在进行中

我们目前正在推出改进的全新导航体验。如果以下步骤与您在Charts用户界面中的视图不匹配，请参阅预览文档。

单击侧边栏中Development标题下的Embedding 。

显示“嵌入”页面。

GoAuthentication Settings 视图。

警告

导航改进正在进行中

我们目前正在推出改进的全新导航体验。如果以下步骤与您在Charts用户界面中的视图不匹配，请参阅预览文档。

注意

您必须是项目所有者才能访问权限Authentication Settings页面。作为非管理员用户，您仍然可以使用嵌入式图表，但必须从项目所有者那里获取密钥。

单击 Authentication Settings 标签页。

显示“身份验证设置”标签页。

添加身份验证提供程序。

在Authentication providers部分中，单击Add 。

提供以下值来配置Charts ，从而验证本教程的JSON web token 。

字段	值
名称	输入 `charts-jwt-tutorial`。
提供商	选择 Custom JSON Web Token 。
签名算法	选择 HS256 。
签名密钥	输入 `topsecret`。

单击 Save（连接）。

创建一个 Web 应用程序来显示图表

如果您已有用于显示图表的应用，则已准备就绪。如果没有，请继续执行其余步骤。

MongoDB 提供了一个预构建的示例，演示如何使用嵌入式 SDK 对使用JSON web token的嵌入式图表进行身份验证。

克隆Github存储库并按照自述文件中的说明进行操作，开始使用该应用。您可以对其进行自定义，以使用之前创建的图表。

自定义 Node.js 应用

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

警告

在服务器生成JSON web token以保护您的签名密钥免遭泄露。

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"
};

嵌入图表。

从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 });

对于要嵌入的每个图表，调用刚刚创建的对象的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 嵌入错误代码的更多信息，请参阅嵌入式错误代码。

后退

使用 Google 登录身份验证

来年

使用未经身份验证的图表

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}!`));

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	});

先决条件

步骤

为图表启用经过身份验证的嵌入

选择一个仪表盘。

选择一个图表。

注意

在数据源上启用外部共享

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

将 切换为Enable authenticated access On。

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

例子

提示

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

提示

复制Chart Base URL 和Chart ID

配置 Charts 以使用自定义 JSON web token 提供商

注意

GoCharts 。

警告

导航改进正在进行中

转到 Embedding（快速入门）页面。

警告

导航改进正在进行中

GoAuthentication Settings 视图。

警告

导航改进正在进行中

注意

添加身份验证提供程序。

创建一个 Web 应用程序来显示图表

自定义 Node.js 应用

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

警告

注意

嵌入图表。

渲染图表。

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

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

将切换为Enable authenticated access On。