javascript - Worklight 将登录凭据传递给 iframed 服务器端内容

标签 javascript authentication iframe ibm-mobilefirst worklight-security

这是场景:

带有 Worklight Server 和 Webseal 身份验证领域的 Worklight studio 6.2。

我正在开发一个混合应用程序,需要登录(已经设置并运行),然后推送到其中包含服务器端内容的 iframe(论坛)。我按照 ibm worklight 教程获得了运行良好的身份验证处理程序。

问题是:在显示我的身份验证页面并且用户输入他/她的凭据后,登录将成功,但在 iframe 中会显示一个新的登录页面(网页)。所以基本上我需要将这些凭据推送到 iframe 以避免冗余。

身份验证处理程序:

var REALM_HTTPHEADER = 'HeaderAuthRealm';
var LOGIN_FORM_TAM = 'pkmslogin.form';
function showLoginScreen() {

$.mobile.changePage("#authPage");
}
function showMainScreen() {
$.mobile.changePage("#forum");
}
var websealRealmChallengeHandler =
WL.Client.createChallengeHandler(REALM_HTTPHEADER);
var lastRequestURL;
websealRealmChallengeHandler.isCustomResponse = function(response) {
//A normal login form has been returned.
var findLoginForm = response.responseText.search("pkmslogin.form");
if (findLoginForm >= 0) {
lastRequestURL = response.request.url;
return true;
}
//Need to also check for errors and handle as appropriate
//This response is a worklight server response, handle it normally
return false;
};
websealRealmChallengeHandler.handleChallenge = function(response) {
showLoginScreen();
};
websealRealmChallengeHandler.handleFailure = function(response) {
console.log("Error during WebSEAL authentication.");
};


websealRealmChallengeHandler.submitLoginFormCallback = function(response) {
var isCustom = websealRealmChallengeHandler.isCustomResponse(response);
if (isCustom) {
websealRealmChallengeHandler.handleChallenge(response);
}
else {
//hide the login screen, we are logged in
showMainScreen();
websealRealmChallengeHandler.submitSuccess();
}
};
$("#loginButton").click(function(){
var reqURL = "/../../../" + LOGIN_FORM_TAM;
var options = {method: "POST"};
options.parameters = {
Username : $("#username").val(),
password : $("#password").val(),
"login-form-type" : "pwd"
};
options.headers = {};
websealRealmChallengeHandler.submitLoginForm(reqURL, options,
websealRealmChallengeHandler.submitLoginFormCallback);
}
);

ma​​in.js:

function wlCommonInit(){
    /*
     * Use of WL.Client.connect() API before any connectivity to a Worklight Server is required. 
     * This API should be called only once, before any other WL.Client methods that communicate with the Worklight Server.
     * Don't forget to specify and implement onSuccess and onFailure callback functions for WL.Client.connect(), e.g:
     *    
     *    WL.Client.connect({
     *          onSuccess: onConnectSuccess,
     *          onFailure: onConnectFailure
     *    });
     *     
     */

    // Common initialization code goes here
    WL.Client.connect();


}

$(document).on("pagecreate", "#forum", function() {
    if (!$("#forumFrame").length ) {
         $("<iframe id=\"forumFrame\" src='https://mysite.something.it/forum/' style='height: 100%; width: 100%' seamless/>").appendTo("#wrapper");

    }
});

index.html:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>forum_sigillo</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
            -->
            <link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery-1.11.1.js"></script>
        </head>
        <body style="display: none;">

            <div data-role="page" id="forum">


        <div id="wrapper">


        </div>

        </div>

   <div data-role="page" id="authPage">

    <div data-role="header" id="header1" data-position="fixed" data-tap="toggle">
                <h3 style="font-family: Verdana; text-align: center; color: white">LOGIN</h3>
            </div>

<div data-role="content" id="loginContent" style="padding: 0px; padding-top: 15px;">



            <label for="username" style="color: white; text-align: center">Username</label><input type="text" name="text"
                id="username" style="text-align:center; width: 100%">

             <label for="password" style="color: white; text-align: center">Password</label><input type="password"
                name="text0" id="password" style="text-align:center; width: 100%"> <br>

                 <a href="#" data-role="button" id="loginButton" style="text-align: center; color: white">Login</a>

        </div>

</div>
            <script src="js/AuthenticationHandler.js"></script>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
            <script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
        </body>
</html>

最佳答案

我倾向于同意第二个答案中所写的内容,此处:Sharing global javascript variable of a page with an iframe within that page

替代方案是建议的 - 跨域消息传递:http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

但据我所知,Worklight 应用程序从未尝试过这样做。

关于javascript - Worklight 将登录凭据传递给 iframed 服务器端内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25081204/

相关文章:

iframe - 当我更改 GWT 应用程序的 html 文件中的 document.domain 属性时,出现空白页

javascript - 跨域iframe通信

javascript - 在函数中使用 Knockout Push 会返回错误

apache - 如何使基本身份验证排除重写的 URL

python - 属性错误: 'OAuthRemoteApp' object has no attribute 'authorized_response'

java - 如何自动化基本身份验证 chrome 警报

来自自定义 jQuery AJAX 函数的 Javascript 回调

javascript - 访问 Javascript ES6 类中声明的函数(ES2015?ES16?)

javascript - 通过 Google App Script 调用 AWS Lambda 函数

html - Bootstrap 3 - 用 Iframe 100% 填充一个区域