使用嵌入式分析 亚马逊QuickSight 可以简化为您的应用程序配备功能可视化的过程,而无需任何复杂的开发。 有多种方法可以将 QuickSight 仪表板嵌入到应用程序中。 在这篇文章中,我们将了解如何使用 React 和 Amazon QuickSight 嵌入开发工具包.
仪表板使用者通常没有为其 AWS 账户分配用户,因此无法访问仪表板。 为了使他们能够使用数据,仪表板需要可供匿名用户访问。 让我们看看让未经身份验证的用户能够在 React 应用程序中查看 QuickSight 仪表板所需的步骤。
解决方案概述
我们的解决方案使用以下关键服务:
在浏览器上加载网页后,浏览器会调用 API Gateway,后者会调用 Lambda 函数,该函数调用 QuickSight API 来为匿名用户生成仪表板 URL。 Lambda 函数需要承担具有所需权限的 IAM 角色。 下图显示了该架构的概述。
先决条件
您必须具备以下先决条件:
为未经身份验证的查看者设置权限
在您的账户中,创建您的应用程序将代表查看者采用的 IAM 策略:
- 在IAM控制台上,选择 使用政策与规范 在导航窗格中。
- 建立政策.
- 点击 JSON 选项卡中,输入以下策略代码:
确保更改的值为仪表板 ID 的值。 请记下此 ID,以便在后续步骤中使用。
对于带有日志的第二个语句对象,权限是 可选。 它允许您创建指定名称的日志组,为指定的日志组创建日志流,并将一批日志事件上传到指定的日志流。
在此政策中,我们允许用户执行 GenerateEmbedUrlForAnonymousUser
对占位符中插入的仪表板 ID 列表中的仪表板 ID 执行操作。
- 输入您的策略的名称(例如,
AnonymousEmbedPolicy
)并选择 建立政策.
接下来,我们创建一个角色并将该策略附加到该角色。
- 角色 在导航窗格中,然后选择 创建角色.
- LAMBDA 为受信任的实体。
- 搜索并选择
AnonymousEmbedPolicy
,然后选择 下一页. - 输入您的角色的名称,例如
AnonymousEmbedRole
. - 确保策略名称包含在 添加权限 部分。
- 完成角色创建。
您刚刚创建了 AnonymousEmbedRole
执行角色。 您现在可以进入下一步。
生成匿名嵌入 URL Lambda 函数
在此步骤中,我们创建一个 Lambda 函数,该函数与 QuickSight 交互,为匿名用户生成嵌入 URL。 我们的域名需要被允许。 有两种方法可以实现 Amazon QuickSight 的集成:
- 通过将 URL 添加到 Amazon QuickSight 管理控制台中允许的域列表(稍后将在 [可选] 在 QuickSight 中添加您的域 部分)。
- [推荐的] 通过在运行时在 API 调用中添加嵌入 URL 请求。 当您需要保留允许的域时,建议使用选项 1。 否则,域将在 30 分钟(相当于会话持续时间)后被删除。 对于其他用例,建议使用第二个选项(如下所述和实现)。
在Lambda控制台上,创建一个新功能。
- 选择 从头开始.
- 针对 功能名称,输入名称,例如
AnonymousEmbedFunction
. - 针对 运行时¸选择 Python的3.9.
- 针对 执行角色¸选择 使用现有角色.
- 选择角色
AnonymousEmbedRole
. - 创建功能.
- 在功能详情页面,导航至 代码 选项卡并输入以下代码:
如果您不使用 localhost,请替换 http://localhost:3000
在带有应用程序主机名的返回中。 要转向生产,不要忘记更换 http://localhost:3000
与您的域。
- 点击 配置 标签,在 一般配置,选择 编辑.
- 将超时从 3 秒增加到 30 秒,然后选择 保存.
- 下 环境变量,选择 编辑.
- 添加以下变量:
- 地址
DashboardIdList
并列出您的仪表板 ID。 - 地址
DashboardRegion
并输入仪表板的区域。
- 地址
- 保存.
您的配置应类似于以下屏幕截图。
- 点击 代码 标签,选择 部署 部署功能。
设置 API Gateway 以调用 Lambda 函数
要设置 API Gateway 来调用您创建的函数,请完成以下步骤:
- 在 API Gateway 控制台上,导航到 REST API 部分并选择 建立.
- 下 创建新的API, 选择 新API.
- 针对 API名称,输入名称(例如,
QuicksightAnonymousEmbed
). - 创建API.
- 点击 行动 菜单中选择 创建资源.
- 针对 资源名称,输入名称(例如,
anonymous-embed
).
现在,让我们创建一个方法。
- 选择
anonymous-embed
资源和关于 行动 菜单中选择 创建方法. - 的GET 在资源名称下。
- 针对 整合类型, 选择 LAMBDA.
- 选择 使用 Lambda 代理集成.
- 针对 拉姆达函数,输入您创建的函数的名称。
- 保存,然后选择 OK.
现在我们已准备好部署 API。
- 点击 行动 菜单中选择 部署API.
- 针对 部署阶段, 选择 新的阶段.
- 输入阶段的名称,例如
embed
. - 部署.
[可选] 在 QuickSight 中添加您的域
如果您添加了允许的域 生成匿名嵌入 URL Lambda 函数 部分,请随意移动到 启用容量定价 部分。
要将您的域添加到 QuickSight 中允许的域,请完成以下步骤:
- 在 QuickSight 控制台上,选择用户菜单,然后选择 管理QuickSight.
- 域和嵌入 在导航窗格中。
- 针对 域名,输入您的域名(
http://localhost:
).
确保更换 以匹配您的本地设置。
- 地址.
确保将 localhost 域替换为测试后将使用的域。
启用容量定价
如果您没有启用会话容量定价,请按照本部分中的步骤操作。 必须启用此功能才能进一步进行。
容量定价允许 QuickSight 客户批量购买阅读器会话,而无需在 QuickSight 中配置单个阅读器。 容量定价非常适合嵌入式应用程序或大规模商业智能 (BI) 部署。 欲了解更多信息,请访问 Amazon QuickSight定价.
要启用容量定价,请完成以下步骤:
- 点击 管理QuickSight 页面,选择 您的订阅 在导航窗格中。
- 在 容量定价 部分,选择 获取每月订阅.
- 确认订阅.
要了解有关容量定价的更多信息,请参阅 Amazon QuickSight 的新增功能 – 大规模部署的会话容量定价、嵌入公共网站以及用于嵌入式分析的开发人员门户.
设置您的 React 应用程序
要设置您的 React 应用程序,请完成以下步骤:
- 在您的 React 项目文件夹中,转到根目录并运行
npm i amazon-quicksight-embedding-sdk
安装 amazon-quicksight-embedding-sdk 软件包。 - 在您的
App.js
文件,替换以下内容:- 更换
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
使用您的 API Gateway 调用 URL 和您的资源名称(例如,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - 更换
YOUR_DASHBOARD1_ID
与您的第一个仪表板 IDDashboardIdList
。 这是将在初始渲染中显示的仪表板。 - 更换
YOUR_DASHBOARD2_ID
与您的第二个仪表板 IDDashboardIdList
.
- 更换
以下代码片段显示了一个示例 App.js
文件在你的 React 项目中。 该代码是一个 React 组件,它根据所选仪表板 ID 嵌入 QuickSight 仪表板。 该代码包含以下关键组件:
- 状态挂钩 – 两个状态钩子使用以下方式定义
useState()
来自 React 的钩子:- XNUMX月XNUMX日 – 保存当前选择的仪表板 ID。
- QuickSight嵌入 – 保存由返回的 QuickSight 嵌入对象
embedDashboard()
功能。
- 参考钩 – ref hook 是使用以下方式定义的
useRef()
来自 React 的钩子。 它用于保存对将嵌入 QuickSight 仪表板的 DOM 元素的引用。 - useEffect() 钩子 – useEffect() 挂钩用于在所选仪表板 ID 发生更改时触发 QuickSight 仪表板的嵌入。 它首先使用 fetch() 方法从 QuickSight API 获取所选 ID 的仪表板 URL。 检索到 URL 后,它会以 URL 作为参数调用 embed() 函数。
- 更改处理程序 ——由数百家创建、维护和提供物联网(IoT)全球开放标准的公司所组成的
changeDashboard()
函数是一个简单的事件处理程序,每当用户从下拉菜单中选择不同的仪表板时,它就会更新仪表板状态。 一旦设置了新的仪表板 ID,就会触发 useEffect 挂钩。 - 10 毫秒超时 – 使用超时的目的是在进行 API 调用之前引入 10 毫秒的小延迟。 如果您希望避免立即 API 调用或在组件频繁渲染时防止出现过多请求,则此延迟非常有用。 超时为组件在发起 API 请求之前提供了一些时间来解决。 因为我们是在开发模式下构建应用程序,所以超时有助于避免由于双重运行而导致的错误
useEffect
中StrictMode
. 有关更多信息,请参阅 严格模式更新.
请参见以下代码:
接下来,替换您的内容 App.css
文件,用于设置网页的样式和布局,其内容来自以下代码片段:
现在是时候测试您的应用程序了。 通过运行启动您的应用程序 npm start
在您的终端中。 以下屏幕截图显示了您的应用程序及其可以显示的仪表板的示例。
结论
在这篇文章中,我们向您展示了如何使用 AWS SDK 将 QuickSight 仪表板嵌入到 React 应用程序中。 与匿名用户共享您的仪表板允许他们访问您的仪表板,而无需授予他们访问您的 AWS 账户的权限。 还有其他方法可以匿名共享您的仪表板,例如使用 一键公开嵌入.
即刻加入 快视社区 与他人一起提问、回答和学习,并探索其他资源。
关于作者
阿德里安娜 是 AWS 全球金融服务公司的解决方案架构师。 自 2018 年 XNUMX 月加入亚马逊以来,她有机会参与公司的运营和云业务。 目前,她构建的软件资产展示了针对特定客户用例量身定制的 AWS 服务的创新使用。 她每天都积极参与技术的各个方面,但她真正的热情在于网络开发和分析的结合。
- SEO 支持的内容和 PR 分发。 今天得到放大。
- PlatoData.Network 垂直生成人工智能。 赋予自己力量。 访问这里。
- 柏拉图爱流。 Web3 智能。 知识放大。 访问这里。
- 柏拉图ESG。 汽车/电动汽车, 碳, 清洁科技, 能源, 环境, 太阳能, 废物管理。 访问这里。
- 块偏移量。 现代化环境抵消所有权。 访问这里。
- Sumber: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :具有
- :是
- :在哪里
- ][p
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- 关于
- ACCESS
- 无障碍
- 账号管理
- 操作
- 积极地
- 加
- 添加
- 添加
- 额外
- 管理员
- 后
- 所有类型
- 让
- 允许
- 允许
- 还
- Amazon
- 亚马逊QuickSight
- 亚马逊网络服务
- an
- 分析
- 和
- 匿名
- 匿名
- 回答
- 任何
- API
- 应用
- 应用领域
- 应用领域
- 架构
- 保健
- 论点
- AS
- 方面
- 办公室文员:
- 分配
- 承担
- At
- 连接
- 八月
- 作者
- 避免
- 等待
- AWS
- 基于
- 基础
- BE
- 因为
- 很
- before
- 代表
- 如下。
- 身体
- 都
- 浏览器
- 建立
- 建筑物
- 建立
- 商业
- 商业智能
- 但是
- by
- 呼叫
- 呼叫
- CAN
- 容量
- 例
- 造成
- Center
- 机会
- 更改
- 更改
- 客户
- 云端技术
- 码
- 颜色
- 组合
- 公司
- 完成
- 复杂
- 元件
- 组件
- 配置
- 安慰
- 消耗
- 消费者
- 容器
- 包含
- 内容
- Contents
- 上下文
- 创建信息图
- 创建
- 创造
- 的CSS
- 电流
- 目前
- 顾客
- 合作伙伴
- 每天
- XNUMX月XNUMX日
- 仪表板
- data
- 默认
- 定义
- 延迟
- 演示
- 部署
- 部署
- 描述
- 详情
- 开发商
- 研发支持
- 不同
- 屏 显:
- DOM
- 域
- 域名
- 完成
- 别
- 翻番
- 为期
- ,我们将参加
- e
- 效果
- element
- 嵌
- 嵌入式
- 嵌入
- enable
- 启用
- 订婚
- 输入
- 实体
- 环境
- 错误
- 故障
- 醚(ETH)
- 活动
- 事件
- 例子
- 例子
- 除
- 例外
- 执行
- 现有
- 解释
- 探索
- 出口
- 感觉
- 文件
- 金融
- 金融服务
- (名字)
- 遵循
- 以下
- 针对
- 自由的
- 频繁
- 止
- 功能
- 实用
- 进一步
- 网关
- 生成
- 给
- 全球
- 全球金融
- Go
- 发放
- 团队
- 民政事务总署
- 有
- 有
- 头
- 高度
- 帮助
- 这里
- 举行
- 持有
- 钩
- 徘徊
- 创新中心
- How To
- HTTP
- HTTPS
- i
- IAM
- ID
- 理想
- 身分
- IDS
- if
- 即时
- 实施
- 进口
- in
- 包括
- 个人
- 信息
- 初始
- 启动
- 创新
- 安装
- 积分
- 房源搜索
- 交互
- 成
- 介绍
- 所调用
- 参与
- IT
- JSON
- 只是
- 键
- 缺乏
- 大
- 大规模
- 后来
- 布局
- 学习用品
- Level
- 谎言
- 清单
- 装载
- 本地
- 日志
- 看
- 主要
- 制作
- 制作
- 强制性
- 余量
- 匹配
- 菜单
- 方法
- 分钟
- 时尚
- 每月一次
- 更多
- 移动
- 多
- 必须
- 姓名
- 导航
- 旅游导航
- 需求
- 需要
- 全新
- 下页
- 正常
- 现在
- 对象
- of
- 经常
- on
- 一
- 运营
- 附加选项
- 附加选项
- or
- 橘色
- OS
- 其他名称
- 其它
- 除此以外
- 我们的
- 简介
- 包
- 页
- 面包
- 部分
- 情
- 演出
- 权限
- 挑
- 占位符
- 柏拉图
- 柏拉图数据智能
- 柏拉图数据
- 请
- 政策
- 门户网站
- 帖子
- 强大
- 先决条件
- 防止
- 价格
- 过程
- 生产
- 项目
- 规定
- 代理
- 国家
- 采购
- 目的
- RE
- 应对
- 读者
- 读者
- 准备
- 建议
- 地区
- 去除
- 呈现
- 更换
- 请求
- 要求
- 必须
- 资源
- 资源
- 响应
- 回报
- 回报
- 角色
- 根
- 运行
- 运行
- 鳞片
- 情景
- 截图
- SDK
- 其次
- 秒
- 部分
- 看到
- 选
- 特色服务
- 会议
- 招生面试
- 集
- 解决
- 格局
- Share
- 共享
- 她
- 应该
- 显示
- 显示
- 如图
- 作品
- 类似
- 简易
- 简化
- 自
- 小
- 软件
- 方案,
- 解决方案
- 一些
- 不久
- 具体的
- 指定
- 阶段
- 开始
- 州/领地
- 个人陈述
- 步
- 步骤
- 流
- 严格
- 样式
- 这样
- 肯定
- 量身定制
- 目标
- 专业技术
- 终端
- test
- 测试
- 这
- 其
- 他们
- 然后
- 那里。
- 因此
- Free Introduction
- 次
- 至
- 触发
- 引发
- true
- 信任
- 尝试
- 转
- 二
- 下
- 强调
- 最新动态
- 网址
- 使用
- 用过的
- 用户
- 用户
- 使用
- 运用
- 折扣值
- 各个
- 版本
- 查看
- 参观
- 想
- 方法
- we
- 卷筒纸
- Web开发
- Web服务
- 网站
- 欢迎进入
- 井
- ,尤其是
- 每当
- 这
- 将
- 中
- 也完全不需要
- 您
- 您一站式解决方案
- 和风网