文档首页/ 应用运维管理 AOM/ 最佳实践(2.0)/ 将AOM仪表盘详情页面嵌入用户自建系统
更新时间:2024-08-14 GMT+08:00
分享

将AOM仪表盘详情页面嵌入用户自建系统

AOM支持将仪表盘详情页界面嵌入到客户自建系统。通过统一身份认证服务IAM的联邦代理机制实现用户自定义身份代理,再将登录链接嵌入至客户自建系统实现无需在华为云官网登录就可在自建系统界面查看AOM仪表盘详情页。

应用场景

  • 该功能主要用于用户可以在自建系统免密登录AOM的场景,但是登录华为云AOM控制台还是需要账号密码。
  • 用户在外部系统中(例如公司内部运维或运营系统)快速集成AOM仪表盘详情页面。
  • 无需管理众多华为子账户,方便将AOM仪表盘详情页面进行分享查看。

将AOM仪表盘详情页面嵌入用户自建系统

您需要先在IAM服务为用户自定义创建身份代理并创建委托,然后再将AOM仪表盘详情页嵌入用户自建系统。

  1. 使用DomainA(该账号仅供参考,请以实际账号为准)登录统一身份认证服务控制台。
  2. 在用户组页面创建IAM用户组(用户组名以GroupC为例)并授予全局服务中的Agent Operator权限,该权限仅能切换角色至委托方账号中,访问授权的服务,具体方法请参见:创建用户组并授权
  3. 在用户页面创建IAM用户(用户名以UserB为例),并加入GroupC用户组中,具体方法请参见:用户组添加用户

    请确认该IAM用户支持编程访问管理控制台访问AOM服务。如需修改IAM用户访问方式,请参考:修改IAM用户信息

  4. 在左侧导航栏选择“委托”,单击右上方的“创建委托”。
  5. 在创建委托页面,设置委托参数。

    1. “委托名称”以“iam_for_aom”为例,“委托类型”必须选择“普通账号”,“委托的账号”填写“DomainA”,“持续时间”选择“永久”,单击“下一步”。
    1. 设置最小授权范围,选择“AOM ReadOnlyAccess”权限(该权限为AOM的只读权限,只能查询AOM服务的数据,不能对AOM服务做设置修改),单击“下一步”。
      图1 选择策略
    2. 选择授权范围方案,勾选“指定区域项目资源”,根据需要勾选对应区域,单击“确定”。

  6. 使用postman等工具获取X-Subject-LoginToken参数。(以下示例截图仅供参考,请以实际获取的参数为准)

    1. 通过账号密码获取UserB用户的X-Subject-Token。

      接口类型:POST

      接口url:https://Endpoint/v3/auth/tokens,参数选择自定义格式,并输入如下参数,其中name从上而下依次为租户名称、用户名称、租户名称,password为用户密码。

      终端节点(Endpoint)即调用API的请求地址,不同服务在不同区域的终端节点不同,您可以从地区和终端节点中查询统一身份认证服务的终端节点。
       {
               "auth" : {
                         "identity" : {
                                  "methods" : [
                                           "password"
                                  ],
                                  "password" : {
                                           "user" : {
                                                     "domain" : {
                                                              "name" : "xxxxxxx"
                                                     },
                                                     "name" : "xxxxxx",
                                                     "password" : "xxxxxx"
                                           }
                                  }
                         },
                         "scope" : {
                                  "domain" : {
                                           "name" : "xxxxxx"
                                  }
                         }
               }
      }

      在返回结果中获取响应头中X-Subject-Token字段。

      图2 返回结果
    2. 根据1获取的用户X-Subject-Token获取临时访问密钥。

      在请求header添加X-Auth-Token字段,value为1中获取到的X-Subject-Token。

      图3 获取临时访问密钥

      接口类型:POST

      接口url:https://Endpoint/v3.0/OS-CREDENTIAL/securitytokens,参数选择自定义格式,并输入如下参数,其中具体参数含义分别为:agency_name为委托名称、domain_name为租户名称、duration_seconds为token过期时间(单位秒)、name为用户名。
      {
               "auth" : {
                         "identity" : {
                                  "methods" : [
                                           "assume_role"
                                  ],
                                  "assume_role" : {
                                           "agency_name" : "iam_for_aom",
                                           "domain_name" : "xxxxxx",
                                           "duration_seconds" : 86400,
                                           "session_user" : {
                                                     "name" : "xxxxxx"
                                           }
                                  }
                         }
               }
      }

      在返回结果中获取响应体中获取临时访问密钥。

      图4 获取临时访问密钥
    3. 根据2获取的临时访问密钥获取登录X-Subject-LoginToken。

      接口类型:POST

      接口url:https://Endpoint/v3.0/OS-AUTH/securitytoken/logintokens,参数选择自定义格式,并输入如下参数,其中access、secret、id对应的值分别为2返回的access、secret、securitytoken,duration_seconds为token过期时间,单位为秒。
      {
               "auth" : {
                         "securitytoken" : {
                                  "access" : "xxxxxx",
                                  "secret" : "xxxxxx",
                                  "id" : "xxxxxx",
                                  "duration_seconds" : 43200
                         }
               }
      }

      在返回结果中获取响应头中的X-Subject-LoginToken字段。

      图5 获取X-Subject-LoginToken

  7. 根据3获取的X-Subject-LoginToken构建代理URL,完成免密登录。

    代理登录地址的构建规则为:

    https://auth.huaweicloud.com/authui/federation/login?service={target_console_url}&logintoken={logintoken}&idp_login_url={enterprise_system_loginURL}

    表1 URL参数说明

    参数名称

    说明

    {target_console_url}

    AOM仪表盘详情页服务地址说明的url encode编码结果。详细请参考仪表盘服务地址说明

    {logintoken}

    3获取的X-Subject-LoginToken的urlencode编码结果。

    {enterprise_system_loginURL}

    选填参数,为客户的页面地址的urlencode编码结果,当loginToken验证失效时会跳转到该页面。

    • 以上三个参数都需要进行urlencode编码,否则可能导致免密登录失败。
    • urlencode编码操作方式:打开浏览器按F12进入开发者模式,选择console(控制台),输入“encodeURIComponent("*")”,*为需要编码的信息,单击“Enter”,查看返回的urlencode编码值。

    {target_console_url}的值为AOM前台服务URL地址的urlencode编码,编码前URL如下,具体参考仪表盘服务地址说明

    https://console.huaweicloud.com/aom2/?region={regionId}&cfModuleHide=header_sidebar#/aom2/overview/dashboard/{id}?version=v1&epsId={epsId}&hideAddBtn={hideAddBtn}&hideEditBtn={hideEditBtn}&hideSaveBtn={hideSaveBtn}&hideDeleteBtn={hideDeleteBtn}&hideSettingBtn={hideSettingBtn}&showCyclePlay={showCyclePlay}&showFullScreenBtn={showFullScreenBtn}&showExporterBtn={showExporterBtn}&hideEditChartBtn={hideEditChartBtn}&hideDeleteChartBtn={hideDeleteChartBtn}

  8. 完成以上步骤,即可实现在自建系统免密登录应用运维管理AOM

    使用如下iframe嵌套,其中src的值为7中获得的代理URL。
    <body>   
        <iframe src="target_url" width="100%" height="96%" id="aomIframePage"></iframe>       
    </body>

