Скачать или смотреть Implementing Authorization in ASP.NET Web API and Angular 10

Discover effective methods to implement `authorization` for your ASP.NET Web API and Angular 10 app, ensuring that sensitive areas are securely accessed only by authorized users.
---
This video is based on the question https://stackoverflow.com/q/63234099/ asked by the user 'carboneum' ( https://stackoverflow.com/u/8135516/ ) and on the answer https://stackoverflow.com/a/63238122/ provided by the user 'corradolab' ( https://stackoverflow.com/u/2601824/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Authorisation with ASP.NET Web Api and Angular 10

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Implementing Authorization in ASP.NET Web API and Angular 10: A Comprehensive Guide

In the world of web applications, especially those involved in handling sensitive information, authorization is of utmost importance. If you're developing a web app using ASP.NET Web API and Angular 10, you'll want to ensure that only certain users can access specific parts of your application. This guide will walk you through a robust approach to implementing authorization, ensuring user management is strictly controlled and limited to authorized personnel.

The Problem: Ensuring Secure Access

You're aiming to create a secure application where only users who are added to your web configuration can access sensitive sections. User management should only be visible to authorized users who can edit access rights or manage user accounts. The process involves syncing users from the web configuration to a database and implementing access controls throughout your application.

Key Features to Implement

Windows Authentication: Utilize Windows authentication to control users who can access the app.

Access Rights Management: Create a method to manage user access rights effectively.

Dynamic UI Rendering: Adjust the user interface based on access rights to ensure a smooth experience for authorized users.

The Solution: Steps to Implement Authorization

1. Secure Your API

Before anything else, it’s critical to ensure your API is secure. Here’s how to do it:

Require Authentication: Ensure that the whole application requires authentication. This prevents unauthorized access at the API level.

Use Authorize Attributes: Decorate sensitive controller actions with [Authorize] attributes. This restricts access to only those users who have been authenticated.

2. Setting Up Angular Client

When creating your client application in Angular, consider the following:

Separate Admin Client: If your application involves administrative tasks, setting up a separate client dedicated to admin tasks can isolate sensitive operations.

Controller for Admin Client: Utilize a controller that only serves the admin client when accessed by users with admin privileges.

3. Synchronizing Users

Implement a synchronization mechanism between users added through the web configuration and those in your database:

On App Start: When the application starts, check the web configuration for users and synchronize with your database.

Access Control Object: Use an object that defines each user's access rights as follows:

[[See Video to Reveal this Text or Code Snippet]]

4. Implementing UI Logic in Angular

To create a dynamic user interface, follow these guidelines:

Conditional Rendering: Modify the HTML to conditionally render elements based on user access rights. Here’s an example:

[[See Video to Reveal this Text or Code Snippet]]

DRY Principle: While the initial implementation might lead to repetitive access checks, look for reusable methods or guards to minimize redundancy.

5. Utilizing Windows Identity

Use the ASP.NET API to get the current user’s identity. It can be done by:

[[See Video to Reveal this Text or Code Snippet]]

This allows you to identify who is accessing the application and check their access rights accordingly.

6. Implement Route Guards in Angular

To enhance security further, consider using Angular’s route guards. These guards can help manage navigation across your app based on user permissions.

Final Considerations and Pitfalls

As you craft this authorization structure, be mindful of potential pitfalls such as:

Inconsistent Authorization Logic: Make sure all API endpoints are safeguarded consistently.

User Experience: Ensure that the authorization checks do not lead to a fr