DEV Community: Adam Swanson

Adding Authentication with Azure AD to a .NET Angular Web App with MSAL

Adam Swanson — Thu, 11 Mar 2021 20:13:59 +0000

I recently went through this process and was disappointed at the lack of documentation. Then I realized that the latest version of the msal-angular library I used was only 8 days old at the time of writing, so that explains some things.

In any case, I've decided to write out my steps for anyone else looking to setup a similar project with this type of authentication. To walk through this process, we'll be creating a web app from scratch and deploying it to a new App Service in Azure. We'll also register the app in Azure AD.

You can find the completed web app here, or you can follow along and create it yourself using the steps below.

To summarize, here's what we're building:

Web app with .NET 5 Web API and Angular 11, hosted in an Azure App Service
Authentication with Azure AD using the Microsoft Identity platform and OAuth 2.0 authorization code flow, and the @azure/msal-angular@2.0.0-beta.0 package

And here's what we're gonna do:

Create a new project from the .NET Angular template
Upgrade the Angular app from 8 to 11
Deploy the app to an App Service
Add a new app registration in Azure AD
Configure the app redirect URIs to ensure eligibility for the Authorization Code Flow with PKCE.
Configure the .NET Web API for authentication, authorization, and CORS
Install MSAL and other dependencies for Angular
Configure MSAL and Angular app for authentication
Redeploy to App Service

Requirements:

Microsoft Azure account with free-tier subscription (for Azure AD and App Service)
Visual Studio Code (for running and editing the app)
VSCode Azure App Service extension (for publishing to the App Service)
.NET 5.0 (for running the app and adding packages)
Node and npm (for updating Angular, installing MSAL, and Angular CLI)
Angular CLI (for generating the AuthService)

Create the web app

Generate the app using the .NET Angular template
- dotnet new angular -o my-authenticated-app
Trust the certificate, if needed
- dotnet dev-certs https --trust
Upgrade Angular from 8 to 11
- From the ClientApp folder, run these commands:
- ng update @angular/core@8 @angular/cli@8
- ng update @angular/core@9 @angular/cli@9
- Remove export { renderModule, renderModuleFactory } from '@angularplatform-server' from main.ts
- Change progress: false to progress: true in angular.json
- npm uninstall @nguniversal/module-map-ngfactory-loader
- Remove ModuleMapLoaderModule import and reference from app.server.module.ts
- ng add @angular/localize
- ng update @angular/cli@10 @angular/core@10 rxjs
- ng update @angular/cli@11 @angular/core@11 --force
- npm uninstall node-sass
- npm i -g npm-check-updates
- ncu -u
- npm i
- npm update
- npm audit fix
- npm i -D typescript@4.1.5
Run the app and verify it starts correctly. You should get a page like this:

View the "Fetch data" page. It should load the weather data. Later, after we add authentication, this page will require authentication and will not load the weather data unless a user is logged in.

Create the App Service

In the Azure portal, under App Services, click "Create"
Select your Azure subscription and resource group. Set a name under Instance Details, set Publish to "Code", Runtime stack to ".NET 5", Operating System to "Windows", and select a region. Also select an appropriate Windows Plan. Click "Review + create".
Under the Overview section of the App Service, note the URL listed under Essentials. We will need this when configuring the redirect URIs in the app registration.

Add a new app registration in Azure AD

In the Azure Portal, open Azure Active Directory
Under the Manage menu, open "App registrations" and click "New registration"
Enter a name and select the supported account types. Also create a Redirect URI for https://localhost:5001/ and ensure the type is set to "Single-page application (SPA)". Click Register.
On the Overview screen for the app registration, you should see an Application (client) ID and Directory (tenant) ID. Make note of these as we'll need them later when we configure the web app for authentication.
Under the Authentication section, under Single-page application Redirect URIs, add a new URI for the URL of the App Service (i.e. https://myauthenticatedapp.azurewebsites.net/)

Deploy to App Service

From project root: dotnet publish -c Release -o publish
Using the Azure App Service extension in Visual Studio Code, right-click the publish folder and click "Deploy to Web App". Select your newly created App Service and click "Deploy"
View the newly deployed web app with the URL provided in the Overview section of the App Service. It should look the same as when you ran the app locally.

Configure .NET Web API

Configure appsettings.json
- Add a new section titled "AzureAd". Replace ENTER_CLIENT_ID_GUID_HERE with your Application (client) ID listed in the app registration in Azure AD, and replace ENTER_TENANT_ID_GUID_HERE with the Directory (tenant) ID.
```
"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "ENTER_CLIENT_ID_GUID_HERE",
    "TenantId": "ENTER_TENANT_ID_GUID_HERE",
    "Audience": "ENTER_CLIENT_ID_GUID_HERE"
}
```
Install NuGet packages
- dotnet add my-authenticated-app.csproj package Microsoft.AspNetCore.Authentication.JwtBearer
- dotnet add my-authenticated-app.csproj package Microsoft.Identity.Web

Setup Startup.cs

Add the following uncommented code blocks:
ConfigureServices()

    public void ConfigureServices(IServiceCollection services)
    {
        //services.AddControllersWithViews();
        //services.AddSpaStaticFiles(configuration =>
        //{
        //    configuration.RootPath = "ClientApp/dist";
        //});

        services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApi(Configuration, "AzureAd");
        services.AddAuthorization();

        ...
    }

Configure()

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //if (env.IsDevelopment())
        //{
        //    app.UseDeveloperExceptionPage();
        //}
        //else
        //{
        //    app.UseExceptionHandler("/Error");
        //    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        //    app.UseHsts();
        //}

        app.UseCors();
        //app.UseHttpsRedirection();
        //app.UseStaticFiles();
        //if (!env.IsDevelopment())
        //{
        //    app.UseSpaStaticFiles();
        //}

        //app.UseRouting();
        app.UseAuthentication();
        app.UseAuthorization();

        ...
    }

