html/Javascript Clientside User Login

Question

I am adding authentication to my web application. It is an asp.net mvc single page application. Currently the web application is using the asp.net mvc for only one thing, authentication. I check the Request.IsAuthenticated in the AppController, if it isnt authenticated than I serve the login page (else I save the app.html page). In my AccountController I have the following Logon Action:

[HttpPost]
 [AllowAnonymous]
 [ValidateAntiForgeryToken]
 public ActionResult LogOn(LogOnModel model, string returnUrl)
 {
 if (ModelState.IsValid)
 {
 //VALIDATE USER NAME AND PASSWORD 
 if (Repository_Security.CheckUser(model.UserName, model.Password))
 {
 FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
 if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/") && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\\\"))
 {
 return Redirect(returnUrl);
 }
 else
 {
 return RedirectToAction("Index", "App");
 }
 }
 else
 {
 ModelState.AddModelError("", "The user name or password provided is incorrect.");
 }
 }
 // If we got this far, something failed, redisplay form
 return View(model);
 }

Really its just taking a user name and password and validating against the database. Than sets the AuthCookie if it passes.

My question is, is this possible if I do this entirely clientside in the browser in javascript and ajax data calls? Than be able to add a check in my clientside code to see if the user is authenticated, else throw them to a login page?

Any ideas? thanks.

Answer 1

Yes, and MVC is perfect for working clientside Ajax.

You can modify your controller to return JSON, and with a jquery ajax call you can process the returned json using clienside javascript.

Change the last line (return View(model)) to look something like the following

return Json(new {IsSuccess=successVariable, RedirectUrl=myRedirectUrl, Message=failedErrorMessage});

Adjust your Redirect lines to instead set myRedirectUrl variable.

Update

If you want to get rid of MVC in your project (as it's an overkill for such a simple task), add a web service (asmx) to your site. Inside create a webmethod similar to following:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public LogonResponse Logon(LogonModel model){
 ... do login logic as your original code...
 return new LogonResponse() { IsSuccess = successVar, RedirectUrl=myRedirectUrl, Message=failedErrorMsg};
}

• Matt: I guess I want it to be independent of MVC. Just want to be able to call a web service with the login details and return true false and other authentication details. So if wanted I could rip it out of asp.net mvc without issue.
• Matt: Hi Mac, Thanks for your response. I guess its the clientside cookie stuff that im more interested in (im pushing and pulling data already). i.e. Storing user authentication in the browser and being able to check against it on page change (also when the user closes the browser and comes back to be able to check the remember me? status to see if they should login again or use old credentials).
• Andrew Stakhov: I don't think you fully understand how security model works in .NET. When user visits your site they are issued a session ticket, it's stored in HTTP header. A server side session is established associated with this ticket, which amongst other things tracks whether the user is logged in. The header is sent automatically by user's browser. Once you call SetAuthCookie method, this ties user's session to being authenticated on server (until session expires). Your server code will then block any requests that are not exposed to anonymous users automatically.
• Matt: My process now is to seperate my web application and data layer into two seperate projects (this is because the client will not always be a web application, it could be an ios application for example). The data layer will serve all data to the client application via webapi. I guess from your response I have a question. Is it possible still to do all login authentication in my web application with the data layer being in a seperate entity? So basically the web application will be verifying the login information against the database by sending the call to the webapi service.
• Andrew Stakhov: Sure, there's nothing stopping you from doing that. Keep in mind that you should never rely on your UI to enforce security. That's your service layer job (webapi). UI can invoke webapi to authenticate, and get a response back on the success of the authentication. If successful you can update UI element to reflect it as such, but client side must be ready to fail gracefully if server deems request as unauthorized (can happen at any point due to session timeout or similar event).

Answer 2

You can do that from client-side as well... but if your application need full security then this model will open-up many security loop holes.

Answer 3

When you call FormsAuthentication.SetAuthCookie() it sends a Set-Cookie header back to the client so their browser can store the authentication cookie. You can just check for the existence of this cookie client-side with JavaScript. If it exists then continue, if it doesn't then do a redirect (window.location.href) to the login page, e.g.:

if (document.cookie.indexOf(".ASPXAUTH") >= 0) alert("You are logged in");
else window.location.href = "http://www.domain.com/login";