You are currently viewing Secure .NET Core web app using Azure AD and MSAL

Secure .NET Core web app using Azure AD and MSAL

In this article, let’s see how can we secure a .NET Core web application (Razor or MVC) with Azure AD.

Please note that you will need Azure subscription to follow the steps in the article. If you don’t have an Azure subscription, create a free account before you begin.

We will use Open ID Connect (OIDC) protocol. We will also use Microsoft Authentication Library (MSAL) APIs for implementing the same.

Create Web App

Create .NET Core Web application using Visual Studio 2019.

Make sure you select Web Application or Web Application (Model-View-Controller) templates as shown in below snapshot:

Now, if you run the application, you will be able to see that home page is displayed. You are not required to login to view the page.

Note down the application URL, this would be required for registering application in Azure AD.

Azure AD App Registration

Login to Azure portal and navigate to Azure Active Directory option shown in left side navigation. Then click on App Registration menu option.

  • Name – A display name, e.g. SampleWebApp
  • Supported account types – This should be carefully selected depending on nature of your application. For now, you can keep the default selected option
  • Platform Configuration – this is optional, but you can specify the platform of your application (Web App, background application, Web API, etc.). You can also change this configuration latter. As we want to configure web application select first radio button (Client Application) which covers web applications too.

Then click on Register button.

Azure AD App Auth Settings

Again go to App Registrations and you will be able to see all the applications registered in Azure AD. Select SampleWebApp which we registered in previous step. Then click on Authentication menu option from left side pane. It will show a panel where you can see Add a platform button. Click on it and Select Web.

Next, you will be shown a panel where you need to enter two important inputs:

  • Redirect URI – this is the URL where the response will be redirected after successful authentication. Enter the application URL suffixed with “signin-oidc”. e.g. https://localhost:44377/signin-oidc.
  • Logout URI – this is the URL where the flow should be redirected after logout to clear session. Enter the application URL suffixed with “signout-oidc”. e.g. https://localhost:44377/signout-oidc
  • Implicit Grant – Type of token you want. As stated in the help text in Azure Portal, both check-boxes should be checked only if you are working on Single Page Applications. If you are working with Web App, then you should check only ID Token checkbox.

Now click on Configure button to close the Configure Web panel. Then, click on Save button on Authentication panel to save the settings.

Now if you go to Overview panel of the SampleWebApp, you will be able to see two important values –

  • Application ID (i.e. Client ID)
  • Tenant ID (i.e. Directory ID)

Copy these two values as these two values will be required for configuring our web applications.

NuGet Packages

Now, let’s move back to Visual Studio and add references of two nuget packages to your project.

Microsoft Identity Web is a library which contains a set of reusable classes used in conjunction with ASP .NET Core for integrating with the Microsoft identity platform (formerly Azure AD v2.0 endpoint) and AAD B2C.

Microsoft Identity Web also leverages Microsoft Authentication Library (MSAL), which will fetch the tokens and provides token cache extensibility.

AppSettings.json

Now, lets move to the AppSettings.json file and add a new section there with name AzureAd. In this section, you will need to specify the tenant id, client id which you must have noted down while configuring app registration.

If you want more information about every setting in this section have a look at OpenIdConnectOptions class documentation.

The complete appsettings.json file should be as shown in below code snippet (except client id and tenant IDs as they are GUIDs, they will vary):

Startup

Let’s also configure the authentication middleware.

Two important middlewares

Add Sign In

The AddSignIn method enables your application to use the Microsoft identity platform endpoint. This endpoint is capable of signing-in users both with their Work and School and Microsoft Personal accounts.

By default, AddSignIn gets the configuration from the “AzureAD” section of the configuration files. It has several parameters you can change.

Authorize Filter

Apart from this method, you will also need to add Authorize filter policy on all the controllers to make them secure.

Account Controller

You have option to implement your own custom AccountController, which will handle sign-in and sign-out flows. But in this demo, we are not going to implement new AccountController for this demo.

Microsoft.Identity.Web.UI package has AccountController under MicrosoftIdentity area (area is MVC area). You can use AddMicrosoftIdentityUI middleware to use the default implementation.

The completed startup file is shown in below snippet:

Tip for Razor Views Web App

While our focus is on MVC web application, there is one finding which I want to explicitly mention. It is about Razor views web application.

When I created web application with Razor views, login worked. But on click on logout, the logout was not working.

I had to add the MVC route configuration in (Startup.Configure method) as shown in below snapshot:

Login and Logout Options

Locate _Layout.cshtml file. In default Web application template (be it Razor view application or MVC application), this file has navbar code. This navbar items are represented by unordered list (UL html element).

In that list add below code after existing list items. This will show logged in user’s ID and logout button if user is logged in.

Run and Verify

You can run the application now. As soon as the application gets redirected to Azure for login. You can enter credentials to view the home page. The Signout also redirects user away from the application.

In this article, we have seen how easy it is to secure your application using Azure AD and MSAL. I hope you find this article helpful. Let me know your thoughts.

Leave a ReplyCancel reply