Add the Authorize attribute to WeatherController

[Authorize]
//[ApiController]
//[Route("[controller]")]
//public class MyController : ControllerBase
//{
//}

Configure Angular app with MSAL

Install packages

From the ClientApp folder, run npm i msal @azure/msal-browser @azure/msal-angular

Configure environment settings

Replace ENTER_DEV_URL_HERE with your development URL (i.e. "https://localhost:5001/")
Replace ENTER_PUBLIC_URL_HERE with the App Service's URL (i.e. "https://myauthenticatedapp.azurewebsites.net/")
Replace ENTER_CLIENT_ID_GUID_HERE with the client ID from the app registration
Replace ENTER_TENANT_NAME_HERE with the tenant name. This can be found in the Azure portal URL when viewing the App Service page ("https://portal.azure.com/#@YOUR_TENANT_NAME.onmicrosoft.com/resource/subscriptions/and-so-on")

environment.ts

```ts
export const environment = {
  production: false,
  redirectUrl: 'ENTER_DEV_URL_HERE',
  clientId: 'ENTER_CLIENT_ID_GUID_HERE',
  tenantName: 'ENTER_TENANT_NAME_HERE'
};
```

environment.prod.ts

```ts
export const environment = {
  production: true,
  redirectUrl: 'ENTER_PUBLIC_URL_HERE',
  clientId: 'ENTER_CLIENT_ID_GUID_HERE',
  tenantName: 'ENTER_TENANT_NAME_HERE'
};
```

Configure MSAL in app.module.ts

Add the following imports, functions, and module imports, providers, and bootstraps

...
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
import { environment } from '../environments/environment';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.clientId,
      authority: `https://login.microsoftonline.com/${environment.tenantName}.onmicrosoft.com/`,
      redirectUri: environment.redirectUrl
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(`${environment.redirectUrl}weatherforecast`, [`${environment.clientId}/.default`]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: [`${environment.clientId}/.default`]
    },
  };
}

