MSAL 2 Angular

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import {
  MsalInterceptor,
  MsalModule,
  MsalService,
  MSAL_INSTANCE,
  MSAL_INTERCEPTOR_CONFIG,
} from "@azure/msal-angular";

import { AppComponent } from "./app.component";
import { MSALInstanceFactory, MSALInterceptorConfigFactory } from "./msal";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    MsalModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    MsalService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

appsettings.json

"AzureAd": {
        // Login URL of Microsoft
        "Instance": "https://login.microsoftonline.com/",

        // Client ID of our API App Registration in AAD. We will create that
        // during our lesson. For more information see
        // https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app
        "ClientId": "...",

        // Our school's AAD tenant. We will look that up during our lesson.
        "TenantId": "91fc072c-edef-4f97-bdc5-cfb67718ae3a",

        // Our API App's unique URI as specified during app registration.
        // For more details see https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-expose-web-apis
        "Audience": "api://..."
    }

getUsers.ts

  getUsers() {
    let params = new HttpParams().set("$top", "10");
    if (this.userNameFilter) {
      params = params.set(
        "$filter",
        `startsWith(displayName, '${this.userNameFilter}')`
      );
    }
    let url = `https://graph.microsoft.com/v1.0/users?${params.toString()}`;
    this.client
      .get<IODataResult<MicrosoftGraph.User[]>>(url)
      .subscribe((users) => (this.users = users.value));
  }

msal.ts

import { MsalInterceptorConfiguration } from "@azure/msal-angular";
import {
  BrowserCacheLocation,
  InteractionType,
  IPublicClientApplication,
  PublicClientApplication,
} from "@azure/msal-browser";
import { environment } from "src/environments/environment";

// Create a client application for a configured AAD app
// For more details see https://azuread.github.io/microsoft-authentication-library-for-js/ref/classes/_azure_msal_browser.publicclientapplication.html
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.aadClientId,
      authority: `https://login.microsoftonline.com/${environment.aadTenantId}`,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
    },
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();

  // Define which permissions (=scopes) we need for Microsoft Graph
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/', [
    'user.read',
    'User.ReadBasic.All',
  ]);

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