Authorisation with ASP.NET Web Api and Angular 10

I am looking for a way to implement authorization to my web app, only certain users should be able to access sensitive parts of the app. I will use windows authentication, the users that are added to the web config will be eligible to access the app, the user management part will only be visible to authorized users.

A user with full access rights should be able to open the user management section, which will give him the ability to edit access rights for other users or add/remove users from the web config, like you can do from with IIS Manager.

I am using ASP.NET Web Api with Angular 10. What would be a good method to implement such approach?

I thought to first synchronize the users from the web config with an database on app start. I will get the newest users with access to the app that are added through the web config manually, on the other side the web config will receive the new users that were added through the user management section of the app. The authorization rules will be stored in a database, there will be access rights for specific parts of the app, I would send such an object to the frontend:

{ 
    "username": {
        "email_list": true,
        "calculation_area": false
    }
}

And the parts of the app would be visible if the user has access, for example:

<nav class="menu">
  <ul>
    <li><a href="/main">Main</a></li>
    <li><a href="/email_list" *ngIf="userHasAccessToEmailList()">Emails</a></li>
    <li><a href="/calculation_area" *ngIf="userHasAccessToCalculationArea()>Calculation</a></li>
  </ul>
</nav>

I know that is not DRY because I check on each part does the user has access rights or not, I will look for a better solution, but you get the theory. I will use WindowsIdentity identity = HttpContext.Current.Request.LogonUserIdentity to get the username from the person who is viewing the app. The app will run under an identity which has access rights to some data sources which I consume, that’s why I need to separate the current user who runs the app and the user who views the app through the browser. I will have the information who has called the app on start and can check which access rights he has. I would hide parts of the app for which this user hasn’t access right and on each http call check the access rights for the user who made the request, maybe angular’s route guards are a good way to handle this logic. What are your thoughts about this? What should I consider and where are the pitfalls?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

First secure your API. Require authentication for the whole app and place Authorize attributes on each sensitive controller. Basically your aim should be to expose a secure application even if someone tooks the time to craft its own client.

Then setup the Angular client. Depending on your requirements, it could be a good idea to create a separate client for the admin tasks. You can use a controller to serve the admin client only to the admin users.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0