How to implement a first-time-only login scheme for a mobile web application implemented with jQuery Mobile, PhoneGap, and Django?

Question

I'm in early (pre-coding) stages of developing a mobile web application using jQuery Mobile (we looked at Sencha Touch for a few weeks, but jQuery Mobile is a better fit for our team's competencies). I am wrapping the jQuery Mobile web application with PhoneGap to create an iPhone, iPod touch, and iPad native-ish application. I use Django for our web applications so intend to do the same here for the server-side, with some sort of JSON/Ajax/REST data flow for the interface between the mobile application and the server. Since it's a mobile-only application, we should have access to all the HTML5 kind of stuff.

While I am likely to come up with other issues/questions for this implementation, here is my current question/issue:

I need to set up the application so that the first time the user opens the application, they must enter a username and password to authenticate. Subsequently the user should not have to authenticate unless the user clicks a "settings" link which gives them a page to authenticate with a different account or password. The application should still authenticate to the server each time it is started, using the current username and password that was originally entered, to make sure that the account hasn't been disabled or the password changed or something.

I am pretty new to authentication schemes. What should I do?

Answer 1

I would advise against storing in HTML5 local/web storage. If you are targeting iOS PhoneGap, I would recommend using the Keychain Plugin: http://blogs.nitobi.com/shazron/2010/11/06/ios-keychain-plugin-for-phonegap/

Answer 2

Although you're not going with Sencha Touch, there's a pretty good overview of the issues at HTTP Authentication.

As for storing the authentication information after an initial login, you could try local storage or a cookie (though you might need to use PhoneGap to enable cookie storage). HTML5 also provides key-value local client storage. If authentication cookies work I believe this could be handled automatically for you; otherwise you could implement a document.ready authentication check within an Ajax call using authentication data from local storage (or encrypted storage).

Answer 3

The KeyChain solution would work only on iOS devices, so if that's your only target you are fine.

But what about the others? Kind of a waste using PhoneGap but then deploying only to one framework...

I know localStorage is not secure, but if you are aware of the limitations there are ways to make a bit less "obvious".

Here's the jQuery.handleStorage plugin which also handles AES encryption... You could have a look at the source and implement only the parts you need (in case you don't want to use the whole plugin, which also supports desktop browsers!).

PS: I am not affiliated in any way to that plugin or the author

Answer 4

This was one of the burning questions I had when I started mobile development with PhoneGap. Let me explain what I do to get through.

When the users try to login to he/she enters the username and password which will be sent via a web service call to the server side. If the authentication is successful issue a token to the user and save it at the server side for the future communication. User will receive the token and it will be saved in the local storage or whatever mechanism you prefer.

Now for future communication use the token, token will be passed with the every web service call to the server side where server will authenticate whether the token is a valid token issued by the server. You can invalidate the token by every 72 hours or 48 hours as pre your requirement(or not expiring). Once the token is invalidated you will have to login and get a new token.

Hope this solve your problem.