首頁 >web前端 >html教學 >FineReport中自訂登入介面的方法

FineReport中自訂登入介面的方法

高洛峰原創: 2017-03-21 17:04:252555瀏覽

登入平台時，不希望使用FR預設的內建登入介面，想透過自訂登入介面實現登入操作，內建登入介面如下圖：

登入介面，取得到使用者名稱和密碼的值，傳送到報表系統，報表服務帶著這兩個參數存取認證位址進行認證。

自訂登入介面

#登入介面設定

#自訂html登入頁面：命名為login.html，並儲存在%FR_HOME%\WebReport下，程式碼如下：

<span style="font-family: &#39;Microsoft YaHei&#39;, 微软雅黑, SimHei, tahoma, arial, helvetica, sans-serif; font-size: 14px;"><html>    
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>    
<script type="text/javascript">    
function doSubmit() {    
    var username = FR.cjkEncode(document.getElementById("username").value); //获取输入的用户名    
    var password = FR.cjkEncode(document.getElementById("password").value);  //获取输入的参数    
jQuery.ajax({    
     url:"http://localhost: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") {  
window.location=data.url;//认证成功跳转页面，因为ajax不支持重定向所有需要跳转的设置  
                  //登录成功       
            } else if (data.status === "fail"){    
                 alert("用户名或密码错误");//登录失败（用户名或密码错误）    
            }    
     },    
     error:function(){    
           alert("超时或服务器其他错误");// 登录失败（超时或服务器其他错误）    
     }    
});  
}    
</script>    
</head>    
<body>    
<p>请登录</p>    
<form name="login" method="POST">    
    <p>    
        用户名:    
        <input id="username" type="text" />    
    </p>    
    <p>    
        密 码:    
        <input id="password" type="password" />    
    </p>    
    <input type="button" value="登录" onclick="doSubmit()"/>    
</form>    
</body>    
</html></span>

Dosubmit()是主要的邏輯判斷，實現的是將對應的值傳給報表服務的邏輯實作過程。

呼叫登入介面 FineReport中自訂登入介面的方法