iframeクロスドメインシングルサインオン- FineReport Help Document

作成者：ayuan0625

編集回数：2次

最終更新：ayuan0625 于 2021-09-26

1. 説明

基幹システム中にFineReportとのシングルサインオンを実現するため、基幹システムへログインする同時にFineReportポータルへユーザIDとパスワードを送信して認証しなければならない。

クロスドメイン認証する時iframe方式認証とAjax認証方式があります、今回はiframeでの実現を紹介します。

2. 実現方法

１．基幹システムのログイン画面のJavascript中にFineReportポータルの権限認証URLをiframeの形で埋め込む、Javascriptのクロスドメイン問題を解決する。

２．iframeの中にログインイベントを実行しログイン画面への遷移を実現する。

注意：クロスドメインiframe方式で画面を埋め込むと下記のような設定を無効にする必要があります。

3. 事例

簡易なログイン画面を例としてiframeクロスドメインログインの実現を紹介します：

FineReport ポータルの認証アドレスは：

scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";

3.1 iframe 実現ステップ

ログインボタンのイベント設定：

function doSubmit(){     
    var username = document.getElementById("username").value; //ユーザーID・名を取得
    var password = document.getElementById("password").value;  //パスワードを取得
    var scr = document.createElement("iframe");      //iframeを作成    
    scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //認証URLをこのiframeに指定
    if (scr.attachEvent)
{       //ブラウザはIEなのかの判断  
           scr.attachEvent("onload", function(){                    //IEの場合すぐに実行
               window.location=" http://localhost:8075/webroot/decision"; //FineReportポータルへ遷移
           });  
        } else {  
           scr.onload = function(){              //他のブラウザの場合onloadをリロードする  
               /*指定の画面へ遷移する、index.jsp  
                var f = document.getElementById("login");  
                f.submit();  */
            window.location=" http://localhost:8075/webroot/decision"; //FineReportポータルへ遷移
        };  
     }  
   
 document.getElementsByTagName("head")[0].appendChild(scr);   //iframeをheadの中に埋め込む

上記のイベントを元システムのログインボタンに追加

3.2 完全なソースコード

<!DOCTYPE html>
<html>
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
  <script type="text/javascript">
    function doSubmit() {      
        var username = document.getElementById("username").value; //ユーザ・名を取得
        var password = document.getElementById("password").value;  //パスワードを取得
        var scr = document.createElement("iframe");      //iframeを作成    
        scr.src = "http://192.168.1.40:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //認証URLをこのiframeに指定
        if (scr.attachEvent)
      {       //ブラウザがIEなのかを判断  
               scr.attachEvent("onload", function(){                    //IEの場合すぐに実行
                   window.location="http://192.168.1.40:8075/webroot/decision"; //FineReportポータルへ遷移
               });  
            } else {  
               scr.onload = function(){              //ほかのブラウザの場合onloadイベントをリロード
                   /*指定の画面へ遷移、index.jsp  
                    var f = document.getElementById("login");  
                    f.submit();  */
                window.location="http://192.168.1.40:8075/webroot/decision"; //FineReportポータルへ遷移
            };  
         }  
       
     document.getElementsByTagName("head")[0].appendChild(scr);   //iframeをheadに埋め込む   
    }   
 </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>