云监控提供控制台内嵌功能，支持将云产品监控页面嵌入到外部系统的自建 Web 页面中，您可以在外部系统中免密登录云监控控制台的云产品监控页面并进行相关操作。本文介绍如何将云监控控制台的云产品监控页面嵌入到外部系统。 ## 背景信息控制台内嵌功能通过安全令牌服务 STS 实现用户的自定义身份代理，您可以授予 IAM 用户相关数据和页面的访问权限，以此身份通过 STS 服务创建临时访问凭证，并获取临时登录 Token。您访问内嵌的云监控控制台页面时，通过 URL 中封装的临时登录 Token 进行鉴权，访问过程无需使用 IAM 用户账密，且登录无感知。涉及的鉴权流程如下： ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_3a9efd182396551e441f6d5697e6d515.png =971x) ## 操作步骤 ### 步骤一：创建 IAM 角色并授予权限 IAM 角色是一种虚拟用户，无永久的身份凭证，只能通过 STS 获取可以自定义时效和访问权限的临时安全令牌，且需要被一个可信的实体身份扮演。 1. 通过火山引擎主账号登录 [访问控制 IAM 控制台](https://console.volcengine.com/iam/)。 2. 在左侧导航栏中选择 **角色管理**，单击 **新建角色**。 3. 配置 **选择信任身份类型** 为 **账号**，**选择身份** 为 **当前账号**，然后单击 **下一步**。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_d345575eba1cad33352deaf522df3663.png =535x) 4. 配置 **角色名**，然后单击 **下一步**。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_a6d8151d951284a71d0ccd0e81d356f1.png =539x) 5. 选择 CloudMonitorReadOnlyAccess 权限策略，然后单击 **提交**。 :::tip 本文以为 IAM 角色授予系统默认权限 CloudMonitorReadOnlyAccess 为例。授权后，该 IAM 角色具备所有云产品资源和页面的只读权限。您也可以根据业务需求，创建自定义权限策略。 ::: ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_c1026aa43e710ccb738828104b5bf73d.png =551x) 6. 在角色列表中单击创建完成的角色，进入角色详情页面。保存该角色的 TRN 详情，后续在调用 AssumeRole 接口时，需要输入该 TRN。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_9414800c6e3d798a6dadbba440bc1467.png =961x) ### 步骤二：创建 IAM 用户 IAM 用户是一种实体身份类型，拥有确定的身份 ID 和身份凭证、独立的登录密码和访问密钥。您需要创建一个 IAM 用户，用于扮演 IAM 角色，便于后续获取临时安全令牌。本文以 **通过用户名创建** 为例，其他创建方式请参考 [创建用户](https://www.volcengine.com/docs/6257/64977)。 1. 在左侧导航栏中，选择 **用户管理 \> 用户**，单击 **新建用户**，并选择 **通过用户名创建**。 2. 配置 IAM 用户的 **用户名**，并在 **访问方式** 中开启 **编程访问**。然后单击 **下一步**。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_6784246d930fbf00fff4cd136cedf400.png =910x) 3. 在 **权限设置** 步骤，单击 **下一步**。 4. 在 **审阅** 步骤，确认用户名信息，单击 **下一步**。 ### 步骤三：授予 IAM 用户扮演 IAM 角色的权限完成此授权后，IAM 用户才能扮演 IAM 角色去获取 IAM 角色的临时安全令牌，并访问 IAM 角色权限范围内的云产品资源。此环节的授权包括以下两部分，均为必选设置。 * 为 IAM 角色设置信任策略。创建 IAM 角色时，默认的可信实体为火山引擎账号，您需要修改 IAM 角色的信任策略，将 `Principal` 中的账号配置修改为您在步骤二中创建的 IAM 用户，表示该 IAM 角色可以被指定的 IAM 用户扮演。 * 为 IAM 用户授予 `STSAssumeRoleAccess` 权限策略。为 IAM 用户授予 `STSAssumeRoleAccess` 权限策略后，您才能使用 IAM 用户的访问密钥调用 AssumeRole 接口申请临时安全令牌。授权步骤如下： 1. 修改 IAM 角色的信任策略。 1. 在左侧导航栏中，选择 **角色管理**。 2. 在角色列表中，单击步骤一中创建角色的名称，进入角色详情页面。 3. 选择 **信任关系** 页签，单击 **编辑信任策略**。修改信任策略中的 `IAM` 字段，并单击 **保存**。将 `trn` 中默认指定的 `root` 改为 `user/${IAMUserName}`，例如 `user/user-demo`。以下述信任策略为例，该策略表示此 IAM 角色可以被火山引擎账号 `21000****` 下的 IAM 用户 `user-demo` 扮演。 ```json { "Statement": [ { "Effect": "Allow", "Action": [ "sts:AssumeRole" ], "Principal": { "IAM": [ "trn:iam::21000****:user/user-demo" ] } } ] } ``` 2. 为 IAM 用户授予 `STSAssumeRoleAccess` 权限。 1. 在左侧导航栏中，选择 **用户管理 \> 用户**。 2. 在用户列表中，单击步骤二中创建用户的名称，进入用户详情页面。 3. 选择 **权限** 页签，单击 **添加权限**。 4. 在权限列表中，选择`STSAssumeRoleAccess`权限，单击 **提交**，为 IAM 用户添加权限。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_f6566afb105a2b8921d83dae78884614.png =923x) ### 步骤四：调用 AssumeRole 获取临时安全令牌 :::warning AssumeRole 接口 **不支持通过火山引擎账号（主账号）调用**，请使用 IAM 子用户调用。 ::: IAM 用户将通过扮演 IAM 角色来调用安全令牌服务的 [AssumeRole](https://www.volcengine.com/docs/6257/86374) 接口，并获取 IAM 角色的临时安全令牌。临时安全令牌包括临时访问密钥（AccessKeyId、SecretAccessKey）和临时 Token（SessionToken）。请求示例如下，其中参数 `RoleTrn` 应指定为您在步骤一中创建 IAM 角色的 TRN。 ```Bash GET /?RoleTrn=trn:iam::210000****:role/CloudMonitorDemoRole&RoleSessionName=ceshiassume&Action=AssumeRole&Version=2018-01-01 HTTP/1.1 Accept: application/json Content-Type: application/x-www-form-urlencoded Host: iam.volcengineapi.com X-Date: 20180614T131357Z Authorization: HMAC-SHA256 Credential=AKLT4MQ/20180614/cn-north-1/sts/request, SignedHeaders=accept;content-type;host;x-date, Signature=83671ac2**8a5581f ``` 预期返回结果示例如下。从返回结果中可以获得临时安全令牌`AccessKeyId`、`SecretAccessKey`和`SessionToken`。 ```json { "ResponseMetadata": { "RequestId": "20241217152800659FA79FAB8752F0992A", "Action": "AssumeRole", "Version": "2018-01-01", "Service": "sts", "Region": "cn-beijing" }, "Result": { "Credentials": { "ExpiredTime": "2024-12-17T16:28:00+08:00", "CurrentTime": "2024-12-17T15:28:00+08:00", "AccessKeyId": "AKT***", "SecretAccessKey": "vqD***", "SessionToken": "nCg***" }, "AssumedRoleUser": { "Trn": "trn:sts::210***:assumed-role/CloudMonitorDemoRole/ceshiassume", "AssumedRoleId": "183***:ceshiassume" } } } ``` ### 步骤五：获取登录 Token 登录 Token（SigninToken）是 STS 服务提供的临时访问 Token，外部系统的服务端需要通过登录 Token 构建云监控的免密访问链接。调用 STS 的接口 [getSigninTokenWithSTS](https://www.volcengine.com/docs/6257/160363) 获取登录 Token。在请求中需要指定临时 AK、SK 和 sessionToken，均为步骤四中获取的临时安全令牌。 :::warning * 登录 Token 的有效期默认为 15 分钟且不可更改，请在 Token 到期前完成访问链接的构建与鉴权登录，到期后需要重新请求 [getSigninTokenWithSTS](https://www.volcengine.com/docs/6257/160363) 获取新的登录 Token。 * 通过登录 Token 完成一次登录后，登录 Token 随即失效，如果您刷新页面，则需要重新请求获取登录 Token。 ::: 请求示例如下： ```bash curl -X POST https://console.volc-embed.com/api/passport/login/getSigninTokenWithSTS \ -H "Content-Type: application/x-www-form-urlencoded" \ -d "accessKeyId=AKT***&secretAccessKey=vqD***&sessionToken=nCg***&sessionDuration=900" ``` 请求示例中的参数说明，如下表所示。 |参数 |是否必选 |说明 | |---|---|---| |accessKeyId |必选 |步骤四中通过 AssumeRole 获取的临时 AccessKeyId。 | |secretAccessKey |必选 |步骤四中通过 AssumeRole 获取的临时 SecretAccessKey。 | |sessionToken |必选 |步骤四中通过 AssumeRole 获取的临时 SessionToken。 | |sessionDuration |可选 |登录态的持续时长，超期后需要重新登录。单位为秒，取值为 900~43200。 | 预期返回结果示例如下。其中`SigninToken`字段即为登录使用的 Token。 ```json { "ResponseMetadata": { "RequestId": "2024121715500018B2E1BD90E5AEEA2701" }, "Result": { "SigninToken": "UTV***" } } ``` ### 步骤六：构建免密访问链接云监控控制台的免密访问链接格式如下所示。 ```html https://console.volc-embed.com/api/passport/login/loginWithSigninToken?signinToken=${signinToken}&redirectURI=${target_console_url} ``` 链接中的参数说明如下表所示。 |参数 |说明 | |---|---| |signinToken |步骤五中获取的登录 Token。 | |redirectURI |支持内嵌的云产品监控页面。对应页面的 URL 如下所示：|\ | |```html|\ | |https://console.volc-embed.com/cloud-monitor/productDetailDashboard?resourceID=${resourceID}®ion=${region}&namespace=${namespace}|\ | |```|\ | ||\ | |:::warning|\ | ||\ | |* 在使用 redirectURI 链接前，需先使用 encodeURL 转码链接。即需要先根据实际值替换链接中的`${resourceID}`、`${region}`、`${namespace}`等参数，再通过 encodeURL 转码链接。|\ | | * `${resourceID}`为要查看的云产品资源ID。|\ | | * `${region}`为云产品资源所在的地域。|\ | | * `${namespace}`为云产品的命名空间。|\ | ||\ | |:::| ### 步骤七：在外部系统中嵌套页面支持以 iFrame 方式将云监控控制台嵌入到第三方自建 Web 页面中。示例如下，在外部系统中嵌入云监控控制台页面。其中 `src` 的值应指定为步骤六中构建的免密访问链接。 ```html ``` ## 结果验证使用构建好的免密链接，访问指定的观测看板。 ```html https://console.volc-embed.com/api/passport/login/loginWithSigninToken?signinToken=SjVX***YzBTND0=&redirectURI=https%3A%2F%2Fconsole.volc-embed.com%2Fcloud-monitor%2FproductDetailDashboard%3Fregion%3Dcn-guilin-boe%26resourceID%3Di-yd6htkd1c0r9cxxk5yh4%26namespace%3DVCM_ECS ``` 预期结果如下，可以正确访问到云产品监控页面。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_e2d67f27d9dea1a5ea4d00640ebeb326.png =970x) ## 常见问题 ### 如何设置内嵌页面的登录态时长通过第三方系统的 Web 页面免密登录云监控控制台页面之后，登录状态会维持一段时间，超期之后应用服务端需要重新获取并刷新 Token，以便用户侧重新登录。内嵌页面的登录态时长由 [getSigninTokenWithSTS](https://www.volcengine.com/docs/6257/160363) 接口参数 `sessionDuration`指定。调用接口时，通过请求参数 `sessionDuration`设置内嵌页面的登录态时长。`sessionDuration`单位为秒，取值范围为 900~43200。内嵌页面的登录态时长（sessionDuration）默认维持 AssumeRole 接口的 `DurationSeconds`参数设置，而`DurationSeconds`默认为 1 小时。即默认情况下，AssumeRole 接口返回的`ExpiredTime`是既是临时安全令牌的有效期截止时间，也是登录状态的结束时间。 ### 如何获取云产品监控页所需的参数 1. 登录 [云监控控制台](https://console.volcengine.com/cloud-monitor)。 2. 在左侧导航栏中点击 **云产品监控**，点击想要查看的云产品名称。 3. 在云产品资源列表Table中，点击资源名称，跳转到云产品监控详情页。 4. 查看浏览器地址栏，URL 中的`region`、`namespace`、`resourceID`字段即为构建免密访问链接所需的参数。 ## 示例代码 ### Node.js ```javascript const {Service} = require('@volcengine/openapi'); const axios= require("axios"); class StsService extends Service { constructor(props) { super({ ...props, defaultVersion: "2018-01-01", serviceName: "sts", }); } } async function main() { const stsService = new StsService() stsService.setAccessKeyId('xxx'); stsService.setSecretKey('yy') stsService.setHost('sts.volcengineapi.com') // 调用 assumeRole 获取临时安全令牌。 const assumeRole = stsService.createAPI('AssumeRole', { method: 'GET', }); const token = await assumeRole({ RoleTrn: 'trn:iam::${accountId}:role/${角色名}', RoleSessionName: 'cloudMonitorIframe' }) const { AccessKeyId, SecretAccessKey, SessionToken } = token.Result.Credentials; // 根据临时安全令牌获取登录 token。 const signinResp = await axios.post('https://console.volc-embed.com/api/passport/login/getSigninTokenWithSTS', { "accessKeyId": AccessKeyId, "secretAccessKey": SecretAccessKey, "sessionToken": SessionToken }) const signinToken = signinResp.data.Result.SigninToken; // 根据登录 signinToken 生成免登录连接。 const url = `https://console.volc-embed.com/api/passport/login/loginWithSigninToken?signinToken=${signinToken}&redirectURI=${encodeURIComponent('https://console.volc-embed.com/cloud-monitor/productDetailDashboard?resourceID=${resourceID}®ion=${region}&namespace=${namespace}')}` console.log(url) } main(); ``` ### Python ```python # coding=utf-8 from __future__ import absolute_import from __future__ import division from __future__ import print_function import os import json import requests from urllib.parse import quote from volcengine.sts.StsService import StsService if __name__ == "__main__": # 初始化客户端，推荐通过环境变量动态获取火山引擎密钥等身份认证信息，以免 AccessKey 硬编码引发数据安全风险。详细说明请参考 https://www.volcengine.com/docs/6470/1166455。 access_key_id = os.environ["VOLCENGINE_ACCESS_KEY_ID"] access_key_secret = os.environ["VOLCENGINE_ACCESS_KEY_SECRET"] sts_service = StsService() sts_service.set_ak(access_key_id) sts_service.set_sk(access_key_secret) role_trn = "trn:iam::${yourAccountID}:role/${yourRole}" role_session_name = "iframe" target_console_url = "https://console.volc-embed.com/cloud-monitor/productDetailDashboard?resourceID=${resourceID}®ion=${region}&namespace=${namespace}" # 调用 AssumeRole 接口获取临时安全令牌。 assume_role_params = { "DurationSeconds": "900", "RoleSessionName": role_session_name, "RoleTrn": role_trn } assume_role_resp = sts_service.assume_role(assume_role_params) assume_rule_ak = assume_role_resp["Result"]["Credentials"]["AccessKeyId"] assume_role_sk = assume_role_resp["Result"]["Credentials"]["SecretAccessKey"] session_token = assume_role_resp["Result"]["Credentials"]["SessionToken"] # 获取登录 Token。 url_str = "https://console.volc-embed.com/api/passport/login/getSigninTokenWithSTS" url_str = url_str + "?accessKeyId=" + quote(assume_rule_ak) url_str = url_str + "&secretAccessKey=" + quote(assume_role_sk) url_str = url_str + "&sessionToken=" + quote(session_token) url_str = url_str + "&sessionDuration=3600" get_signin_token_with_sts_resp = json.loads(requests.post(url_str).content) signin_token = get_signin_token_with_sts_resp["Result"]["SigninToken"] # 构建免密访问链接。 result = "https://console.volc-embed.com/api/passport/login/loginWithSigninToken" result = result + "?signinToken=" + quote(signin_token) result = result + '&redirectURI=' + quote(target_console_url) print(result) ```