开始使用嵌入式 SDK

在此页面上

先决条件

步骤
启用嵌入
创建 Web 应用
将嵌入代码添加到您的应用中

您可以使用 Embedding SDK将图表或仪表盘嵌入到网络应用程序中，从而更灵活地调整设置和呈现。

先决条件

您必须是仪表盘作者才能启用图表嵌入。
创建新控制面板(New Dashboard)
创建图表

步骤

启用嵌入

选择一个仪表盘。

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

选择一个图表。

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

注意

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

在数据源上启用外部共享。

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

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

点击放大

将切换为Enable unauthenticated access On。

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

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

或者，您可以通过选择Allow all fields in the data source used in this chart来指定图表中的所有字段。

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

选择Javascript SDK 面板。

复制 Charts Base URL和 Chart ID。

您的 Web 应用程序代码中需要 Charts Base URl 和 Chart ID 值。

选择一个仪表盘。

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

选择一个图表。

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

注意

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

在数据源上启用外部共享

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

点击放大

将切换为Enable authenticated access On。

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

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

例子

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

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页面。作为非管理员用户，您仍然可以使用嵌入式图表，但必须从项目所有者那里获取密钥。

单击 Authentication Settings 标签页。

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

添加身份验证提供程序。

在Authentication providers部分中，单击Add 。
在Name字段中，输入提供商的描述性名称。
从Provider列表中，选择要添加的提供商类型。

配置 Charts 以验证来自提供商的令牌。

您必须输入的值因所选提供商而异：

提供商

字段

自定义 JSON web token

提供以下值：

字段

值

签名算法

用于对JSON web token签名进行编码的加密算法。

必须是以下任一项：

签名密钥

用于验证JSON web token签名的密钥或密钥。如果令牌未签名，Charts 将其视为无效。如果您提供的密钥不正确，Charts 将无法验证令牌签名并将其视为无效。

您必须提供的值取决于Signing Algorithm ：

HS256：输入用于签署JSON web token的密钥。

RS256：选择JWK or JWKS URL或PEM Public Key 。

如果您选择JWK or JWKS URL ， Charts将从 JWK 或URL文件。然后， Charts使用该密钥来验证JSON web token。如果文件中有多个键， Charts会尝试每个键，直到找到匹配项为止。输入包含 JWK 或 JWKS文件的URL 。

如果您选择PEM Public Key ， Charts将使用指定的公钥来验证JSON web token。输入用于对JSON web token进行签名的密钥对的公钥。公钥必须采用 PEM 格式，如下示例所示：

受众（可选）

受众声明必须存在于JSON web token Charts中，才能将其视为有效。

Google

在Client ID字段中，按以下格式输入应用程序的 Google 客户端 ID：

<prefix>.apps.googleusercontent.com

Atlas App Services

提供以下值：

字段	值
项目	包含您的应用服务的项目。
App Service	颁发用户令牌的应用服务。
使用 Atlas App Services 获取数据（可选）	切换以启用 Charts 从应用服务获取用户数据和规则。如果启用，Charts 将从您在App Service Name字段中指定的服务中检索数据。启用此选项后，您可以在 Atlas App Services 中定义规则，控制 Charts 为特定collection或用户显示的数据。有关详细信息，请参阅App Services文档中的筛选器传入查询。
应用服务名称	应用服务中Charts用于检索图表数据的服务名称。示例， `mongodb-atlas` 。

单击 Save（连接）。

选择一个仪表盘。

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

选择 Embed（Atlas SQL）。

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

在数据源上启用外部共享。

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

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

将切换为Enable unauthenticated access On。

（可选）为仪表盘指定可筛选字段。

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

或者，您可以通过选择Allow all fields in the data source used in this dashboard来指定仪表盘中的所有字段。

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

选择Javascript SDK 面板。

复制并保存基本URL。

复制并保存仪表盘ID。

选择一个仪表盘。

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

选择 Embed（Atlas SQL）。

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

在数据源上启用外部共享。

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

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

将切换为Enable authenticated access On。

添加身份验证提供者。

如果您已经设立了身份验证提供程序，请跳过此步骤。如果您尚未设立身份验证提供者，现在就可以进行设置。

要学习；了解更多信息，请参阅配置嵌入式身份验证提供者。

单击 Add（连接）。
为身份验证集成指定名称。
选择一个提供商并指定提供商设置。
单击 Save（连接）。
单击 Back to Embed Dashboard（连接）。

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

您可以指定一个函数，为每个查看仪表盘的用户注入MongoDB过滤文档。这对于呈现特定于用户的仪表盘非常有用。

例子

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

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

提示

另请参阅：

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

（可选）为仪表盘指定可筛选字段。

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

或者，您可以通过选择Allow all fields in the data source used in this dashboard来指定仪表盘中的所有字段。

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

复制并保存基本URL。

复制并保存仪表盘ID。

创建 Web 应用

继续执行其余步骤，创建一个用于显示图表的新应用。

注意

MongoDB在Github 存储库中提供了一个预构建的示例应用程序演示如何使用嵌入式 SDK 显示未经身份验证的嵌入式图表。

继续执行其余步骤，创建一个用于显示图表的新应用。

