5.1 页面嵌套

页面嵌套实现说明

嵌入页面需要用户token刷新标识refresh_token,refresh_token获取请参考3.3登录接口说明
第三方将HAI平台某一个web页面嵌入显示, 因HAI平台接口访问需要token, 所以需要在嵌入页面时需要在url链接携带传入refresh_token参数, HAI平台会根据refresh_token获取token并维护获取token的生命周期,错误的refresh_token会导致HAI平台回退到登录页面
第三方使用iframe 嵌入HAI平台web页面, 嵌入URL填写HAI平台首页URL(base_url/aiot/#/login?refresh_token=登录获取到的refresh_token),HAI平台会根据refresh_token获取token并维护获取token的生命周期,错误的refresh_token会导致HAI平台回退到登录页面
请注意将本文档中的192.168.18.124测试地址替换为现场HAI平台服务器的真是地址

URL示例

http://192.168.18.124/aiot?refresh_token=GLERYXSOWMG2RESG86G2LW

嵌入页面html文件示例

请注意将192.168.18.124替换现场HAI平台服务器的真实地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            white-space: nowrap;
            font-size: 1.2rem;
            margin-top: 2rem;
            margin-left: 1rem;
        }
    </style>
</head>

<body style="text-align: center">
<h1>HAI平台页面嵌入示例</h1>
<!--
        此 refresh_token具有时效性, 真实项目中请根据分配的账号密码调用登录接口获取refresh_token
        错误的refresh_token会导致HAI平台回退到登录页面
-->
<div style="display: flex">
    <div style="display: inline; text-align: left">
        <button>菜单1</button>
        <br>
        <button>菜单2</button>
        <br>
        <button>菜单3</button>
        <br>
        <button>菜单4</button>
        <br>
        <button>菜单5</button>
        <br>
        <button>菜单6</button>
        <br>
        <button>菜单7</button>
        <br>
        <button>菜单8</button>
        <br>
    </div>
    <iframe style="width: 95%; height: 70rem;margin-left: 3%; border-color: red"
            src="http://192.168.18.124/aiot?refresh_token=GLERYXSOWMG2RESG86G2LW"></iframe>
</div>
</body>
</html>