Docs 菜单
Docs 主页
/
Atlas 图表
/
内嵌
/
嵌入式 SDK
/
Tutorials

嵌入通过 Google 登录进行身份验证的图表

本教程向您展示如何配置示例应用程序以在网页上呈现经过 Google 验证的嵌入式图表。

Users must sign in with their Google account to view the chart. 如果用户未使用 Google 登录，则 Charts 不会呈现经过身份验证的图表视图。

先决条件

  • 您必须是 Atlas 项目所有者才能为链接的 Charts 实例配置嵌入式身份验证提供程序。

  • 创建新控制面板(New Dashboard)

  • 创建图表

步骤

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

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

1

选择一个仪表盘。

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

2

选择一个图表。

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

注意

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

3

在数据源上启用外部共享

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

4

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

嵌入经过身份验证的图表
点击放大
5

将 切换为Enable authenticated access On。

6

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

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

例子

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

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

提示

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

7

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

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

提示

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

8

复制Chart Base URL 和Chart ID

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

创建 Google 客户端 ID

创建 Google API 控制台项目以生成 Google 客户端 ID。 您需要 Google 客户端 ID 来配置 Charts 以使用 Google 登录。

要创建 Google API控制台项目，请参阅将 Google 登录集成到您的 Web应用中。

配置 Charts 以使用 Google 登录

1

GoCharts 。

警告

导航改进正在进行中

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

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

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

2

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

警告

导航改进正在进行中

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

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

显示“嵌入”页面。

3

GoAuthentication Settings 视图。

警告

导航改进正在进行中

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

注意

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

单击 Authentication Settings 标签页。

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

4

添加身份验证提供程序。

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

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

  3. 从Provider列表中选择Google 。

  4. 在Google Client Id字段中，输入您创建的 Google 客户端 ID。

  5. 单击 Save（连接）。

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

MongoDB 提供了一个预构建的示例应用程序，该应用程序演示了如何使用嵌入式 SDK，通过 Google 身份验证来显示嵌入式图表。

要运行示例应用，请从Github克隆Atlas Charts嵌入示例 - Google 身份验证存储库，然后按照Readme 文件中的说明开始使用该应用。您可以使用示例图表按原样运行应用，也可以对其进行自定义以使用现有图表。

自定义 Node.js 应用

您需要编辑的所有行都标有包含~REPLACE~的注释。

1

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

文件index.html位于authenticated-google项目的根目录中。

2

输入您的 Google 客户端 ID

将现有的 Google 客户端 ID 替换为您的 Google 客户端 ID。

<!-- Optional: ~REPLACE~ content with your Google Client ID -->
<meta
  name="google-signin-client_id"
  content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com"
/>

创建 Google API 控制台项目后，您的 Google 客户端 ID 可见。 有关创建 Google 客户端 ID的说明，请参阅创建 Google 客户端 ID。

3

输入您的 Charts 基本 URL

将现有的baseUrl替换为要显示的图表的基本 URL。

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

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

4

输入您的图表 ID

将现有的chartId替换为要显示的图表的 ID。

const chart = sdk.createChart({
  chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID
});

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

完成应用自定义后，就可以运行了。

后退

Tutorials

来年

使用自定义JSON webJSON web token token提供程序

在此页面上