创建免登陆的公开网页

编辑
文档创建者:1311046186 (书童 )     浏览次数:1004次     编辑次数:3次     最近更新:doreen0813 于 2017-09-12     

目录:

1、描述编辑

BI模版像FineReport的cpt一样不设置访问权限,直接访问链接地址无需登录就可以看到,比如有些模版是可以挂到其他系统中公开展示。

2、创建免登陆的公开网页原理编辑

是利用一种特殊的单点登录。单点登录原理和实现方法可见于单点登录

区别就在于需要使用一个用户名username和密码password ,这里的用户名和密码需要在FineBI里存在,并有相应的权限。

这里使用ajax方式的单点登录,ajax方式是通过在OA系统登录界面上添加ajax事件来完成传递'username'、'password'到BI进行登录验证。用户通过ajax将写好的用户名密码发送到BI系统进行验证,并且在验证成功时,触发html中的表单提交事件,实现对BI中要用的模版进行访问。由于使用了ajax,需要引入jquery.js而FR的finereport.js中包含了jquery.js,所以只需要在head标签中引入finereport.js即可,无需再引入jquery.js。代码如下:

<script type="text/javascript" src="http://localhost:37799/WebReport/ReportServer?op=emb&resource=finereport.js"></script> 
 <script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"> </script>
对用户名和密码赋予确定的值,并指定要跳转的URL(这个URL 可以通过查看表的框架源代码获取)代码如下:
var username ="test"; 
var password ="test"; 
var switch_url="http://localhost:37799/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&show=_bi_show_&createBy=-999" 

添加ajex事件,设置要传递到的服务器的地址,设置跨域方式;使用date函数将获取的usernamepassword赋给BI系统的用户名及密码的参数(BI4.0的用户名及密码的参数是'fr_username''fr_password');callback回调函数将参数返回后台并返回判断结果即验证登录,timeout超时时间定为5000ms;返回的结果验证成功:如果BI系统读取的"username"''password"在后台验证通过,即进行跳转(可跳到index首页,也可直接指定到op=fs平台上);如果BI系统中未验证成功则显示“fail”;返回的结果未验证成功即"username"''password"未传递到BI服务器上就显示“error”。其代码如下:

jQuery.ajax({
       url:"http://localhost:37799/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"); //登录成功
            // document.getElementById("login").submit(); //登录成功提交表单,跳转到index.jsp这个登录成功页面 
            data.url=switch_url //赋值跳转的url,上面var生成,方便管理 
            window.location=data.url;//登录成功,直接跳转到平台系统页面
         } else if (data.status === "fail"){
                      alert("用户名密码错误!!!"); //登录失败(用户名或密码错误)
          }
   }, 
   error:function(){ 
            alert("超时或服务器其他错误!!!");// 登录失败(超时或服务器其他错误)
   } 
 });  

注:url为单点登录的BI的服务器的地址,其中“localhost37799”应换为对应的ip地址及端口号。

注:由上述的验证可知,如果设置完毕验证失败:“fail”则表示已传递到BI服务器,但是BI上没验证成功,则要检查BI上是否有这个用户,这个用户的密码是否与传递过来的一致或同步的是明文还是密文检查加密方式;若“error”则是没有传递到服务器上,可能是传递的服务器url不正确或者未传递。

设置button触发loginFR()

loginFR()函数写完后,在登录页面上设置点击buttom时触发这个函数即可。其代码如下:

<input id="lalala" type="button" name="lalala" onclick="loginFR();" value ="面积图"/>

到此ajex的单点登录方式讲述完毕。其完整代码如下:当然具体实施时要根据实际情况进行相应的设置,这里只是展示一下做成的简单效果。

代码如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; list-style: none; font-size: 16px; } body{ position: relative; } .actionButtons{ border:1px solid red; width:100px; height:50px; line-height: 50px; position:fixed; margin:auto; left:0; right:0; top:200px; bottom:0; } .actionButtons input{ display: inline-block; width:100%; height:100%; font-size: 20px; font-family: '微软雅黑', sans-serif; } </style> <script type="text/javascript" src="http://localhost:37799/WebReport/ReportServer?op=emb&resource=finereport.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"> </script> <!-- 引入jQuery --> <script type="text/javascript"> function loginFR() { //console.log(document.getElementById("username").value);获取用户的输入名 //console.log(document.getElementById("username").value); 获取输入的参数 var username ="test"; var password ="test"; var switch_url="http://localhost:37799/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&show=_bi_show_&createBy=-999" //var f = document.getElementById("loginForm"); jQuery.ajax({ url:"http://localhost:37799/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"); //登录成功 // document.getElementById("login").submit(); //登录成功提交表单,跳转到index.jsp这个登录成功页面 data.url=switch_url //赋值跳转的url,上面var生成,方便管理 window.location=data.url;//登录成功,直接跳转到平台系统页面 } else if (data.status === "fail"){ alert("用户名密码错误!!!"); //登录失败(用户名或密码错误) } }, error:function(){ alert("超时或服务器其他错误!!!");// 登录失败(超时或服务器其他错误) } }); } </script> <body> <div class="actionButtons"> <input id="lalala" type="button" name="lalala" onclick="loginFR();" value ="面积图"/> </div> </body> </html>

展示效果如下:


222

222

222

附件列表


主题: 部署集成
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

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

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: