MongoDB工具 >MongoDB图表 >图表嵌入 >使用Embedding SDK嵌入图表 >嵌入教程 > 使用自定义JWT提供程序嵌入经过身份验证的图表
许多网站使用生成JWT的身份验证系统来代表已登录的用户。如果您的网站生成JWT,则可以配置Charts以验证现有令牌,以授权呈现嵌入式图表。或者,如果您的站点尚未将JWT用作身份验证过程的一部分,则可以编写代码以明确生成JWT,以授权图表渲染。
本教程介绍了后一种方法。该示例显示了如何为已登录的用户生成简单的JWT并将其发送到Charts。
图表使用您在配置提供程序以验证其收到的呈现原始图表的请求的JWT时提供的详细信息。如果令牌无效或不符合您提供的详细信息,则Charts不会呈现经过身份验证的图表视图。
启用经过身份验证的嵌入以生成图表ID和“图表基本URL”。您需要图表ID和图表基本URL才能在网页上显示图表。
从仪表板页面中,选择包含要嵌入的图表的仪表板。
在仪表板上,单击 图表右上方的嵌入图表。
以访问其嵌入信息。从下拉菜单中选择如果已经在此图表使用的数据源上启用了外部共享,请跳过此步骤。如果尚未启用在数据源上嵌入,则可以立即启用。单击 配置外部共享链接。
您可以指定一个函数,为查看图表的每个用户注入MongoDB筛选器文档。该功能可以通过访问您的嵌入身份验证提供程序的令牌context.token
,并且可以基于该令牌过滤图表数据。
此过滤器确保嵌入式图表的查看者仅看到自己的数据,这在将图表与潜在敏感信息一起嵌入时非常有用。
例
以下过滤器功能仅在ownerId
文档的字段与嵌入身份验证提供程序的令牌的sub
字段的值匹配的情况下呈现数据
:
在应用程序代码中将这些值与“嵌入式身份验证提供程序”属性一起使用以嵌入图表。
领域 | 值 |
---|---|
名称 | 输入charts-jwt-tutorial 。 |
提供者 | 选择:guilabel: 。Custom JSON Web Token |
签名算法 | 选择HS256。 |
签名密钥 | 输入topsecret 。 |
如果您已经拥有可在其中显示图表的应用程序,那么您已经准备就绪。如果不是,请继续其余步骤。
MongoDB提供了一个预先构建的示例,向您展示了如何使用Embedding SDK通过JWT验证嵌入式图表。
克隆GitHub存储库, 并按照自述文件中的说明开始使用该应用程序。您可以对其进行自定义,以使用之前创建的图表。
警告
生成JWT的服务器端以保护您的签名密钥不被暴露。
当用户使用以下凭据登录到应用程序时app.js
,示例应用程序中的文件将使用一个简单的Web服务和该jsonwebtoken
软件包来生成并返回使用该算法签名的
JWTHS256
:
admin
password
注意
您的应用程序必须在令牌过期之前处理刷新或发行新令牌。
在示例应用程序中,签名密钥topsecret
是在应用程序中名为的文件中定义的config.js
:
从ChartsEmbedSDK
类中创建一个新对象。提供:
baseUrl
带有指向您的Charts实例的URL 的属性的值。要将您的一个图表嵌入到示例应用程序中,请在“嵌入图表”对话框中将该值替换为:guilabel:。Base URL
chartId
用于指定要嵌入的图表的唯一标识符的属性。要将您的一个图表嵌入到示例应用程序中,请在“嵌入图表”对话框中将该值替换为:guilabel:。Chart ID
getUserToken
用于指定从身份验证提供程序生成并返回JWT的函数的属性。在src/index.js
示例应用程序的文件中,属性中的
login
函数getUserToken
调用您创建的Web服务以生成JWT。如果登录成功,该函数将向
属性返回有效的JWTgetUserToken
。
对于要嵌入的每个图表,请调用CreateChart
刚创建的对象的方法。要将一个图表嵌入示例应用程序中,请在“嵌入图表”对话框中将id
属性的值替换为:guilabel:。Chart ID
以下示例显示了示例应用程序文件中CreateChart
方法的调用src/index.js
。