HTML5 端单点登录

  • 文档创建者:doreen0813
  • 编辑次数:7次
  • 最近更新:Scyalcire 于 2020-10-30
  • 1. 概述

    1.1 问题描述

    用户在 HTML5 端预览 FineBI 工程时,默认需要输入用户名密码,如何实现单点登录呢?

    1.2 实现思路

    本文提供两种方法,调用登录接口实现 HTML5 端单点登录:

    1)Ajax 跨域单点登录

    2)iframe 跨域单点登录

    注:实现  HTML5 端单点登录,需要先安装 HTML5 移动端展现插件,详情请参见:HTML5 端访问仪表板/工程

    2. AJAX 跨域单点登录

    2.1 新建 login.html

    在 FineBI 工程%BI_HOME%/webapps/webroot/目录下,新建login.html文件,具体代码如下:

    注1:代码中的 URL、用户名、密码需要根据实际使用情况进行修改。IP 不可写 localhost。

    注2:HTML5 移动端展现插件版本为 V10.2.0 之前,移动端登录需要带__device__=iPhone&terminal=H5参数

            URL 写法为:http://IP:端口号/webroot/decision/login/cross/domain?__device__=iPhone&terminal=H5

            若未注册移动决策平台功能点,单点登录时将报错11100016,删除__device__=iPhone&terminal=H5参数即可

    <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({
                //h5插件版本为10.2.0之前,移动端登录需要带__device__=iPhone&terminal=H5参数
    //url: 'http://IP:端口号/webroot/decision/login/cross/domain?__device__=iPhone&terminal=H5', 
    //h5插件版本为10.2.0之后,移动端登录无需带__device__=iPhone&terminal=H5参数
    //若未注册移动决策平台功能点,单点登录时报错11100016,删除__device__=iPhone&terminal=H5参数即可
                url: 'http://IP:端口号/webroot/decision/login/cross/domain', 
                data: {'fine_username': '用户名', 'fine_password': '密码', 'validity': -1},
                timeout: 5000,
                dataType: 'jsonp', 
                jsonp:"callback", 
                success: function (res) { 
                    // alert('登录成功'); 
                    var token = res.accessToken;
                    window.location.href = "http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token; 
                }, 
                error: function () { 
                    alert('登录失败'); 
                } 
            });
             
      }
        doSubmit();
     </script>
    </head>
    </html>

    2.2 HTML5 端预览

    HTML5 端输入:http://IP:端口号/webroot/login.html

    1)单点登录成功时,返回工程目录/首页,如下图所示:

    1.gif

    2)单点登录失败时,返回提示「登录失败」,如下图所示:

    222

    3. iframe 跨域单点登录

    3.1 新建 login.html

    在 FineBI 工程%BI_HOME%/webapps/webroot/目录下,新建login.html文件,具体代码如下:

    注1:代码中的 URL、用户名、密码需要根据实际使用情况进行修改。IP 不可写 localhost。

    注2:HTML5 移动端展现插件版本为 V10.2.0 之前,移动端登录需要带__device__=iPhone&terminal=H5参数

            URL 写法为:http://IP:端口号/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=admin&fine_password=123456&validity=-1&callback=callback

            若未注册移动决策平台功能点,单点登录时将报错11100016,删除__device__=iPhone&terminal=H5参数即可

    <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");
            //将BI工程验证用户名密码的地址指向此iframe 
    //h5插件版本为10.2.0之前,移动端登录需要带__device__=iPhone&terminal=H5参数
    //scr.src = "http://IP:端口号/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=用户名&fine_password=密码&validity=-1&callback=callback";
    //h5插件版本为10.2.0之后,移动端登录无需带__device__=iPhone&terminal=H5参数
    //若未注册移动决策平台功能点,单点登录时报错11100016,删除__device__=iPhone&terminal=H5参数即可
            scr.src = "http://IP:端口号/webroot/decision/login/cross/domain?fine_username=用户名&fine_password=密码&validity=-1&callback=callback"; 
            scr.id = "login";
            var token = "";
             
             
            if (scr.attachEvent) 
                { //判断是否为ie浏览器
                  // alert("ie");
                  scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行
                    //原则上下面token不需要传,现在临时获取登录返回的token拼接到跳转url的后面
                    token = document.getElementById("login").contentWindow.document.body.innerHTML;
                    token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
                    window.location="http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token; //直接跳转到数据决策系统
                  });
                } else {
                    // alert("not ie");  
                    scr.onload = function(){              //其他浏览器则重新加载onload事件,进行onload以获得单点服务器的通过    
                     
                      //原则上下面token不需要传,现在临时获取登录返回的token拼接到跳转url的后面
                      token = document.getElementById("login").contentWindow.document.body.innerHTML;
                      token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
                      window.location="http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token; //直接跳转到数据决策系统
                };   
             }   
              
         document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中
             
      }
        doSubmit();
     </script>
    </head>
    </html>

    3.2 HTML5 端预览

    HTML5 端输入:http://IP:端口号/webroot/login.html,单点登录成功时,返回工程目录/首页,如下图所示:

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

    1.gif

    附件列表


    主题: 移动端
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-127-81526