HTML5默认登录页面

编辑
  • 文档创建者:susie
  • 浏览次数:8800次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-06
  • 1. 问题说明

    (1)开发测试 H5 报表时都是通过在手机浏览器打开 URL 进行测试,这个时候调用 fs,打开的仍是 PC 上面的登录界面,非常难编辑;

    (2)正式使用 H5 报表时通常会做单点登录,如果单点登录没有成功,现在是直接返回空白页面,后台报 null 的错误,非常不友好,客户会很迷茫,不知道单点登录是否成功了。


    2. 解决方案

    (1)实现移动端的登录界面(Phone&Pad)

    (2)移动端浏览器调用fs地址或者是开了权限访问单张 H5 模板的时候,首先打开 H5 登录界面,提供输入用户名和密码,登录成功后返回 H5 的目录或者是 H5 报表页面

    (3)如果单点登录失败,即用户没有登录成功,返回登录界面


    3. 操作步骤

    3.1 安装 H5 插件

    详细查看 新移动端 HTML5 方式预览报表插件


    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 登录界面会继承平台标题和 logo 样式的设置,如下图:



    4. 10.0 移动端集成 H5 实现单点登录

    10.0 版本中 H5 采用登录接口进行登录时需要申明为终端,第三方移动平台集成 10.0 的 HTML5,登录接口的调用需要做一些调整;


    4.1 AJAX 跨域单点登录

    这里示例默认填上用户名和密码,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?__deviceType__=iPhone&terminal=H5', 
                data: {'fine_username': 'a', 'fine_password': 'aa', '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/webroot/login.html,当单点登录成功时,返回 H5 目录,如下图:



    当单点登录失败时,返回登录失败,如下图:



    4.2 iframe 跨域单点登录

    注:如果使用跨域 iframe 的方式嵌入报表,请关闭【Security Headers】高级设置中的【点击劫持攻击防护功能】,详情参见:安全防护

    <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() {
            var scr = document.createElement("iframe");
            //将报表验证用户名密码的地址指向此iframe 
            scr.src = "http://192.168.1.109:8075/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=admin&fine_password=123456&validity=-1&callback=callback"; 
            scr.id = "login";
            var token = "";
             
             
            if (scr.attachEvent) 
                { //判断是否为ie浏览器
                  // alert("ie");
                  scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行
                    //原则上下面token不需要传,现在有bug,临时获取登录返回的token拼接到跳转url的后面
                    token = document.getElementById("login").contentWindow.document.body.innerHTML;
                    token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
                    window.location="http://192.168.1.109:8075/webroot/decision/url/mobile?token=" + token; //直接跳转到数据决策系统
                  });
                } else {
                    // alert("not ie");  
                    scr.onload = function(){              //其他浏览器则重新加载onload事件,进行onload以获得单点服务器的通过    
                     
                      //原则上下面token不需要传,现在有bug,临时获取登录返回的token拼接到跳转url的后面
                      token = document.getElementById("login").contentWindow.document.body.innerHTML;
                      token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
                      window.location="http://192.168.1.109:8075/webroot/decision/url/mobile?token=" + token; //直接跳转到数据决策系统
                };   
             }   
              
         document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中
             
      }
        doSubmit();
     </script>
    </head>
    </html>

    注:这里的 URL、用户名和密码根据实际工程进行修改,单点登录详细可以查看 iframe 跨域单点登录


    关键字:H5 单点登录、移动端单点登录

    附件列表


    主题: 移动端
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]