Change is inevitable, the only thing that remains static is users’ approach to finding a solution that is more efficient and economical. The same goes for applications, which have evolved a lot in the course of recent years, starting from the Multi-Page Application (MPA) to a faster and extremely responsive Single Page Applications (SPAs). To amplify market reach and meet customer needs, the companies are focusing on providing solutions that enhance the user experience.

Application Security, being one of the major points of concern in SPAs as well as a contributing factor in the user experience, should be handled carefully. In this highly techno-friendly world, the SPAs are no more limited to mobile devices and computers – it has reached television and IoT-based gadgets as well, requiring them to be more versatile, efficient, and fast. Hence, controlling and maintaining the security of the application brings about a significantly more mind-boggling programming condition with these many moving pieces, requiring you to take care of the various security factors like authentication and authorization at the client end.

Peruser Digest:

  • Authentication — the process of determining whether a user is the same who actually they claim to be.
  • Authorization — the process of determining what resources are accessible to the given user, and at what level.

Overview of ASP.NET Core Authentication

Authentication is the process of determining the identity of the user. Moreover, it is the process of determining whether a user has access to a resource. In ASP.NET Core, authentication is handled by the authentication service, IAuthenticationService, which is used by the authentication middleware. The authentication service uses registered authentication handlers to perform authentication-related tasks. Examples of actions related to authentication include:

  • Authenticating a user.
  • Responding when an unauthorized user tries to access a restricted resource.

Considering the versatility of SPAs and security requirements, Microsoft has come up with a revolutionary idea of shifting the Authorization and Authentication control to the backend i.e. .net itself by adding the authentication parameter(similar to the Web Apps project templates) to the project template of Angular as well as React, as introduced in ASP.NET Core 3.0.

According to Microsoft, “The ASP.NET Core 3.1 and later templates offer authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with Duende Identity Server for implementing OpenID Connect.”

Peruser Digest:

  • Identity — Identity, a membership system for authentication and authorization of the user, is closely related to the UI of the ASP.NET application and manages the attributes related to the user.
  • OIDC —  OIDC refers to OpenID Connect, which is an identity and authentication protocol layer built and placed above the OAuth protocol that allows apps to verify the user identity.
  • OAuth — OAuth, an open standard for authorization, provides secure access to the app, empowering to act on the behalf of the user.

ASP.NET Core Authentication and Authorization for Angular based SPAs

Let’s say you are developing a SPA based on Angular, you will find the support for the authentication and API authorization within the Angular module itself, which is present in the API authorization directory.

Elements of the Angular Module

The Angular Module, responsible for the authentication and authorization process, defines the routes associated with those parts of the application accountable for the authentication. The module expounds the elements like the login menu component, the Authorise guard, the Authorise interceptor as well as various Authorise services for using other parts of the app.

  • Login Menu Components: handles the Login and Logout flow.
  • AuthorizeGuard: authenticates the user before visiting the route.
  • AuthorizeInterceptor: attaches the access token after the authentication is done by the Authorise guard.
  • AuthorizeService: interacts with the other parts of the application and exposes the user information with them.

This was a brief introduction to the Angular Module, let’s proceed further with check out the steps to implement this in your SPA.

How to implement ASP.NET Core Authentication and Authorization in Angular-based SPAs?

The Authentication and Authorization in the Angular-based SPAs can be implemented in the following steps.

1) Add <Authorize> attribute to the newly created controller, in order to require authorization for the new API.

2) Customize the  API authentication handler i.e. JWT(JSON Web Token) Handler by configuring <JwtBearerOptions> the instance.

The JWT(JSON Web Token) handler creates events through JwtBearerEvents, that facilitate control over the authentication process and the instruction AddIdentityServerJwt registers its own event handlers in order to aid the API authorization. To include it into your application, you customize it and can incorporate the required logic into the existing event handler.

services.AddAuthentication()
.AddIdentityServerJwt();
services.Configure(
IdentityServerJwtConstants.IdentityServerJwtBearerScheme,
options =>
{
...
});

Source: Microsoft

3) Guard the client-side route through the AuthorizeGuard, hence preventing the unauthentic users from accessing the route. When the route is protected, AuthorizeInterceptor authenticates the API request by automatically attaching the token to the HTTP request

4) Now you can start with the production of your application, by providing the database for storing the user details and the access grants, as well as an SSL certificate as the application, can run only when the certificate is configured on the portal.

Not only this but there are also various alternatives to configure your applications in the portal such as you can directly add the application to the list of the Client and resources through app settings or configure it through the code as well by overloading the AddApiAuthorization function.

Take-Aways

The API authorization in ASP.NET Core is highly dependent on the IdentityServer, an identity and access control solution for ASP.NET projects, that includes SSO (Single Sign-on), API authorization, identity management, and API security. Even if you want to follow the latest change introduced by Microsoft, you need to get acquainted with the IdentityServer and then follow the process mentioned above in this post.

And that’s it! Hence, if you are developing a Single Page Application (SPA) based on ASP.NET Core 3, it is advisable to have an expert team on your side to consult and create a software development project successfully. 

However, if the process seems arduous, Hire our experts and get the Custom ASP.NET Development Services, and leave the hassle up to them.

Authentication and authorization for SPAs through ASP.NET Core_cta