# SP入驻portal页以及isv控制台

作为SP,您可以提供Portal(产品介绍页)以及开发者控制台(isv控制台),以此来让用户更好的了解并使用您的服务,您可以将这部分页面集成到AECORE里。您的页面需要做相应改造,以便让ISV在AECORE上浏览您的产品介绍页,以及登录后无缝进入到控制台使用服务。

如果您的服务只提供API服务,不提供控制台操作,可跳过该步骤。

# 改造对接主流程

  • 申请域名配置
  • 实现单点登录(仅针对控制台页面)
  • 接入JSSDK
  • 配置isv控制台链接

# 域名开通指向

入驻AECORE首先需要根据域名规范进行域名的申请并配置,请联系:刘大泽(liudz@glodon.com)

# 如何实现单点登录

# 流程图

ISV控制台页面

# demo示例

# 浏览器端实现jsonp相关代码

//service_key为应用的appKey,callback为回调执行的js函数,详情请查看下方链接⬇️
util._jsonp('https://account-test.glodon.com/user_ticket?service_key=#{xxx}&callback=jsonp_1584069875899_41619').then(res => {
	//获取ticket成功后调用服务端接口实现单点登录
	//此处url为服务端实现jsonp的路径,ticket为通过jsonp获取的。
    util._axios('POST', 'localhost:8080/jsonp?ticket=#{ticket}').then(res => {
        if (res.data.code == 'success') {
            //单点登录成功
        }
    })
})
1
2
3
4
5
6
7
8
9
10

相关链接

JSONP方式获取ticket

ticket有效性检查

# 服务端实现jsonp相关代码

public ResponseBean<String> casValidate(@RequestParam(value = "ticket") String ticket) {
    try {
    	//调用用户中心验证ticket接口
        AccessTokenAndUserInfo accessTokenAndUserInfo = this.accountService.validateTicket(token.getTicket());
		Token token = new Token();
		//验证ticket后返回用户token
    	token.setAccessToken(accessTokenAndUserInfo.getAccessToken());
    	//集成shiro的登录功能
	    securityService.signIn(token);
    } catch (Exception e) {
        return ResponseBean.fail("登录失败");
    }
    return ResponseBean.success(userService.getUserInfo());
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 前端页面如何集成JSSDK

# 打开自己前端页面

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AECORE Layout-Frame</title>

</head>
<body>
    <div id="app">
        vue/react
    </div>

    <!-- 此处引入AECORE的JavaScript框架组件库-->
    <script>
        window.onload=function(){
            // 此处进行初始化配置
        }
    </script> 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 引入AECORE的JavaScript框架组件库

<script src="https://aecore.glodon.com/webresources/aecore-layout-frame/index.js"></script>
1

# Portal页面初始化配置

var frame = new AecoreLayoutFrame({
    type: 'portal'
});
frame.init();
1
2
3
4

运行结果

Portal页面

# ISV控制台页面初始化配置

var frame = new AecoreLayoutFrame({
    type: 'isv',
    position: 'fixed'  //固定头部
});
frame.init();
1
2
3
4
5

运行结果

ISV控制台页面

参数说明

参数 说明 类型 可选值 默认值
type 接入网站类型(官网/控制台) String portal、isv portal
mode 接入模式,支持aecore/用户中心的测试以及生产环境 String prod、dev prod
position 控制台头部position配置(仅针对type:isv) String relative、fixed、absolute relative
callback sdk加载完回调,可用于优化页面渲染 Function - -

超时处理

考虑到页面通过Jsonp单点登录进行联动,SP页面接口请求如果涉及超时,则需跳转到aecore登录页面进行重新登录。

跳转URL如下:

// 测试环境
https://aecore-test.glodon.com/console#/login?redirectUrl=${可填写登录后的回调地址}

// 生产环境
https://aecore.glodon.com/console#/login?redirectUrl=${可填写登录后的回调地址}
1
2
3
4
5

# 配置isv控制台

控制台开发完成,如何把控制台挂在AECORE上?参考以下步骤:

登录到AECORE,进入到服务管理,选择你的服务,技术服务管理—产品信息管理

以短信邮件服务为例,展示如何配置isv控制台

# 效果测试

控制台配置完成后,转化为isv的身份进行测试。

前提:该服务已在AECORE上发布(服务发布联系:刘卓liuz-l@glodon.com)

测试路径:进入应用开发—选择任何一个应用—进入应用详情页—开通你的服务即进入控制台(以短息邮件服务为例)

  • 在线客服

  • 意见反馈