AngularJS and Web API form authentication

Question

I'm new to AngularJS and I'm starting to create a sample application, this application has 2 views:

• Login View
• Welcome View

Everything is working fine with my AngularJS dummy application but now I start implementing the Login functionality on server side:

[HttpPost]
        public JsonResult Login(string credentials)
        {
            bool returnVal = false;

            if (!string.IsNullOrEmpty(credentials))
            {
                FormsAuthentication.SetAuthCookie("DUMMY USER", true);
            }

            return Json(new
            {
                success = returnVal
            },
            JsonRequestBehavior.AllowGet);
        }

And on Welcome Controller I have:

 [Authorize]
        public JsonResult GetPersons()
        {
            return Json(new
            {
                success = false
            },
             JsonRequestBehavior.AllowGet);
        }

Then in order to implement the Forms Authentication I have to set in the Web.Config:

<authentication mode="Forms">
      <forms loginUrl="/login" name=".ASPXFORMSAUTH" protection="All" timeout="1" slidingExpiration="true" />-->
    </authentication>

The problem is that when doing that it will redirects the URL, so I get the following error:

GET http://localhost:21871/login?ReturnUrl=%2fperson%2fGetPersons 404 (Not Found) 

And because AngularJS can't understand that route then I can't keep going.

Any clue on how to address this or maybe there is a better way to do it.

Thanks

Answer 1

You can use any authentication/authorization mechanism that you like. But when you are calling $http.get() or $http.post() you expect to receive a JSON object. But if you are not authenticated you will be redirected to login page which is an HTML page. Hence your code which is checking for success will fail.

You need to create a new custom authorize filter (like MyAuthorize) that authenticate/authorizes your user by any available technology (SimpleMembership, OAuth, etc) and if authentication fails then instead of returning a RedirectResult, returns a JSON object with an Error flag. Then you can check that flag after each $http.get() or $http.post(), and redirect the user from client side. We always develop our own communication service that calls $http.get() or $http.post and always make that check over there.