1. 概述
1.1 問題描述
用戶在 HTML5 端預覽報表系統時，默認需要輸入用戶名密碼，如何實現單點登錄呢？
1.2 實現思路
本文提供兩種方法，調用登錄接口實現 HTML5 端單點登錄：
1）Ajax 跨域單點登錄
2）iframe 跨域單點登錄
注：實現 HTML5 端單點登錄，需要先安裝 HTML5 移動端展現插件，詳情請參見：HTML5 端訪問報表/工程
2. AJAX 跨域單點登錄
2.1 新建 login.html
在報表工程%FR_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）單點登錄成功時，返回工程目錄/首頁，如下圖所示：
2）單點登錄失敗時，返回提示「登錄失敗」，如下圖所示：
3. iframe 跨域單點登錄
3.1 新建 login.html
在報表工程%FR_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");
//将報表驗證用戶名密碼的地址指向此iframe
//h5插件版本爲10.2.0之前,移動端登錄需要帶__device__=iPhone&terminal=H5參數
//scr.src = "http://IP:端口号/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=admin&fine_password=123456&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不需要傳，現在有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://IP:端口号/webroot/decision/url/mobile?fine_auth_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://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」高級設置中的「點擊劫持攻擊防護功能」，詳情請參見：安全防護。
