历史版本9 :HTML5单点登录 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题说明编辑
(1)开发测试h5报表时都是通过在手机浏览器打开url进行测试,这个时候调用fs,打开的仍是pc上面的登录界面,非常难编辑;
(2)正式使用h5报表时通常会做单点登录,如果单点登录没有成功,现在是直接返回空白页面,后台报null的错误,非常不友好,客户会很迷茫,不知道单点登录是否成功了。
2. 解决方案编辑
(1)实现移动端的登录界面(phone&pad)
(2)移动端浏览器调用fs地址或者是开了权限访问单张h5模板的时候,首先打开h5登录界面,提供输入用户名和密码,登录成功后返回h5的目录或者是h5报表页面
(3)如果单点登录失败,即用户没有登录成功,返回登录界面
3. 操作步骤编辑
3.1 安装h5插件
详细查看移动端h5插件
3.2 h5登录界面
10.0中,H5主页链接为:http://ip:端口号/webroot/decision/url/mobile,例如:http://192.168.1.156:8075/webroot/decision/url/mobile
移动端浏览器输入链接,跳转h5登录界面,输入用户名和密码登录数据决策系统,如下图:
3.3 h5登录界面设置
登录fs,点击管理系统>外观配置>样式,h5登录界面会继承平台标题和Login样式的设置,,如下图:
3.4 单点登录失败时,返回h5登录界面
如果单点登录失败,即用户没有登录成功,返回登录界面,这里示例默认填上用户名和密码,login.html具体代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function doSubmit() {
/*-------------------AJAX方式-------------------*/
jQuery.ajax({
//移动端登录需要带__device__=iPhone&terminal=H5
url: 'http://192.168.1.156:8075/webroot/decision/login/cross/domain?__device__=iPhone&terminal=H5',
data: {'fine_username': 'a', 'fine_password': 'a', 'validity': -1},
timeout: 5000,
dataType: 'jsonp',
jsonp:"callback",
success: function (res) {
// alert('登录成功');
var token = res.accessToken;
// window.location.href = "http://192.168.2.235:8075/webroot/decision/url/mobile"
// 原则上登录成功后不用再带token参数,当前有bug正在修复
window.location.href = "http://192.168.1.156:8075/webroot/decision/url/mobile?token=" + token;
},
error: function () {
alert('登录失败');
}
});
}
doSubmit();
</script>
</head>
</html>
注:这里的url、用户名和密码根据实际工程进行修改,单点登录详细可以查看ajax跨域异步单点登录
将login保存到%FR_HOME%/webapps/webroot/下。
手机浏览器打开比如http://192.168.1.156:8075/WebReport/login.html,当单点登录成功时,返回h5目录,如下图:
当单点登录失败时,返回登录失败,如下图: