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

You are doing it wrong. You can create a custom Authorization filter in which you should write the code for authorization and if it fails you should return a JSON response with a flag (e.g. AuthorizationError) set, so your client would know authorization failed. — Aidin
– Aidin, Commented Mar 7, 2014 at 21:50
So, what you are telling me is that instead of doing all that crap forms authentication I should send to the client a Token and in every post or get I should check that Token in the server with a custom Filter in the controller? Thanks — VAAA
– VAAA, Commented Mar 7, 2014 at 21:54

Drewness · Accepted Answer · 2016-10-20 15:19:51Z

2

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.

edited Oct 20, 2016 at 15:19

Drewness

5,0804 gold badges35 silver badges51 bronze badges

answered Mar 7, 2014 at 22:12

Aidin

2,13423 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VAAA Over a year ago

do you know any link or code that I can see in order to understand better? I would really appreciate.

Collectives™ on Stack Overflow

AngularJS and Web API form authentication

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related