PhoneGap - Approach to authenticate against a remote website?

Question

I'm playing with PhoneGap for the first time. I'd like to do the following:

Create a login UI in the file index.html like so:

<input id="email">
<input id="password">
<button id="login">Login</button>

The UI will appear on an iphone. When user clicks the login button, I want to asychronously authenticate against the website http://mysite.com/login. If authentication fails, user stays on the index.html UI. If authentication succeeds, user sees a new UI found in dashboard.html, which looks like this:

<ul>
   <li>task 1</li>
   <li>task 2</li>
   <li>task 3 etc... (asychronously retrieve data from http://mysite.com)</li>
</ul>

The user can perform asynchronous actions against the list in dashboard.html. So to do this, the server-side scripts must always check to see if user has the appropriate permissions.

SO my questions are:

1) I've outlined what I'd like to achieve, but i've also suggested web-development philsophy to solving the problem. Is there a better overall approach?

2) Which asynchronous technology should I use? Ajax, webservice, something else?

3) Can I still use SESSION on the server side to maintain user session data like user_id, roles, permissions etc... That way the client machine doesn't have to transmit this data with every asynchronous call?

Answer 1

1. good approach
2. I would suggest ajax with json response
3. Yes you can still use session variables

remember in the end, that the phonegap application is really just a web page running in a container created by phonegap.

Here is a phonegap plugin I wrote for logging into a system running SSL

Excellent PhoneGap Documentation is here and don't forget the PhoneGap Wiki has great stuff too