0

I am working on a project needs AngularJS on the client side and ASP.NET Web Api on the server side, seems I am fairly new to Angualrjs, I couldn't find a good way to handle access control in AngularJS. AngularJS routing seems to only "work" within "App", if a user access a URL directly (http://www.test.com/customer?userid=12345), it will not work. Therefore I am thinking to let ASP.NET MVC to handle the routing for each AngularJS apps and let AngularJS routing to handle routing within each app.

My question is, once the client app (angularjs) is authenticated by the server (Token), How do I add that authentication in my ASP.NET MVC ? so I can use something like User.Identity and get all the necessary Claims from the server? or I should do the other way to let ASP.NET MVC to make the authentication call with API and store the token somewhere else for angularjs to pick it up? or is there any other way to do it ?

cjskywalker
  • 3,285
  • 2
  • 16
  • 16

1 Answers1

1

Once the client app (angularjs) is authenticated by the server (Token), how do I add that authentication in my ASP.NET MVC?

You have to insert the [Authorize] attribute in the actions and/or controllers that require Authentication and Authorization. There are other possibilities to achive that implementing an Authorize filter or Authenticate filter, but for the moment [Authorize] attribute it's a good point to start.

Can use something like User.Identity and get all the necessary Claims from the server?

Yes, of course. Once you retrieve the user from Db

IdentityUser user = await repository.FindUser(context.UserName, context.Password);

you will be able to get Claims, Roles, ... But this is only an example. You will be able to get the user from the token sent by you AngularJS. In fact, to get the user claims, there exists the class ClaimsPrincipal of the System.Security.Claims for this prupose.

However, it's quite difficult to answer this questions without code, so I recommend you the following series of tutorials. I'm sure they will help you:

  1. Token Based Authentication
  2. AngularJS Token Authentication
  3. Enable OAuth Refresh tokens

Edited

If you have 2 projects, one for ASP.NET MVC and other for Web API project, you have to be sure that both WebConfig files have the same machineKey tag:

<system.web>
...
<machineKey validationKey="57B449BBA8F9E656087FF7848727E122C5F5966F65AC0FC25FB3532193B59CFCD13B370883FFC184C1F1500638F33E6F67B37CAED1D9BC65BBC6CFFB232BFD0B" decryptionKey="6D9FBE88D16B3FA5B5E6B37460BBE50DA85D5B4C482159006B5A337C58AA9E79" validation="SHA1" decryption="AES" />
...
</system.web>

Use this machine Key Generator. Token is created based on the machineKey, so you have to be sure that this field is identical. If not, the token created on one project will not be valid for the other.

Xavier Egea
  • 4,712
  • 3
  • 25
  • 39
  • but I am using angularjs to make the /token call to my webapi, you are saying ASP.NET MVC will pick up the authenticated object, even I made the call in angularjs instead of asp.net mvc? I tried it, but my Principal object always null when I do User.Identity. – cjskywalker Sep 09 '14 at 14:11
  • I guess you have 2 different projects. One for WepApi and one for ASP.NET MVC. You have to put the identical machineKey in both webconfig files. – Xavier Egea Sep 09 '14 at 14:19
  • Any recommend post on identical machineKey ? I assume I should make the authentication call within MVC? like HttpClient? because if I made the call by using Angularjs directly, server will not be aware of it right? – cjskywalker Sep 09 '14 at 14:23
  • @DesireToKnowMore I have Edited my answer to show you how. – Xavier Egea Sep 09 '14 at 14:25
  • Cool! How about the authentication call made from ? HttpClient? or $http ? I assume it should be called from HttpClient, so MVC can decrypt the token by the key. Angularjs will have no access to the machinekey. Am I correct? – cjskywalker Sep 09 '14 at 14:34
  • @DesireToKnowMore AngularJS has no access to machineKey, in fact doesn't need it. The only that AngularJS needs is a valid token to call server. I'm not sure if I understand about "http or HttpClient", sorry. – Xavier Egea Sep 09 '14 at 14:40
  • so, what you mean is that, we can use HttpClient in ASP.NET MVC to get the token and store in cookies or session and let angularjs to pick up that token and send to api everytime it needs to make a call inside the header? – cjskywalker Sep 09 '14 at 15:03
  • @DesireToKnowMore Correct. You can use cookies or local storage (angular-local-storage) to store the token received and then set the Authentication: Bearer in the header for every call. Step 8 in the second tutorial has an example of how to do it. – Xavier Egea Sep 09 '14 at 15:11
  • Is it cookie as my only option to save the token? because angularjs won't be able to access session object and how to store in local storage from asp.net (server side language), I through it needs to be trigger in client-side. – cjskywalker Sep 09 '14 at 15:26
  • @DesireToKnowMore It is up to you where to store it. Also you can store it in HTML5 local storage and access it via JS. – Xavier Egea Sep 09 '14 at 15:53
  • @DesireToKnowMore You can accept my answer if you consider that it works for you, or score it if you you think that effort made deserves an award. Besides this, other people viewing this topic will be able to identify it as a possible answer to their question. – Xavier Egea Sep 09 '14 at 18:24
  • @DesireToKnowMore At the top left of the answer you have a big "check" symbol that you can click to accept the answer. Also, you have top arrow to score +1. You can also check the Stackoverflow quick tour here: http://stackoverflow.com/tour. Welcome to "Stackoverflow" and enjoy it!!! – Xavier Egea Sep 09 '14 at 20:10