2

After spending numerous months trying to figure this out, I finally have to ask for your help.

Scenario: Ajax call to webapi method passing in username and password. If user is valid, a session Id / token is returned back to the client. This token will be passed in all subsequent requests; maybe using a time stamp to further protect the methods.

I understand the theory, what I need is sample code. HTML page with username and password fields. "Login" button click makes an Ajax call to rest method in asp.net WebAPI to be authenticated against a custom member table.

If all is good, send the token to the client (which will be stored on the users device)

Any guidance will be greatly appreciated.

Sal Andani
  • 23
  • 1
  • 6
  • How are users accessing the application on the device - are they using a web browser or is it a native application? – Russ Cam Feb 23 '13 at 00:08
  • Initially will be a mobile web application. Eventually I hope to compile via PhoneGap to native. – Sal Andani Feb 23 '13 at 01:00

1 Answers1

3

Given you are opening up an endpoint for username and password you should read about some of the threats described here under 4.4.3. Resource Owner Password Credentials (an OAuth2 flow that uses username and password) - the advise is still very important to follow even if this is not an OAuth solution, this covers the basics such as use SSL for transport level security but it also lists lots of other threats and countermeasures...

Using the credentials of a user inside JavaScript is a threat in itself. The OAuth 2 specification describes the implicit grant flow as the preferred approach to obtain a session (access_token) with JavaScript, the implicit flow aims to keep the credentials away from the javascript. There is an example walk-through of that approach here; however, this would involve you installing an authorisation server, using a 3rd party provider or implementing your own using something like DotNetOpenAuth (which isn't too difficult some good scenarios here).

But assuming you have ruled out OAuth 2 and the implicit grant flow etc, then...

I have placed an example online here which uses Basic auth via AJAX to return a Json Web Token JWT session token for use on all subsequent requests.

My example is basic therefore the token is stored in memory; however, cookies, local storage etc could be used to store the token for longer periods in a web environment.

My example uses the IdentityModel package from Thinktecture.

There are other examples and detailed walkthroughs below, and these should most certainly be used as further reference and guidance...

My example borrows from the above and from this question How to use Basic Auth with jQuery and AJAX?

If your login form and API are on different domains then you will also need to investigate CORS or JSONP, be sure to use a session signing key at the server that is stored safely and hidden on the server. The key is currently hardcoded in WebApiConfig.cs also be sure to reenable the must be over SSL option.

Once it is PhoneGap

Your server will likely be the same but you may be able to use the PhoneGap framework to replace some of your JavaScript...

Community
  • 1
  • 1
Mark Jones
  • 12,156
  • 2
  • 50
  • 62
  • Thank you! I understand most of the code you provided. The only question I have is how do I send the token on subsequent requests? I think the ajax call is to include the beforeSend event. In my API, I need this token so I can find the user; also want to be able to set a "timeout" type of mechanism (I've read to use the UTC?). Am I barking up the wrong tree? – Sal Andani Feb 25 '13 at 13:25
  • To set the token for each request I have used this code $.ajaxSetup({ headers: { 'Authorization': "Session " + data.access_token } see line 68 of https://github.com/markyjones/StackOverflow/blob/master/ExampleBasicAuthWithSession/ExampleBasicAuthWithSession/Index.html. This is set when the token is returned you could also store this in localstorage or a secure cookie to allow it persist. – Mark Jones Feb 25 '13 at 14:13
  • To find the user? I suggest you have an API endpoint that returns the current users information based on the claims in access token rather than attempting to read and parse your token in the JavaScript (which is going to be base64 encoded if JWT). – Mark Jones Feb 25 '13 at 14:18
  • To implement a session timeout google sliding sessions and look here for some examples http://brockallen.com/2013/02/17/sliding-sessions-in-wif-with-the-session-authentication-module-sam-and-thinktecture-identitymodel/ this will force you to send back an updated token on every request from the server... odds are with this approach you are going to use cookies to hold your token (this is different to the approach I have described which uses the Authorization header) – Mark Jones Feb 25 '13 at 14:21
  • THANKS! You have saved me (and anyone else trying to do this) hours of aggravation! I should've asked a long time ago - but wanted to do my own research first so I kinda knew what I wanted. – Sal Andani Feb 25 '13 at 17:14