This example shows how to embed aXes in an iFrame using messages and login automatically without passing username and passwords in the URL.
The setup is following.
- 1 page (attached test.html) will present a username and password edit boxes to the user. On this page there is an iframe which will hold the aXes terminal sessions. This page can reside on any server.
- 1 custom aXes login page to process this login. (attached cust_index.html). This file must be added in the <axes_root>/ts/ts2.
Test.html
In the code below, replace myserver.local with your server.
Replace in the same URL "testcases" with your project name.
The postLogin() function posts the message with the login data to the iframe (Custom aXes login screen)
The login function creates an iframe and loads the aXes custom login page.
Code: Select all
<html>
<head>
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;overflow:hidden;}
div.header{
height:7%;
}
iframe{
display:none;
margin-left: 125px;
width: 93%;
height: 92%;
}
/* Style the tab */
div.tab {
border: 1px solid #ccc;
background-color: #f1f1f1;
position:absolute;
width: 120px;
height: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: #648a93;
color: white;
padding: 12px 5px 12px 5px;
width: 100%;
border: 1px solid #ccc;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #aed0ea;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
padding: 0px 0px;
border: 2px solid white;
position:absolute;
left:10%;
width:90%;
height:90%;
}
div.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 5px;
background-color: #00305e;
text-align: center;
color:white;
position:fixed;
bottom:0;
}
</style>
</head>
<body>
<div id="loginDIV" class="login" align="center" style="position: absolute; top:30%; left:45%;">
<input id=Username placeholder="Username"></input>
<br><br/>
<input id=Password type="password" placeholder="Password" onkeypress="if (event.keyCode == 13){login()}"></input>
<br><br/>
<button id=login onclick="login()" style="background-color: #778899;color: white;width:173;border: 1px solid #ccc;text-align: center;cursor: pointer;transition: 0.3s;font-size: 17px;">Login</button>
</div>
<div id="wrapper">
<div class="tab" id="tabDIV" style="display: none;">
</div>
</div>
<footer> <div id="footer" class="footer">© 2018 Lansa Pty. Ltd. All rights reserved.</div> </footer>
</body>
<script>
var user = "";
var password = "";
// Main page:
window.onmessage = function(event) {
alert(event.data);
};
function postLogin(e) {
//alert("Frame loaded.");
window.setTimeout(function()
{
var iframe = document.getElementById('homeFrame');
var data = { cmd: "login", loginUser: user, loginPwd: password}
iframe.contentWindow.postMessage(data,'*');
}, 5000);
}
function login() {
var axesFrame = document.createElement("IFRAME");
user = document.getElementById("Username").value;
password = document.getElementById("Password").value;
var logDIV = document.getElementById("loginDIV");
var tDIV = document.getElementById("tabDIV");
var fDIV = document.getElementById("wrapper");
if(user.length < 1 && password.length < 1){
alert('invalid login');
return;
}
logDIV.style.display='none';
tDIV.style.display = 'block';
axesFrame.id = "axes_iframe"
axesFrame.style.display = 'block';
axesFrame.setAttribute("ID", "homeFrame");
axesFrame.setAttribute("height", "100%");
axesFrame.setAttribute("width", "100%");
axesFrame.setAttribute("float", "right");
axesFrame.setAttribute("allowtransparency", true);
axesFrame.style.background = "#e1eaf1";
axesFrame.onload = postLogin;
axesFrame.src = "http://myserver.local/ts/ts2/cust_index.html?definitionSet=testcases&lang=en";
fDIV.appendChild(axesFrame);
}
</script>
</html>
The interesting code ins this page is the window.onmessage = function(event). The event receives the data posted by the caller and fills the username and password, and then clicks the login button.
Code: Select all
<!DOCTYPE html>
<!--
Copyright (C) LANSA Group. All rights reserved
-->
<!--[if lt IE 8 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="http://localhost"/>
<meta name="robots" content="noindex, nofollow"/>
<title>aXes TS</title>
<script type="text/javascript" src="/ts/axbuildinfo.js"></script>
<link id="_axJQueryBaseTheme_LINK" type="text/css" href="css/jQtheme_smoothness/jquery-ui.min.css" rel="stylesheet">
<link id="_axJQueryTheme_LINK" type="text/css" href="css/jQtheme_smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script type="text/javascript">
AXESBUILD.writeCSSTags(document, ["css/layout.css"]);
</script>
<link id="axCustomPageCSS" type="text/css" href="css/blank.css" rel="stylesheet" />
<link id="axThemeCSS" type="text/css" href="css/blank.css" rel="stylesheet" />
<!-- for custom font -->
<link type="text/css" href="css/udc.css" rel="stylesheet" />
<!--[if lt IE 7]>
<link type="text/css" href="css/layout-ie6.css" rel="stylesheet" />
<![endif]-->
</head>
<body class="default">
<div id="contentWrapper" class="ui-helper-hidden" style="min-height: 120px; min-width: 120px">
<div id="terminalOuter" class="ui-layout-center">
<div class="header">
<span id="ax-terminal-zoomcontrols" class="ui-widget">
<span id="ax-terminal-zoomout" class="ui-icon ui-icon-zoomout ui-state-default ui-corner-all" style="float:right;"></span>
<label class="dd-custom-arrow ui-widget-content" style="float:right; padding-right:2px; background:none; border:none; margin-left:2px;">
<select id="ax-terminal-setzoom" hideFocus="true" style="padding-right:13px;" class="ui-widget-content noarrow-dropdown">
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1.0">100%</option>
<option value="1.5">150%</option>
<option value="fit">- Fit -</option>
<option value="auto">- Auto -</option>
</select>
</label>
<span id="ax-terminal-zoomin" class="ui-icon ui-icon-zoomin ui-state-default ui-corner-all" style="float:right;"></span>
</span>
<span id="btnToggleWest"></span>
<ul id="ax-mainmenu" class="ax-menu ui-widget">
</ul>
</div>
<div id="ax-dev-Toolbar" class="ui-widget-header" style="min-height: 10px; min-width: 10px">
<div id="ax-dev-Toolbar-extension" class="ui-widget-header ui-corner-all">
<button type="button" id="ax-dev-Toolbarbtn0" ax_txtscope="Dev" ax_txt="ExtensionsTab.AddUserField"></button>
<button type="button" id="ax-dev-Toolbarbtn1" ax_txtscope="Dev" ax_txt="ExtensionsTab.DeleteUserField"></button>
<button type="button" id="ax-dev-Toolbarbtn2" ax_txtscope="Dev" ax_txt="ExtensionsTab.RevertToDefault"></button>
</div>
<div id="ax-dev-Toolbar-edit" class="ui-widget-header ui-corner-all">
<button type="button" id="ax-dev-ToolbarbtnCopy" ax_txtscope="Dev" ax_txt="ExtensionsTab.CopyUserField"></button>
<button type="button" id="ax-dev-ToolbarbtnPaste" ax_txtscope="Dev" ax_txt="ExtensionsTab.PasteUserField"></button>
</div>
<div id="ax-dev-Toolbar-alignment" class="ui-widget-header ui-corner-all">
<button type="button" id="ax-dev-ToolbarbtnVA1" ax_txtscope="Dev" ax_txt="Align.TopEdges"></button>
<button type="button" id="ax-dev-ToolbarbtnVA2" ax_txtscope="Dev" ax_txt="Align.VerticalCenters"></button>
<button type="button" id="ax-dev-ToolbarbtnVA3" ax_txtscope="Dev" ax_txt="Align.BottonEdges"></button>
<button type="button" id="ax-dev-ToolbarbtnHA1" ax_txtscope="Dev" ax_txt="Align.LeftEdges"></button>
<button type="button" id="ax-dev-ToolbarbtnHA2" ax_txtscope="Dev" ax_txt="Align.HorizontalCenters"></button>
<button type="button" id="ax-dev-ToolbarbtnHA3" ax_txtscope="Dev" ax_txt="Align.RightEdges"></button>
<button type="button" id="ax-dev-ToolbarbtnD1" ax_txtscope="Dev" ax_txt="Align.DistributeVertically"></button>
<button type="button" id="ax-dev-ToolbarbtnD2" ax_txtscope="Dev" ax_txt="Align.DistributeHorizontally"></button>
<button type="button" id="ax-dev-ToolbarbtnE1" ax_txtscope="Dev" ax_txt="Align.EvenWidths"></button>
<button type="button" id="ax-dev-ToolbarbtnE2" ax_txtscope="Dev" ax_txt="Align.EvenHeights"></button>
</div>
<div id="ax-dev-Toolbar-styling" class="ui-widget-header ui-corner-all">
<select class="ui-widget" id="ax-dev-ToolbarbtnF" ax_txtscope="Dev" ax_txt="Styling.Font" ax_isfontselect="true" style="width: 120px; font-size: 14px"></select>
<select class="ui-widget" id="ax-dev-ToolbarbtnFS" ax_txtscope="Dev" ax_txt="Styling.FontSize" style="width: 25px; font-size: 12px"></select>
<button type="button" id="ax-dev-ToolbarbtnTC" ax_txtscope="Dev" ax_txt="Styling.TextColor"></button><input type="hidden" id="ax-dev-ToolbarbtnTC-cp" style="width:0px"/>
<button type="button" id="ax-dev-ToolbarbtnBGC" ax_txtscope="Dev" ax_txt="Styling.BackgroundColor"></button><input type="hidden" id="ax-dev-ToolbarbtnBGC-cp" style="width:0px"/>
<input type="checkbox" id="ax-dev-ToolbarbtnT1" ax_txtscope="Dev" ax_txt="Styling.Bold" /><label for="ax-dev-ToolbarbtnT1">Bold</label>
<input type="checkbox" id="ax-dev-ToolbarbtnT2" ax_txtscope="Dev" ax_txt="Styling.Italic" /><label for="ax-dev-ToolbarbtnT2">Italic</label>
<input type="checkbox" id="ax-dev-ToolbarbtnT3" ax_txtscope="Dev" ax_txt="Styling.Underline" /><label for="ax-dev-ToolbarbtnT3">Underline</label>
<input type="checkbox" id="ax-dev-ToolbarbtnTA1" ax_txtscope="Dev" ax_txt="Styling.TextAlignLeft" name="ax-dev-Toolbar-txtAlign"><label for="ax-dev-ToolbarbtnTA1">Text Align Left</label>
<input type="checkbox" id="ax-dev-ToolbarbtnTA2" ax_txtscope="Dev" ax_txt="Styling.TextAlignCenter" name="ax-dev-Toolbar-txtAlign"><label for="ax-dev-ToolbarbtnTA2">Text Align Center</label>
<input type="checkbox" id="ax-dev-ToolbarbtnTA3" ax_txtscope="Dev" ax_txt="Styling.TextAlignRight" name="ax-dev-Toolbar-txtAlign"><label for="ax-dev-ToolbarbtnTA3">Text Align Right</label>
</div>
</div>
<div id="terminalInner" class="ui-layout-content axdefault" style="min-height: 50px; min-width: 50px;">
<!-- In order to avoid unexpected scrollbars and strange scaling effects when
using zoom in IE, it is necessary to wrap the content in a couple of DIVs. -->
<div id="terminalWrapper" class="terminalTheme ui-layout-center"><div id="terminalContent"></div></div>
</div>
<div id="extensionInfo" style="display: none;">
<table id="extensionDetailedInfo"><tr>
<td id="extensionDetailedInfoType" class="ax-terminal-statusbar-extensiontype"></td>
<td id="extensionDetailedInfoValue" class="ax-terminal-statusbar-extensionvalue"></td>
<td id="extensionDetailedInfoRow" class="ax-terminal-statusbar-extensionrow"></td>
<td id="extensionDetailedInfoCol" class="ax-terminal-statusbar-extensioncol"></td>
</tr></table>
</div>
<div class="footer">
<span id="terminalStatusIndicator" class="ax-terminal-statusbar-button-left"></span>
<span id="terminalRefreshButton" class="ax-terminal-statusbar-button-left"></span>
<span id="terminalCancelButton" class="ax-terminal-statusbar-button-left"></span>
<span id="terminalClearButton" class="ax-terminal-statusbar-button-right"></span>
<div class="ax-terminal-statusbar-messages">
<select id="terminalMessages" disabled="disabled"></select>
</div>
</div>
</div>
<div class="devTheme ui-layout-west">
<ul>
<li><a href="#ax-keysTab" ax_txtscope="Core" ax_txt="Keyboards">Keyboards</a></li>
<li class="ui-helper-hidden" aria-controls="ax-developerTab"><a href="../dev/ts2devtab.html" ax_txtscope="Core" ax_txt="Developer">Developer</a></li>
</ul>
<!-- add wrapper that Layout will auto-size to 'fill space' -->
<div class="ui-layout-content ui-corner-bottom">
<div id="ax-keysTab">
<fieldset id="ax-keysTab-fkeys">
<legend ax_txtscope="core" ax_txt="Keyboard Maps">Keyboard Maps</legend>
<span ax_txtscope="core" ax_txt="Current map" style="padding-right: 5px;" >Current map:</span>
<label class="dd-custom-arrow" style="width:150px; padding-right: 5px;">
<select id="ax-keymap-select" style="width: 100%; padding-right: 12px;" class="ui-widget-content noarrow-dropdown"></select>
</label>
</fieldset>
<fieldset id="ax-keysTab-fkeys"><legend ax_txtscope="core" ax_txt="Function Keys">Function Keys</legend>
<button class="ax-fkeybutton">F1</button>
<button class="ax-fkeybutton">F2</button>
<button class="ax-fkeybutton">F3</button>
<button class="ax-fkeybutton">F4</button>
<button class="ax-fkeybutton">F5</button>
<button class="ax-fkeybutton">F6</button>
<button class="ax-fkeybutton">F7</button>
<button class="ax-fkeybutton">F8</button>
<button class="ax-fkeybutton">F9</button>
<button class="ax-fkeybutton">F10</button>
<button class="ax-fkeybutton">F11</button>
<button class="ax-fkeybutton">F12</button>
<button class="ax-fkeybutton">F13</button>
<button class="ax-fkeybutton">F14</button>
<button class="ax-fkeybutton">F15</button>
<button class="ax-fkeybutton">F16</button>
<button class="ax-fkeybutton">F17</button>
<button class="ax-fkeybutton">F18</button>
<button class="ax-fkeybutton">F19</button>
<button class="ax-fkeybutton">F20</button>
<button class="ax-fkeybutton">F21</button>
<button class="ax-fkeybutton">F22</button>
<button class="ax-fkeybutton">F23</button>
<button class="ax-fkeybutton">F24</button>
</fieldset>
<fieldset id="ax-keysTab-udkeys"><legend ax_txtscope="core" ax_txt="Other Keys">Other Keys</legend>
<!--button keystab becomes dynamically loaded based on xxxkeymap.xml-->
</fieldset>
</div>
<div id="ax-developerTab"></div>
</div>
</div>
</div>
<div id="loadingIndicator" class="ui-widget"> <span ax_txtscope="Core" ax_txt="Loading..."></span></div>
<div id="ax-terminalVerifyUserDialog" style="display:none;">
<p id="ax-terminalVerifyUserMessage"></p>
<form>
<fieldset>
<label for="ax-terminalVerifyName" ax_txtscope="Core" ax_txt="Name:">Name:</label>
<input type="text" name="ax-terminalVerifyName" id="ax-terminalVerifyName" class="text ui-widget-content ui-corner-all" />
<label for="ax-terminalVerifyPassword" ax_txtscope="Core" ax_txt="Password:">Password:</label>
<input type="password" name="ax-terminalVerifyPassword" id="ax-terminalVerifyPassword" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="ax-aboutDialog" style="display:none;">
<div class="abtDlgHeader">
<img class="abtDlgLogo" src="css/images/centerlogo.png"></img>
<!-- Version is set by JavaScript -->
<span id="ax-aboutDialog-version"></span>
</div>
<span id="ax-aboutDialog-copyright" style="display: block;">
© <span ax_txtscope="Core" ax_txt="Copyright"></span>
<span ax_txtscope="Core" ax_txt="Copyright.Reserved" style="display: block;"></span></span>
</div>
<div id="ax-devGridSettingsDialog" style="display:none;">
<label for="ax-devGridSettings-Size" ax_txtscope="Dev" ax_txt="GridSize">Grid size:</label>
<input type="number" id="ax-devGridSettings-Size" name="ax-devGridSettings-Size" size="3" class="ui-widget-content" />
<br />
<label for="ax-devGridSettings-Front" ax_txtscope="Dev" ax_txt="GridBringToFront">Bring to front</label>
<input type="checkbox" id="ax-devGridSettings-Front" name="ax-devGridSettings-Front" />
<br />
<label for="ax-devGridSettings-Snap" ax_txtscope="Dev" ax_txt="GridSnapToGrid">Snap to grid</label>
<input type="checkbox" id="ax-devGridSettings-Snap" name="ax-devGridSettings-Snap" />
</div>
<div style="display:none;">
<bgsound id="ax-sounds-error-bg" src="#" autostart="true">
</div>
<script type="text/javascript">
var isTheAxesWindow = true;
window.onmessage = function(event) {
var data = event.data;
if (data.cmd == "login")
{
$("#loginUser").val(data.loginUser);
$("#loginPwd").val(data.loginPwd);
$("#btnDoLogin").click();
}
else if (data.cmd == "sendKey")
{
AXES.currentForm.postAIDKey(data.key);
}
};
(function()
{
var s = window.location.search;
var ext = (/(^\?|&)nominjs(&|$)/i.test(s)) ? ".js" : ".min.js";
var jsFileArray = ["js/modernizr" + ext,
"js/jquery" + ext,
"js/jquery-ui-all" + ext,
"js/jquery-ui-custom.js",
"js/jquery.layout" + ext,
"js/jquery-plugins.min.js",
"js/jquery.validate.min.js",
"../screens/jq.jquery.plugin.min.js",
"js/digest.js",
"js/axcore.js",
"js/axlog.js",
"js/axtext2.js",
"js/axextension.js",
"js/axextensionbase.js",
"js/axscreens.js",
"js/axtx.js",
"js/axterm.js",
"js/axlayout.js",
"js/axkeys.js",
"js/axtables.js",
"js/axcompat.js",
"js/axexdata.js",
"js/axibmiservice.js",
"/wba/jsmlink.js",
"../axusrglobal.js"];
AXESBUILD.writeCSSTags(document, ["css/jquery-ui-custom.css"]);
AXESBUILD.writeCSSTags(document, ["css/font-awesome.min.css"]);
if (/(?:^\?|&)dev(?:=|&|$)/i.test(s))
{
AXESBUILD.writeCSSTags(document, ["../dev/ts2tabstyles.css", "dev/codemirror.css","dev/lint.css"]);
AXESBUILD.writeCSSTags(document, ["dev/cssdialog.css"]);
jsFileArray.push("dev/codemirror.js");
jsFileArray.push("dev/javascript.js");
jsFileArray.push("dev/css.js");
jsFileArray.push("dev/jshint.js");
jsFileArray.push("dev/lint.js");
jsFileArray.push("dev/javascript-lint.js");
jsFileArray.push("js/axdev.js");
jsFileArray.push("js/axeditors.js");
}
AXESBUILD.writeScriptTags(document, jsFileArray);
})();
</script>
</body>
</html>