HTML5默认登录页面

编辑
文档创建者:susie (58814 )     浏览次数:4259次     编辑次数:6次     最近更新:susie 于 2017-11-11     

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登录界面,如下图:
222
输入用户名和密码登录数据决策系统:

222

 

3.3 h5登录界面设置

登录fs,点击管理系统>外观配置>样式,h5登录界面会继承平台标题和Login样式的设置,,如下图:
222

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目录,当单点登录失败时,返回登录界面,如下图:
222

附件列表


主题: 移动端
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?