In this article, let’s have a look at how .NET Core Angular Web Application can be protected using Azure AD B2C.

What we need?

For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

We will need to have Azure AD B2C instance. Refer my previous blog for detailed steps for the same.

After creating Azure AD B2C, make sure you create the user flows as described in this post. We have created only sign up and sign in flow in this blog. But you can follow same steps to create a reset password flow.

Create Angular App

Create .NET Core Web Application using Visual Studio 2019.

Make sure Angular option is selected in the project template type. This would create the project.

For people who do not work with this type of project template, the Angular app is inside the ClientApp folder. The .NET Core web application has below middlewares which serve the Angular application.

• AddSpaStaticFiles
• UseSpaStaticFiles
• UseSpa

Visual studio 2019 .NET Core Angular web application template uses Angular 8 as of today. If you want to use more latest version, you can delete the contents of ClientApp folder. Then create a new Angular app in same folder using Angular CLI.

Now, when we run our application, we should be able to see a web page like below. We will try to make Home page anonymous, but the Counter and Fetch data pages would require user to be logged in to our application.

Let’s get started.

Azure AD App Registration

Login to Azure portal and switch to the Azure AD B2C directory. Then search for Azure AD B2C in the search box form the navigation. A panel as shown below will open. Select App registrations.

Now, click on New registration to register the new Angular application we just created. Then we need to enter below details in the new application registration panel:

• Name, readable name for our registered application
• Supported account types, keep this to default. The default option means user can login using Azure AD B2C, but they cannot access Azure resources
• Redirect URI, the application URI where user will be redirected to after successful login.
• Permissions, let this also be default. This will grant permission for openid and offline_access permissions.

Then click the Register button. Note down the application id of this registration. This would be required in the authentication configurations in Angular app.

Azure AD Authentication

Next, the registered application details panel will open after you click on Register button. There, select Authentication option and Select both ID Tokens and Access Tokens check-boxes and hit Save button.

Install MSAL.js

Now, lets move to our angular application. Install the MSAL packages using below command. The below command will install two packages – MSAL and MSAL-Angular.

Make sure to run the below command in folder ClientApp.

npm install msal @azure/msal-angular --save

App-Config.ts

Add this TS file in ~/ClientApp/src/app folder. This file should have a code as shown below. Below are the main sections

• User Flows and Authorities, here we need to specify the user flows which we have created in the Azure AD B2C. Also update the name of Azure AD B2C in the URLs
• Web API Scopes and URLs, these are the protected APIs which our Angular app needs to call. This data is used to populated protectedResourcesMap. For the purpose of this post, we do not need this. So you can keep it as it is.
• Authentication Configurations, here we need to update appropriate Application ID (i.e. client id) which we have got after registering this app in Azure AD B2C. Also, update application URLs.
• login request and token requests, specify the scopes required for login and for access tokens required to access APIs respectively.
• protectedResourcesMap, this is collection of APIs where each item has URL and its respective scope. These are the APIs which our application is supposed to call. The respective scopes are required to be granted in the access token in order to get access to API.
• msalAngularConfig, these are configurations which are required to be specified in Angular module.

App.Module.ts

Next step is to add the above configurations in Angular app module. There are four things which are required to be done:

• MsalModule, import this module
• MsalInterceptor, add this interceptor in providers collection. This interceptor is an HTTP_INTERCEPTOR which will automatically get the access token and will embed it in the APIs that our application needs to call. This is out of scope for this blog.
• MSAL_CONFIG, a function which will return authentication settings from app-config.ts
• MSAL_CONFIG_ANGULAR, a function which will return angular specific settings from app-config.ts
• MsalService, import this service as this service exposes APIs to login and logout.

The module should be as shown in below snippet:

App-Routing.Module.ts

By default, when a new .NET Core Angular application project is created, the routing configurations are in the app.module.ts. As you already might have realized, the routing configurations were not present in the app module file.

So, add this new file app-routing.module.ts. This file will specify that Counter and Fetch Data routing options will have MsalGuard, which checks if user is logged in. If not, it redirects user to login page.

The app routing file will be as shown below:

App.Component.ts

Here, we need to setup few things on initialization of the app component. Some of those things are:

• subscribe to msal:loginSuccess, this handler is called after successful login. Here the code checks the tfp claim from the token and check if this matches with the name of sign up and sign in flow name.
• subscribe to msal:loginFailure, this handler is called if login is failed. This can be used to check if the error is any special code returned by Azure AD.
• handleRedirectCallback, to check if the login was successful. If not, to log the error and show it to user.
• setLogger, this method is to enable the logging during the authentication flow.

In addition to this, there are also few methods to initialize login and logout of users. Below is the complete code of the application:

App.Component.html

For facilitating login and logout from the application, let’s add the buttons in the app component view as shown in below code.

Run and Verify

Now, if we run the application, it will show the home page. If we click on login button or counter button from nav bar, it will redirect user to login page. We can sign up using our email ids and then sign in using those same email address.

I hope you enjoyed this article. Let me know your thoughts.