1. 説明
１．Ajaxとは“Asynchronous Javascript And XML”（非同期 JavaScript と XML）です。バックグラウンドで少な目なデータ交換により、画面を非同期更新することができます。
※全画面ではなく、一部の画面のみを更新する。
２．iframe方式とAjax方式の区別：
２－１．iframe方式とAjax 方式は両方クロスドメインシングルサインオンを実現出来ます。
２－２．Ajaxは非同期のSSOを実現出来、そして認証の結果を処理することができます。 ※ログインタイムアウトなど
２－３．iframe方式は非同期のSSOを実現出来ません、認証の結果を処理することもできません。
2. 実現
Ajax ログイン方式は自然にクロスドメインをサポートする。直接にAjaxでユーザIDとパスワードを帳票サーバーへ送信し認証すれば実現できます。
3. 事例
簡易なログイン画面を作成しajaxの実現方法を紹介します。
3.1 Ajax 実現
1）ログインボタンにイベント設定
ユーザが画面上にユーザIDとパスワードを入力そしてログインボタンをクリックる時、 doSubmit() イベントを実行する。このイベントはAjax方式でユーザIDとパスワードを帳票サーバーへ送信し認証を行う、認証成功する場合FineReportポータル画面へ遷移する。
ソースコード：
function doSubmit() {
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
if (username === "") {
window.alert("ユーザIDを入力してください");
return false;
}
if (password === "") {
window.alert("パスワードを入力してください");
return false;
}
var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
jQuery.ajax({
url: url,//シングルサインオンの帳票サーバーURL
timeout: 5000,//タイムアウト時間（単位：ミリ秒）
dataType:"jsonp",//クロスドメインjsonp方式
jsonp:"callback",
success: function (res) {
console.log(res);
if (res.errorCode) {
window.alert(res.errorMsg);
}else {
// tokenを保存し、FineReportポータルへ遷移
window.location.href = "http://localhost:8080/webroot/decision";
}
},
error: function () {
alert("タイムアウト或いはその他のエラー");
}
});
}
注意１：Ajaxを利用するため、jquery.jsを参照する必要があります。
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
注意２：Win8の場合もしログイン異常が発生したら、AjaxでユーザIDとパスワードを送信する時エンコードすれば改善できます。
※例： fine_password":encodeURIComponent(password)。
3.2 完全なスースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function doSubmit() {
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
if (username === "") {
window.alert("ユーザIDを入力してください");
return false;
}
if (password === "") {
window.alert("パスワードを入力してください");
return false;
}
var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
jQuery.ajax({
url: url,//シングルサインオンの帳票サーバーURL
timeout: 5000,//タイムアウト時間（単位：ミリ秒）
dataType:"jsonp",//クロスドメインはjsonp方式
jsonp:"callback",
success: function (res) {
console.log(res);
if (res.errorCode) {
window.alert(res.errorMsg);
}else {
// tokenを保存しFineReportポータルへ遷移
window.location.href = "http://localhost:8080/webroot/decision";
}
},
error: function () {
alert("タイムアウト或いはその他のエラー");// ログイン失敗
}
});
}
</script>
</head>
<body>
<p>ログイン画面</p>
<form id="login" name="login" method="POST" action="">
<p>ユーザID:<input id="username" type="text" name="username"/></p>
<p>パスワード:<input id="password" type="password" name="password"/></p>
<input type="button" value="ログイン" onClick="doSubmit()"/>
</form>
</body>
</html>
4. ログアウト
基幹システムをログアウトする同時に、FineReportポータルをログアウトする時下記のような方法で実現出来ます。
jQuery.ajax({
url:"http://localhost:8075/webroot/decision/logout/cross/domain",//シングルサインオンの帳票サーバー
dataType:"jsonp",//クロスドメインjsonp方式
jsonp:"callback",
timeout:5000,//タイムアウト時間（単位：ミリ秒）
success:function(data) {
if (data.status === "success") {
//ログアウト成功
}
},
error:function(){
// ログアウト失敗（タイムアウト或いはその他のエラー）
}
});
5. 安全性
URLでユーザIDとパスワードで検証する時、不法侵入で盗聴されるリスクがあります。
下記の方法で改善できます：
１．HTTPSを構築
２．パスワード暗号化送信（※必要なかたは弊社担当者と連絡ください）
6. 注意事項
クロスドメインシングルサインオンの場合、下記の設定を無効にする必要があります。
前：iframeクロスドメインシングルサインオン