注意

MongoDB在Github 存储库中提供了一个预构建的示例展示了如何使用嵌入式 SDK，通过身份验证提供者对嵌入式图表进行身份验证。

继续执行其余步骤，创建一个用于显示仪表盘的新应用。

注意

MongoDB提供未经身份验证的嵌入式仪表盘的预构建示例在Github 存储库中。此示例演示如何使用嵌入式 SDK 显示未经身份验证的嵌入式仪表盘。

继续执行其余步骤，创建一个用于显示仪表盘的新应用。

注意

MongoDB提供经过身份验证的嵌入式仪表盘示例在Github 存储库中。这些示例向您展示如何使用嵌入式 SDK，通过Atlas App Services 、Google 或JSON web token身份验证提供者对嵌入式仪表盘进行身份验证。

将嵌入代码添加到您的应用中

要了解如何将嵌入式 SDK 安装到您的应用中，请参阅安装嵌入式 SDK。

将以下代码添加到您的 Web 应用程序中，以便在您希望呈现图表的位置执行：

注意

将现有图表基本 URL 和图表 ID 替换为要显示的图表的值。您的 Charts 基本 URL 和图表 ID 将显示在嵌入选项模式窗口中。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

将以下代码添加到您的网络应用中，以便在您希望呈现图表的位置执行。以下示例使用 Atlas App Services进行身份验证。

注意

将现有的 App ID替换为您的 App ID，您可以在Atlas App Services用户界面中找到该 ID。将现有Charts基本URL和图表ID替换为要显示的图表的值。您的Charts基本URL和图表ID显示在嵌入选项模式窗口中。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
// Needed only if you are using the Atlas App Services authentication provider
const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // ~REPLACE~ with your App ID
});
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
  getUserToken: () => getRealmUserToken(client),
  // getUserToken is a callback to provide the auth token to the SDK.
  // Use the getRealmUserToken helper when using the Atlas App Services auth provider.
  // If using Custom JWT or Google providers, provide your own code to retrieve the JWT
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

将以下代码添加到您的 Web应用中，以便在您希望呈现仪表盘的位置执行。

注意

将现有的Dashboards Base URL和仪表盘ID替换为要显示的仪表盘的值。您的Dashboards Base URL和仪表盘ID将显示在“嵌入选项”模式窗口中。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
});
const dashboard = sdk.createDashboard({
   dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
   height: "700px",
   widthMode: "scale",
   heightMode: "fixed"
   // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

将以下代码添加到您的 Web应用中，以在您希望呈现仪表盘的位置运行该应用。以下示例使用 Atlas App Services进行身份验证。

注意

将现有的 App ID替换为您的 App ID。您可以在Atlas App Services用户界面中找到您的 App ID 。将现有的Dashboards Base URL和仪表盘ID替换为要显示的仪表盘的值。您的Dashboards Base URL和仪表盘ID将显示在“嵌入选项”模式窗口中。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
// Needed only if you are using the Atlas App Services authentication provider
const client = Stitch.initializeAppClient(
   'authentication-sample-eibkj', // ~REPLACE~ with your App ID
});
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
   getUserToken: () => getRealmUserToken(client),
   // getUserToken is a callback to provide the auth token to the SDK.
   // Use the getRealmUserToken helper when using the Atlas App Services auth provider.
   // If using Custom JWT or Google providers, provide your own code to retrieve the JWT
});
const dashboard = sdk.createDashboard({
  dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
  height: "700px",
  widthMode: "scale",
  heightMode: "fixed"
  // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

后退

嵌入式 SDK

来年

配置身份验证提供者

先决条件

步骤

启用嵌入

选择一个仪表盘。

选择一个图表。

注意

在数据源上启用外部共享。

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

将 切换为Enable unauthenticated access On。

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

选择Javascript SDK 面板。

复制 Charts Base URL和 Chart ID。

选择一个仪表盘。

选择一个图表。

注意

在数据源上启用外部共享

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

将 切换为Enable authenticated access On。

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

例子

提示

另请参阅：

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

提示

另请参阅：

复制Chart Base URL 和Chart ID

配置嵌入身份验证提供者

GoCharts 。

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

GoAuthentication Settings 视图。

注意

添加身份验证提供程序。

选择一个仪表盘。

选择 Embed（Atlas SQL）。

在数据源上启用外部共享。

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

将 切换为Enable unauthenticated access On。

（可选）为仪表盘指定可筛选字段。

选择Javascript SDK 面板。

复制并保存基本URL。

复制并保存仪表盘ID。

选择一个仪表盘。

选择 Embed（Atlas SQL）。

在数据源上启用外部共享。

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

将 切换为Enable authenticated access On。

添加身份验证提供者。

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

例子

提示

另请参阅：

（可选）为仪表盘指定可筛选字段。

复制并保存基本URL。

复制并保存仪表盘ID。

创建 Web 应用

注意

注意

注意

注意

将嵌入代码添加到您的应用中

注意

注意

注意

注意

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

将切换为Enable unauthenticated access On。

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

将切换为Enable authenticated access On。

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

将切换为Enable unauthenticated access On。

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

将切换为Enable authenticated access On。