历史版本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目录，当单点登录失败时，返回登录界面，如下图：