Here is the client code in Javascript for a PhoneGap mobile app using all
the web2py mods and controller code I have previously posted.
Hopefully it is straight forward to convert to C++ or C# for a Windows
client app as well:
It uses the HTML 5 feature "window.localStorage" instead of cookies.
function xmlhttpPostloginrequest(strURL, username, password) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, false, username, password);
self.xmlHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
debugger;
var restext = self.xmlHttpReq.responseText;
var resdict = JSON.parse(restext);
var res = resdict["IsLoggedIn"];
var rescookiename =
resdict["sessioncookiename_fromweb2py"];
var ressession_record_id = resdict["session_record_id_fromweb2py"];
var ressession_guid = resdict["session_guid_fromweb2py"];
var resmsg = resdict["resmsg"];
if (res == 'True') {
//store
window.localStorage["username"] = username;
window.localStorage["password"] = password;
window.localStorage["sessioncookiename_fromweb2py"] =
rescookiename; // retrieve these values for checkisloggedin() and do
self.xmlHttpReq.setRequestHeader()
window.localStorage["sessioncookieval_fromweb2py"] =
ressession_record_id + ':' + ressession_guid;
// Now we are logged in...
$.mobile.changePage("#mainPage"); // "mainPage" is
your first application page of business logic (html for mainPage is NOT
shown in this posting)
} else {
navigator.notification.alert("Your login failed",
function() { });
}
$("#submitButton").removeAttr("disabled");
}
}
var rawcred = make_base_auth(username, password)
var rawcredhtmlEncoded = htmlEncode(rawcred);
var qscred = "cred=" + rawcredhtmlEncoded;
var session_record_id_fromweb2py =
window.localStorage["session_record_id_fromweb2py"];
var session_guid_fromweb2py =
window.localStorage["session_guid_fromweb2py"];
var sessioncookieval_fromweb2py = session_record_id_fromweb2py.toString()
+ ':' + session_guid_fromweb2py;
window.localStorage["sessioncookieval_fromweb2py"] =
sessioncookieval_fromweb2py;
var datatosend = 'sessioncookieval_fromweb2py=' +
sessioncookieval_fromweb2py + '&' + qscred ;
self.xmlHttpReq.send(datatosend);
} // xmlhttpPostloginrequest()
function handleLogin() {
var form = $("#loginForm");
//disable the button so we can't resubmit while we wait
$("#submitButton", form).attr("disabled", "disabled");
var u = $("#username", form).val();
var p = $("#password", form).val();
var urlpw = "http://localhost:8080/init/default/login_mobile";;
if (u != '' && p != '') {
xmlhttpPostloginrequest(urlpw, u, p);
} else {
navigator.notification.alert("You must enter a username and
password", function () { });
$("#submitButton").removeAttr("disabled");
}
return false;
} // handleLogin()
function xmlhttpPostcheckisloggedinrequest(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, false);
var rescookiename = "";
var rescookieval = "";
if (window.localStorage["sessioncookiename_fromweb2py"] !=
undefined && window.localStorage["sessioncookieval_fromweb2py"] !=
undefined) {
rescookiename =
window.localStorage["sessioncookiename_fromweb2py"];
rescookieval =
window.localStorage["sessioncookieval_fromweb2py"];
}
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
debugger;
var restext = self.xmlHttpReq.responseText;
if (restext == "") {
$.mobile.changePage("#loginPage");
}
else {
var resdict = JSON.parse(restext);
var res = resdict["IsLoggedIn"];
var ressession_record_id_fromweb2py =
resdict["session_record_id_fromweb2py"];
var ressession_guid_fromweb2py = resdict["session_guid_fromweb2py"];
window.localStorage["session_record_id_fromweb2py"] =
ressession_record_id_fromweb2py;
window.localStorage["session_guid_fromweb2py"] =
ressession_guid_fromweb2py;
var sessioncookieval_fromweb2py =
ressession_record_id_fromweb2py.toString() + ':' +
ressession_guid_fromweb2py;
window.localStorage["sessioncookieval_fromweb2py"] =
sessioncookieval_fromweb2py;
var resmsg = resdict["resmsg"];
if (res == 'True') {
$.mobile.changePage("#mainPage");
}
else {
$.mobile.changePage("#loginPage");
}
}
}
return false;
}
self.xmlHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// send session id
if (rescookieval == "") {
self.xmlHttpReq.send("checkIsLoggedIn=firstTimeCreateSession");
}
else {
if (window.localStorage["username"] != undefined &&
window.localStorage["password"] != undefined) {
var username = window.localStorage["username"];
var password = window.localStorage["password"];
var rawcred = make_base_auth(username, password)
var rawcred_nonbasic = rawcred.replace('Basic ', '');
var unquotedval = rescookieval.replace('"',
'').replace('"', '');
var quotesplit = unquotedval.split(":");
var session_record_id_fromweb2py =
window.localStorage["session_record_id_fromweb2py"];
var session_key_tuple = session_record_id_fromweb2py + ':' + quotesplit[1];
var postargs = 'sessioncookieval_fromweb2py=' + session_key_tuple + '&' +
'cred=' + rawcred_nonbasic;
self.xmlHttpReq.send(postargs);
}
else {
self.xmlHttpReq.send(rescookiename + "=" + rescookieval);
}
}
return false;
} // xmlhttpPostcheckisloggedinrequest()
function checkisloggedin() {
//disable the button so we can't resubmit while we wait
var form = $("#connectForm");
$("#submitConnect", form).attr("disabled", "disabled");
var url = "http://localhost:8080/init/default/isloggedin_mobile";;
xmlhttpPostcheckisloggedinrequest(url);
return false;
} // checkisloggedin()
</script>
<script type="text/javascript">
// Initialiation code - in PhoneGap app, the following code would go in the
onDeviceReady() method:
$("#connectPage").on("pageinit", function() {
$("#loginForm").one("submit", handleLogin);
$("#connectForm").one("submit", checkisloggedin);
});
$.mobile.changePage("#connectPage");
</script>
<!-- The html, using mustouche.js templating is: -->
<div id="connectPage" data-role="page">
<div data-role="header">
<h1>Auth Demo Connect Page</h1>
</div>
<div data-role="content">
<form id="connectForm" action="">
<div>
<label for="username">click submit to connect:</label>
</div>
<input type="submit" id="submitConnect" value="Connect" />
</form>
</div>
</div>
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Auth Demo</h1>
</div>
<div data-role="content">
<form id="loginForm" action="">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value=""
placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value=""
placeholder="Password" />
</div>
<input type="submit" id="submitButton" value="Login" />
</form>
</div>
</div>
--