@NgModule({
  imports: [
    ...,
    MsalModule
  ],
  providers: [
    ...,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [
    ...,
    MsalRedirectComponent
  ]
})
export class AppModule { }

Create an auth service

- From the `ClientApp` folder, run `ng g s auth`

- `auth.service.ts`

    ```ts
    import { Inject, Injectable } from '@angular/core';
    import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
    import { AccountInfo, AuthenticationResult, InteractionStatus, InteractionType, PopupRequest, RedirectRequest } from '@azure/msal-browser';
    import { Subject } from 'rxjs';
    import { filter, takeUntil } from 'rxjs/operators';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {
      loggedIn = false;
      private readonly _destroying$ = new Subject<void>();

      constructor(
        @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
        private authService: MsalService,
        private msalBroadcastService: MsalBroadcastService) { }

      updateLoggedInStatus() {
        this.msalBroadcastService.inProgress$
          .pipe(
            filter((status: InteractionStatus) => status === InteractionStatus.None),
            takeUntil(this._destroying$)
          )
          .subscribe(() => {
            this.setLoggedIn();
            this.checkAndSetActiveAccount();
          });
      }

      login() {
        if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
          this.loginWithPopup();
        } else {
          this.loginWithRedirect();
        }
      }

      getActiveAccount(): AccountInfo | null {
        return this.authService.instance.getActiveAccount();
      }

      private checkAndSetActiveAccount() {
        /**
        * If no active account set but there are accounts signed in, sets first account to active account
        * To use active account set here, subscribe to inProgress$ first in your component
        * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
        */
        let activeAccount = this.authService.instance.getActiveAccount();

        if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
          let accounts = this.authService.instance.getAllAccounts();
          this.authService.instance.setActiveAccount(accounts[0]);
        }
      }

      private setLoggedIn() {
        this.loggedIn = this.authService.instance.getAllAccounts().length > 0;
      }

      private loginWithPopup() {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
            .subscribe((response: AuthenticationResult) => {
              this.authService.instance.setActiveAccount(response.account);
            });
        } else {
          this.authService.loginPopup()
            .subscribe((response: AuthenticationResult) => {
              this.authService.instance.setActiveAccount(response.account);
            });
        }
      }

      private loginWithRedirect() {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
        } else {
          this.authService.loginRedirect();
        }
      }

      logout() {
        this.authService.logout();
      }

      destroy() {
        this._destroying$.next(undefined);
        this._destroying$.complete();
      }
    }
    ```

Add the app-redirect component to index.html

<body>
  <app-root>Loading...</app-root>
  <app-redirect></app-redirect>
</body>

Implement AuthService in the AppComponent

- `app.component.ts`

    ```ts
    import { Component, OnInit } from '@angular/core';
    import { AuthService } from './auth.service';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {
      title = 'app';

      constructor(public authService: AuthService) { }

      ngOnInit(): void {
        this.authService.updateLoggedInStatus();
      }

      login() {
        this.authService.login();
      }

      logout() {
        this.authService.logout();
      }
    }
    ```

- `app.component.html`

    ```html
    <body>
      <app-nav-menu [loggedIn]="authService.loggedIn" (loginClicked)="login()" (logoutClicked)="logout()"></app-nav-menu>
      <div class="container">
        <router-outlet></router-outlet>
      </div>
    </body>
    ```

Update the NavMenuComponent with login/logout buttons

- `nav-menu.component.ts`

    ```ts
    import { Component, EventEmitter, Input, Output } from '@angular/core';

    @Component({
      selector: 'app-nav-menu',
      templateUrl: './nav-menu.component.html',
      styleUrls: ['./nav-menu.component.css']
    })
    export class NavMenuComponent {
      isExpanded = false;
      @Input() loggedIn: boolean;
      @Output() loginClicked = new EventEmitter<void>();
      @Output() logoutClicked = new EventEmitter<void>();

      collapse() {
        this.isExpanded = false;
      }

      toggle() {
        this.isExpanded = !this.isExpanded;
      }

      login() {
        this.loginClicked.emit();
      }

      logout() {
        this.logoutClicked.emit();
      }
    }
    ```

- `nav-menu.component.html`

    ```html
    <header>
      <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
          <a class="navbar-brand" [routerLink]="['/']">my_authenticated_app</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
            aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [ngClass]="{ show: isExpanded }">
            <ul class="navbar-nav flex-grow">
              <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }">
                <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
              </li>
              <li class="nav-item" [routerLinkActive]="['link-active']">
                <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a>
              </li>
              <li class="nav-item" [routerLinkActive]="['link-active']">
                <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a>
              </li>
              <li>
                <button class="btn btn-primary" (click)="login()" *ngIf="!loggedIn">Login</button>
                <button class="btn btn-primary" (click)="logout()" *ngIf="loggedIn">Logout</button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    ```

Run the app and test authentication

- When viewing the Fetch Data page, if you are not logged in, you will be redirected to the Microsoft login screen. If you are not redirected, click the Login button.



When logging in for the first time, you will need to approve the app's permissions



After successfully logging in, refresh the Fetch Data page. The weather data should load.

Redeploy to App Service

Following the same steps as before, publish the web app and deploy it to the App Service.
Load the webpage and verify the authentication works.

Things to Consider

For security purposes, you can configure the appsettings.json settings in the Configuration section in the App Service instead. This way, you aren't committing the client and tenant IDs in source control.
For each API endpoint you want to secure, add the Authorize attribute to the controller and add a new entry to the protectedResourceMap in app.module.ts with the given endpoint.

Conclusion

Authentication can be tricky, but with the msal-angular package and the Microsoft Identity platform it's rather easy. With these libraries handling the technical details, we just have to handle the configuration.

Differences between Traditional and Event-Driven Systems

Adam Swanson — Thu, 11 Mar 2021 19:58:40 +0000

Application state is often treated like food in a fridge. If we need something, we take it out, use what we need, and put it back. The same is usually done with data: we read the data we need, manipulate it, and write it back to the same place.

This approach has its advantages: managing data becomes very simple. Data can be read from, say, a database, and it can be updated in the same format and in the same place. However, there are downsides: the app's state becomes one big blob of data. Sure, it's structured and organized, but how did it get to its current state? There's no record of the steps it took to get there. All we know is we have data.

Let's use accounting as an example. Say we spend $10. How do we update our balance? Do we take our current balance, remove $10, and update it? If we did that, we would have no way of tracking our account history. Instead, we add a record of it in our account ledger. To get the new balance, we add up all the transactions in the ledger. We never update the balance directly.

There are a few key differences here. The first is how the balance is defined. The naive approach is to treat it as a value that can be changed at-will. A better approach is to treat it as the result of changes. The second is the distinction between updating and reading. In the first approach, we write to the balance by updating a single value, and to get the balance we read that same value. In the second approach, we write by appending a new change to a log, and we read by adding up all of those changes.

Event-driven systems introduce these same differences. If we treat each change to the system as an event (like EmailChanged or ItemAddedToCart) and store these events, we can add them up to get our app's state. A common example is a version control system like Git. Each change is represented as a commit, and by adding up all the commits we can produce the codebase.

By storing each change like this, we get several advantages. One advantage is we can represent the app's state in any form we want. If we want to use a database, JSON, or something in memory, we can build up a model of the app's state from the events. In fact, we could have several models. Another advantage is we can see all the changes that were made to the system. Log messages can be helpful, but they don't often include all the necessary details to understand what's going on. Events, on the other hand, have all the details already baked in.

When implementing an event-driven system, the app's architecture must be updated to support an event-driven approach. If a change is made, one can no longer reach into the data and update it themselves. Instead, they simply raise an event with the details of what needs to be changed. This event is then stored and processed by an event handler that can build up a model of the app's state in, say, a database. This database can then be used to read the app's state without needing to touch any events.

There are several pros to event-driven systems. First, they provide a log of every change made to the system. These are represented in the events. Second, they give the ability to see what the state was at any point in time. This can be done by building up a model of the app's state from the events up to a certain time. Third, the app state can be rebuilt from the events at any time.

The biggest con to event-driven systems is complexity. It becomes harder to follow the flow of control through the system when most of it happens in event handlers. By raising an event, you don't know what, if anything, will handle that event. It is up to a handler, somewhere, to be watching for it. This is much harder to follow than a simple call like cartService.addItem().

Keep these differences in mind when considering an event-driven architecture for your next project. Not all projects will benefit from this approach, but if the pros outweigh the cons, it may be a good choice.

Updating the .NET Core Angular template from Angular 8 to 10

Adam Swanson — Thu, 11 Mar 2021 19:56:53 +0000

Creating a new .NET Core project with the Angular template is pretty handy, but it starts you out on Angular 8. The upgrade process to version 10 is not very straightforward and can cause some serious headaches if you're not sure what to look out for. Thankfully, I recently completed this process and wanted to share the steps I took to perform a successful upgrade.

Note: a lot of these steps can be found on Angular's Update Guide here: https://update.angular.io/

All of the following commands should be run from <project-directory>/ClientApp

Update the current version of Angular 8
- ng update @angular/core@8 @angular/cli@8
Upgrade to version 9
- ng update @angular/core@9 @angular/cli@9
  - Remove export { renderModule, renderModuleFactory } from '@angular/platform-server' from main.ts
  - Without removing these exports, the following error will be thrown at startup: Uncaught SyntaxError: Strict mode code may not include a with statement
  - More info: https://stackoverflow.com/questions/60114758/uncaught-syntaxerror-strict-mode-code-may-not-include-a-with-statement
- ng add @angular/localize
  - This is required since the Angular template seems to rely on Angular's internationalization system (i18n)
- Change progress: false to progress: true in angular.json
  - Without changing this value, the app will fail to start and the following error will be displayed on startup: TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds
  - More info: https://stackoverflow.com/questions/60189930/timeoutexception-the-angular-cli-process-did-not-start-listening-for-requests-w
- npm uninstall @nguniversal/module-map-ngfactory-loader
  - Remove ModuleMapLoaderModule import and reference from app.server.module.ts
Upgrade to version 10
- ng update @angular/cli @angular/core rxjs
Upgrade dependencies
- npm install -g npm-check-updates
  - This package will help upgrade all dependencies to their latest version
- ncu -u
- npm install
- npm update
- npm audit fix

Voila! You are now running your .NET Core Angular project in version 10. Again, these are just the specific steps for going from version 8 to 10. To upgrade to other versions, check out Angular's Update Guide at https://update.angular.io/