历史版本6 :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登录界面
移动端浏览器打开fs地址时,跳转h5登录界面,如下图:
输入用户名和密码登录数据决策系统:
3.3 h5登录界面设置
登录fs,点击管理系统>外观配置>样式,h5登录界面会继承平台标题和Login样式的设置,,如下图:
3.4 单点登录失败时,返回h5登录界面
如果单点登录失败,即用户没有登录成功,返回登录界面,这里示例默认填上用户名和密码,login.html具体代码如下:
<html>
<head>
<script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
var username = "a";
var password = "b";
jQuery.ajax({
url:"http://192.168.101.226:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器
dataType:"jsonp",//跨域采用jsonp方式
data:{"fr_username":username,"fr_password":password},
jsonp:"callback",
timeout:5000,//超时时间(单位:毫秒)
success:function(data) {
if (data.status === "success") {
//alert("success"); //登录成功
window.location=data.url;//登录成功,跳转到报表目录
}
else if (data.status === "fail"){
alert("fail");//登录失败(用户名或密码错误)
}
},
error:function(){
alert("error"); // 登录失败(超时或服务器其他错误)
}
});
</script>
</head>
<body>
</body>
</html>
注:这里的url、用户名和密码根据实际工程进行修改,单点登录详细可以查看ajax跨域异步单点登录
手机浏览器打开比如http://192.168.101.226:8075/WebReport/login.html,当单点登录成功时,返回h5目录,当单点登录失败时,返回登录界面,如下图: