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

选择一个仪表盘。

在 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

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

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

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

输入您的 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。

输入您的 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 。

输入您的图表 ID

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

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

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