嵌入通过 Atlas App Services 进行身份验证的图表

选择一个仪表盘。

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

选择一个图表。

在仪表盘中，单击以访问其嵌入信息。 从下拉菜单中选择 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

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

GoCharts 。

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

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

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

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

显示“嵌入”页面。

GoAuthentication Settings 视图。

单击 Authentication Settings 标签页。

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

添加身份验证提供程序。

1. 在Authentication providers部分中，单击Add 。

2. 在Name字段中，输入提供商的描述性名称。

3. 从Provider列表中选择Atlas App Services 。

4. 从Atlas Project列表中，选择包含您的应用服务的 Cloud 项目。

5. 从App ID列表中，选择要用于身份验证的应用服务。

设置切换开关，以使用 Atlas App Services 规则进行数据访问。

除对嵌入式图表访问的用户进行身份验证外，您还可以使用应用程序服务的服务规则执行精细的数据访问控制。如果要启用规则强制执行，请将开关切换为 On。

启用此选项后，在检索图表数据时，图表将遵循集合定义的任何 App Services 规则。您可以使用此功能，限制对图表所示数据的访问，包括根据不同用户的角色展示不同的数据子集。

输入服务名称。

输入从 MongoDB 获取数据的服务的名称。 要查找数据服务的名称，请执行以下操作：

1. 导航到您的应用服务。

2. 单击侧边栏导航中的Clusters 。

3. 服务名称列在App Service Name下。

单击 Save（创建集合）按钮。

在文本编辑器中打开文件index.js 。

文件index.js位于src目录中。

输入您的 应用程序 ID

将现有的 应用程序 ID 替换为您的应用程序 ID，您可以在应用服务用户界面的左侧找到该 ID。

const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // Optional: ~REPLACE~ with your  App ID
{

输入您的 Charts 基本 URL

将现有 Charts 基本 URL 替换为要显示的图表的基本 URL。 您的 Charts 基本 URL 将显示在嵌入选项模式窗口中。 有关启用图表嵌入功能的详细说明，请参阅嵌入 SDK 。

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts-dev.mongodb.com/charts-test2-pebbp", // Optional: ~REPLACE~ with your Charts URL
  getUserToken: () => getRealmUserToken(client),
});

请注意上述代码片段中的getRealmUserToken()函数，该函数会从现有 Atlas App Services 身份验证会话中返回 JWT 。 getRealmUserToken()必须从嵌入式 SDK 导入，如示例应用第 2 行的import语句所示：

import ChartsEmbedSDK, { getRealmUserToken } from "@mongodb-js/charts-embed-dom";

您还可以在 HTML 页面中包含带有内联 Javascript 的嵌入式 SDK，如以下代码片段所示：

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>

要在这种情况下使用getRealmUserToken()函数，请从 SDK 中导入：

ChartsEmbedSDK.getRealmUserToken()

输入您的图表 ID

将现有图表 ID 替换为要显示的图表 ID。 您的图表 ID 显示在“嵌入选项”模式窗口中。 有关启用图表嵌入功能的详细说明，请参阅嵌入 SDK 。

const chart = sdk.createChart({
  chartId: "a2e775e6-f267-4c2c-a65d-fbf3fad4a4f2", // Optional: ~REPLACE~ with your Chart ID
});