5

The context:

I'm actually developing a small web app (C#/MVC2). Users are going to use their iPhones (and probably Android phones in the future) to access it.

At the moment it's quite simple (it just shows some info and reports from our customer's ERP), and I decided to give a try at creating local webapp that the users could add to their iPhones, so that they had an icon for it and, most importantly, most files are locally cached, so that only the relevant data is obtained using json from the server.

The problem:

To authenticate users, a small form asks for username and password, and sends them to the server via ajax, which in turn validates the user and sets the authcookie. If the app is executed in Safari, everything works ok, but if it's executed locally (that is, in Mobile Safari directly from an icon), the server validates correctly the user, but this validation is lost when the next ajax call to recover data is made.

Does this mean that session cookies are not supported by Mobile Safari in webapps? I'm doing it wrong?

And most importantly: What's the best way to authenticate users in a local webapp that access remote data?

salgiza
  • 5,832
  • 2
  • 26
  • 32

4 Answers4

0

Your best bet : http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

To access a protected resource, the client includes the access token in the Authorization header of the HTTP request

Login :

var loginData = {
    grant_type: 'password',
    username: ...,
    password: ...
};

$.ajax({
    type: 'POST',
    url: '/Token',
    data: loginData
}).done(function (data) {
    // Cache the access token in session storage.
    sessionStorage.setItem(tokenKey, data.access_token);
});

Second request:

// If we already have a bearer token, set the Authorization header.
var token = sessionStorage.getItem(tokenKey);
var headers = {};
if (token) {
    headers.Authorization = 'Bearer ' + token;
}

$.ajax({
type: 'GET',
url: 'api/values/1',
headers: headers
}).done(function (data) {});

If you don't plan to use Web API, you must generate your own token and put it in every request data

softawareblog.com
  • 992
  • 9
  • 21
0

I'm not quite sure about what do you mean by local webapp. I assume that it's an HTTP web server running on localhost.

If that's the case, you need some protocol to communicate between http://localhost and http://yourwebsite.com, and that protocol should help localhost authenticate user via yourwebsite.com. I think OAuth might be what you're looking for.

The first time the user access your local webapp, he will be redirected to yourwebsite.com for the authentication. After that, yourwebsite.com will bring him back with an OAuth token. After verifying that token is valid from yourwebsite.com, localhost can serve user on its own.

Cat Chen
  • 2,387
  • 17
  • 12
  • Thanks, but unfortunately I'm talking about HTML5 offline apps. They are HTML pages that can be stored in the phone, can work offline, have their own icon in the workspace, and behave like a native app (you don't get the browser chrome). – salgiza Feb 24 '11 at 08:16
0

(I realise I'm very late to this question, but anyway…)

Mobile Safari employs a slightly different web engine to that used in "home-screen apps" (i.e. web pages that you bookmark as self-contained icons on the iOS home screen).

Perhaps the issue you're seeing with cookies comes from that, rather than in Mobile Safari per se? I guess it's easy enough to test: if the app all works OK in Mobile Safari, and not from a home screen icon, there's your answer.

As an alternative take, rather than relying on authentication in the on-line version of the app, another approach that may work for you / your organisation is using the app in an unauthenticated state, but over a VPN for mobile workers? (This will still work OK as an offline web app).

Ben
  • 7,548
  • 31
  • 45
  • Thanks for your answer. Effectively, it's a problem with the way home-screen apps are treated. Right now they are using the app in Mobile Safari, but ideally they should be able to use it from an Icon (screen state is important in a mobile device, and we don't need the browser bar for anything). – salgiza Jun 16 '11 at 07:44
  • Mmmm... there should be a way to add new lines in a comment, but I digress. We should be using VPN (to encrypt the connection), but the cookie session is also needed because we store values in the server session (and we need to know the identity of the user accesing the app for different reasons). We will probably go with a validation token if we have time in the future (basically, it will be similar to a cookie, but sent explicitly with each Ajax call). – salgiza Jun 16 '11 at 07:52
0

Instead of using a cookie can't you have a ajax call to login that just returns the "authcookie"-value. The value can be saved using localStorage or similar.

http://dev.w3.org/html5/webstorage/

Later when you want to fetch something you can send this value to the server using a custom header (X-authentication or similar) or just append it as a GET-variable to the url.

Linus Unnebäck
  • 23,234
  • 15
  • 74
  • 89
  • Thanks, we already use localstorage for many things in the app. The thing is that using cookie based sessions is the standard way to authorize users in .Net MVC (and mostly everywhere else). Creating our own token based system shouldn't be too hard (and we will probably do it in the future), but it's quite weird that local web apps (in the iPhone) don't support cookies (and thus cookie-based sessions). – salgiza Jun 27 '11 at 13:58