Javascript Worklight将登录凭据传递到iframed服务器端内容
以下是场景： Worklight studio 6.2，带有Worklight服务器和Webseal身份验证领域 我正在开发一个混合应用程序，它需要登录（已经设置好并开始工作），然后推到一个包含服务器端内容的iframe（论坛）。我遵循了ibm worklight教程，了解了工作正常的身份验证处理程序 问题在于：在显示“我的身份验证”页面并用户输入其凭据后，登录将成功，但在iframe中会显示一个新的登录页面（网页）。所以基本上我需要将这些凭证推送到iframe以避免冗余 身份验证处理程序：Javascript Worklight将登录凭据传递到iframed服务器端内容,javascript,authentication,iframe,ibm-mobilefirst,worklight-security,Javascript,Authentication,Iframe,Ibm Mobilefirst,Worklight Security,以下是场景： Worklight studio 6.2，带有Worklight服务器和Webseal身份验证领域 我正在开发一个混合应用程序，它需要登录（已经设置好并开始工作），然后推到一个包含服务器端内容的iframe（论坛）。我遵循了ibm worklight教程，了解了工作正常的身份验证处理程序 问题在于：在显示“我的身份验证”页面并用户输入其凭据后，登录将成功，但在iframe中会显示一个新的登录页面（网页）。所以基本上我需要将这些凭证推送到iframe以避免冗余 身份验证处理程序： v
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);
}
);
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");
}
});
<!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>
函数wlCommonInit（）{
/*
*在需要连接到Worklight服务器之前，使用WL.Client.connect（）API。
*在与Worklight Server通信的任何其他WL.Client方法之前，只应调用此API一次。
*不要忘记为WL.Client.connect（）指定并实现onSuccess和onFailure回调函数，例如：
*
*WL.Client.connect({
*onSuccess:OnConnect成功，
*onFailure:onConnectFailure
* });
*
*/
//通用初始化代码在这里
WL.Client.connect（）；
}
$（文档）。在（“页面创建”，“论坛”，函数（）上）{
if（！$（“#forumFrame”）.长度）{
$（“”）。附加到（“#包装”）；
}
});
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");
}
});
<!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>
西吉洛论坛
window.$=window.jQuery=WLJQ；
登录
用户名
密码