1. 概述
1.1 問題描述
使用者在 HTML5 端預覽報表系統時，預設需要輸入帳號密碼，如何實現單點登入呢？
1.2 實現思路
本文提供兩種方法，呼叫登入API實現 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;
//登入成功後不用再帶token參數
window.location.href = "http://IP:埠號/webroot/decision/url/mobile";
},
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」進階設定中的「點選劫持攻擊防護功能」，詳情請參見：安全防護。
