
# 将AOM仪表盘图表页面嵌入用户自建系统
AOM支持将仪表盘图表页面嵌入到客户自建系统。通过统一身份认证服务IAM的联邦代理机制实现用户自定义身份代理，再将登录链接嵌入至用户自建系统实现无需在华为云官网登录就可在自建系统界面查看AOM仪表盘图表页面。
#### 应用场景
- 该功能主要用于用户可以在自建系统免密登录AOM的场景，但是登录华为云AOM控制台还是需要账号密码。
- 用户在外部系统中（例如公司内部运维或运营系统）快速集成AOM仪表盘图表页面。
- 无需管理众多华为子账户，方便将AOM仪表盘图表页面进行分享查看。
 
#### 约束与限制
当前将AOM仪表盘图表页面嵌入用户自建系统功能仅在华北-北京四、华东-上海一、华南-广州区域支持，其他区域暂不支持。
#### 将AOM仪表盘图表页面嵌入用户自建系统
您需要先在IAM服务为用户自定义创建身份代理并创建委托，然后再将AOM仪表盘图表页面嵌入用户自建系统。
1. 使用管理员账号DomainA（该账号仅供参考，请以实际账号为准）登录统一身份认证服务控制台。
2. 在用户组页面创建IAM用户组（用户组名以GroupC为例）并授予全局服务中的Agent Operator权限，该权限仅能切换角色至委托方账号中，访问授权的服务，具体方法请参见：[创建用户组并授权](https://support.huaweicloud.com/usermanual-iam/iam_03_0001.html)。
3. 在用户页面创建IAM用户（用户名以UserB为例），并加入GroupC用户组中，具体方法请参见：[用户组添加用户](https://support.huaweicloud.com/usermanual-iam/iam_03_0002.html)。
   
   请确认该IAM用户支持**编程访问** 和**管理控制台访问** AOM服务。如需修改IAM用户访问方式，请参考：[修改IAM用户信息](https://support.huaweicloud.com/usermanual-iam/iam_02_0002.html)。
   
   
4. 在左侧导航栏选择"委托"，单击右上方的"创建委托"。
5. 在创建委托页面，设置委托参数。 
   1. "委托名称"以"iam_for_aom"为例，"委托类型"必须选择"普通账号"，"委托的账号"填写"DomainA"，"持续时间"选择"永久"，单击"下一步"。
   
   
   
   2. 设置最小授权范围，选择"AOM ReadOnlyAccess"权限（该权限为AOM的只读权限，只能查询AOM服务的数据，不能对AOM服务做设置修改），单击"下一步"。
      图1选择策略   
      ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002030462236.png "点击放大") 
   
   3. 选择授权范围方案，勾选"指定区域项目资源"，根据需要勾选对应区域，单击"确定"。
   
   
   
   
6. 使用postman等工具获取X-Subject-LoginToken参数。（以下示例截图仅供参考，请以实际获取的参数为准） 
   1. 通过账号密码获取UserB用户的X-Subject-Token。
      接口类型：POST
      接口url：https://Endpoint/v3/auth/tokens，参数选择自定义格式，并输入如下参数，其中name从上而下依次为租户名称、用户名称、租户名称，password为用户密码。
      终端节点（Endpoint）即调用API的**请求地址** ，不同服务在不同区域的终端节点不同，您可以从[地区和终端节点](https://console.huaweicloud.com/apiexplorer/#/endpoint/IAM)中查询统一身份认证服务的终端节点。
      ```
      {
               "auth" : {
                         "identity" : {
                                  "methods" : [
                                           "password"
                                  ],
                                  "password" : {
                                           "user" : {
                                                     "domain" : {
                                                              "name" : "xxxxxxx"
                                                     },
                                                     "name" : "xxxxxx",
                                                     "password" : "xxxxxx"
                                           }
                                  }
                         },
                         "scope" : {
                                  "domain" : {
                                           "name" : "xxxxxx"
                                  }
                         }
               }
      }
      ```
      在返回结果中获取响应头中X-Subject-Token字段。
      图2返回结果   
      ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002030303816.png "点击放大") 
   
   2. 根据[1]获取的用户X-Subject-Token获取临时访问密钥。
      在请求header添加X-Auth-Token字段，value为[1]中获取到的X-Subject-Token。
      图3获取临时访问密钥   
      ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002066461941.png "点击放大")
      接口类型：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获取临时访问密钥   
      ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002030462248.png "点击放大") 
   
   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   
      ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002030303824.png "点击放大") 
   
   
   
   
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}
   表1URL参数说明 
   | 参数名称                         | 说明                                                                                                            | 约束与限制                                                                                                                                                                                                                                                                                                         |
   |:---|:---|:---|
   | {target_console_url}         | AOM仪表盘图表页面服务地址说明的url encode编码结果。详细请参考[仪表盘服务地址说明]。 | - 三个参数都需要进行urlencode编码，否则可能导致免密登录失败。  - urlencode编码操作方式：打开浏览器按F12进入开发者模式，选择console（控制台），输入"encodeURIComponent("\*")"，\*为需要编码的信息，单击"Enter"，查看返回的urlencode编码值。   |
   | {logintoken}                 | 为[3]获取的X-Subject-LoginToken的urlencode编码结果。          | - 三个参数都需要进行urlencode编码，否则可能导致免密登录失败。  - urlencode编码操作方式：打开浏览器按F12进入开发者模式，选择console（控制台），输入"encodeURIComponent("\*")"，\*为需要编码的信息，单击"Enter"，查看返回的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}
   ```
   AOM仪表盘支持展示或隐藏的按钮参数说明如[表3]所示。其中AOM的系统内置仪表盘图表页面仅全屏（showFullScreenBtn），轮播（showCyclePlay），导出（showExporterBtn）按钮支持展示或隐藏。
    表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。                                                                                                                                                                     |
      
   图6参数与界面对应关系图1（仅供参考）   
   ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002066461945.png "点击放大")
   图7参数与界面对应关系图2（仅供参考）   
   ![](https://support.huaweicloud.com/bestpractice-aom2/zh-cn_image_0000002066583289.png "点击放大") 
 
