嵌入通过 Atlas App Services 进行身份验证的图表
Atlas App Services是一个无服务器平台，使开发者能够快速构建应用程序，而无需设置服务器基础架构。 App Services 提供多种身份验证选项，包括 Google OAuth , Facebook 登录 ，以及电子邮件/密码。您可以使用应用服务中的身份验证机制来控制嵌入式图表的数据访问。
本教程向您展示如何：
为图表启用经过身份验证的嵌入。
使用嵌入 SDK 嵌入由自定义Atlas App Services提供商验证的图表。
使用应用服务控制嵌入式图表中的数据。
注意
本教程不包括创建具有身份验证功能的应用服务。 有关应用程序创建教程，请参阅Atlas App Services 文档。
先决条件
步骤
为图表启用经过身份验证的嵌入
启用经过身份验证的嵌入以生成 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 以使用自定义 Atlas App Services Provider
Go到Authentication Settings视图。
如果尚未显示 Charts，请单击导航栏中的Charts 。
单击侧边栏中的 Embedding（支持）。
单击 Authentication Settings 标签页。
在Authentication providers部分中，单击Add 。
在Name字段中，输入提供商的描述性名称。
从Provider列表中选择Atlas App Services 。
从Atlas Project列表中，选择包含您的应用服务的 Cloud 项目。
从App ID列表中，选择要用于身份验证的应用服务。
设置切换开关，以使用 Atlas App Services 规则进行数据访问。
除了对嵌入式图表访问的用户进行身份验证之外，您还可以使用 App Service 服务规则执行细粒度的数据访问控制。 如果要启用规则执行，请将切换开关设置为On 。
启用此选项后，Charts 在检索图表数据时将遵守在集合上定义的任何 App Services 规则。 您可以使用此功能来限制对图表上显示的数据的访问，包括根据不同用户的角色向其显示不同的数据子集。
注意
此选项假定此图表的数据源使用与应用服务相同的 MongoDB database 和 collection。
使用此选项可能会对性能产生影响，因此如果不需要根据 App Services 规则来限制数据访问，则应将其关闭。
输入服务名称。
输入从 MongoDB 获取数据的服务的名称。 要查找数据服务的名称，请执行以下操作：
导航到您的应用服务。
单击侧边栏导航中的Clusters 。
服务名称列在App Service Name下。
点击 Save 按钮。
创建 Web 应用程序来显示图表
如果您已有可显示图表的应用，则可添加嵌入式图表。 如果没有，请继续执行其余步骤以创建新应用。
MongoDB 提供了一个预构建的示例应用，展示了如何使用嵌入式 SDK，通过 App Services 身份验证来显示嵌入式图表。
克隆 GitHub 存储库 并按照Readme 文件中的说明开始使用该应用。您可以按原样运行应用，也可以对其进行自定义以使用之前创建的图表。
注意
该示例应用假定您的应用服务使用电子邮件/密码身份验证。 如果您的应用程序服务使用其他身份验证机制，则示例应用程序将需要额外的自定义。
自定义 Node.js 应用
您需要编辑的所有行都标有包含~REPLACE~的注释。
在文本编辑器中打开文件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 });
完成应用自定义后，就可以运行了。