移动端Html5单点登录

编辑
  • 文档创建者:doreen0813
  • 浏览次数:275次
  • 编辑次数:5次
  • 最近更新:doreen0813 于 2019-04-29
  • 1、描述

    问题说明:正式使用移动端h5时通常会做单点登录,如果单点登录没有成功,现在是直接返回空白页面,后台报null的错误,非常不友好,客户会很迷茫,不知道单点登录是否成功了;

    解决方案:FineBI提供了第三方移动平台集成移动端Html5的方法,实现移动端的单点登录;且单点登录失败,用户没有登录成功,则直接返回登录界面;

    2、移动端集成H5实现单点登录

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

    2.1 ajax跨域单点登录

    1. 这里示例默认填上用户名和密码,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://mobile.finebi.com:37700/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5', data: {'fine_username': 'demo', 'fine_password': 'demo', 'validity': -1}, timeout: 5000, dataType: 'jsonp', jsonp:"callback", success: function (res) { // alert('登录成功'); var token = res.accessToken; // window.location.href = "http://mobile.finebi.com:37700/webroot/decision/url/mobile" // 原则上登录成功后不用再带token参数,当前有bug正在修复 window.location.href = "http://mobile.finebi.com:37700/webroot/decision/url/mobile?token=" + token; }, error: function () { alert('登录失败'); } }); } doSubmit(); </script> </head> </html>

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

    2. 将login保存到%FineBI%/webapps/webroot/下,如下图:

        

    3. 手机浏览器打开比如http://mobile.finebi.com:37700/webroot/login.html,当单点登录成功时,返回h5目录,如下图:

        

    4. 当单点登录失败时,返回登录失败。

    2.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://demo.finebi.com:37700/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=demo&fine_password=demo&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://demo.finebi.com:37700/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://demo.finebi.com:37700/webroot/decision/url/mobile?token=" + token; //直接跳转到数据决策系统 }; } document.getElementsByTagName("head")[0].appendChild(scr); //将iframe标签嵌入到head中 } doSubmit(); </script> </head> </html>

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



    附件列表


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

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

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