仪表盘服务地址说明

  1. 仪表盘详情页,基础URL为:
    https://console.huaweicloud.com/aom2/?region={regionId}&cfModuleHide=header_sidebar#/aom2/overview/dashboard/{id}?version=v1&epsId={epsId}
    表2 参数说明表

    参数名称

    必填

    类型

    描述

    regionId

    String

    仪表盘当前区域ID,登录console页面后,在浏览器地址栏中获取。

    id

    String

    仪表盘当前图表ID,从仪表盘详情页的浏览器地址栏获取。

    epsId

    String

    仪表盘所属的企业项目ID,从仪表盘详情页的浏览器地址栏获取。如果无企业项目,值为0。

  2. 仪表盘详情页控制按钮,基础URL为:
    https://console.huaweicloud.com/aom2/?region={regionId}&cfModuleHide=header_sidebar#/aom2/overview/dashboard/{id}?version=v1&epsId={epsId}&hideAddBtn={hideAddBtn}&hideEditBtn={hideEditBtn}&hideSaveBtn={hideSaveBtn}&hideDeleteBtn={hideDeleteBtn}&hideSettingBtn={hideSettingBtn}&showCyclePlay={showCyclePlay}&showFullScreenBtn={showFullScreenBtn}&showExporterBtn={showExporterBtn}&hideEditChartBtn={hideEditChartBtn}&hideDeleteChartBtn={hideDeleteChartBtn}
    表3 参数说明

    参数名称

    必填

    类型

    默认值

    描述

    regionId

    String

    仪表盘当前区域ID,登录console页面后,在浏览器地址栏中获取。

    id

    String

    仪表盘当前图表ID,从仪表盘详情页的浏览器地址栏获取。

    epsId

    String

    仪表盘所属的企业项目ID,从仪表盘详情页的浏览器地址栏获取。如果无企业项目,值为0。

    hideAddBtn

    Boolean

    false

    是否隐藏添加图表按钮,默认展示,如需隐藏,该参数值为true。

    hideEditBtn

    Boolean

    false

    是否隐藏编辑图表按钮,默认展示,如需隐藏,该参数值为true。

    hideSaveBtn

    Boolean

    false

    是否隐藏保存图标,默认展示,如需隐藏,该参数值为true。

    hideDeleteBtn

    Boolean

    false

    是否隐藏删除按钮,默认展示,如需隐藏,该参数值为true。

    hideSettingBtn

    Boolean

    false

    是否隐藏设置按钮,默认展示,如需隐藏,该参数值为true。

    showCyclePlay

    Boolean

    false

    是否展示轮播按钮,默认隐藏,如需展示,该参数值为true。

    说明:

    使用iframe内嵌场景才会生效,必须将iframe标签属性allowfullscreen设置为true,如:<iframe allowfullscreen="true ... ></iframe>

    showFullScreenBtn

    Boolean

    false

    是否展示全屏按钮,默认隐藏,如需展示,该参数值为true。

    说明:

    使用iframe内嵌场景才会生效,必须将iframe标签属性allowfullscreen设置为true,如:<iframe allowfullscreen="true ... ></iframe>

    showExporterBtn

    Boolean

    false

    是否展示导出按钮,默认隐藏,如需展示,该参数值为true。

    hideEditChartBtn

    Boolean

    false

    是否隐藏编辑图表,默认展示,如需隐藏,该参数值为true。

    hideDeleteChartBtn

    Boolean

    false

    是否隐藏删除图表,默认展示,如需隐藏,该参数值为true。

    AOM的系统内置仪表盘详情页面仅全屏,轮播,导出按钮支持展示或隐藏。

    图6 参数与界面对应关系图1(仅供参考)
    图7 参数与界面对应关系图2(仅供参考)

相关文档