Tutorial: Erstellen einer Angular-Anwendung und Vorbereiten der Anwendung für die Authentifizierung

Artikel
11/13/2024

Nach Abschluss der Registrierung kann ein Angular-Projekt mit Angular CLI (Command Line Interface) erstellt werden. In diesem Tutorial wird gezeigt, wie Sie eine Angular-Single-Page-Webanwendung mithilfe der Angular CLI und Dateien, die für die Authentifizierung und Autorisierung erforderlich sind, erstellen.

In diesem Tutorial wird Folgendes durchgeführt:

Erstellen eines neuen Angular-Projekts
Konfigurieren der Einstellungen für die Anwendung
Hinzufügen von Authentifizierungscode zur Anwendung

Voraussetzungen

Abschluss der Voraussetzungen und Schritte im Tutorial: Registrieren einer Anwendung
Installieren der Agular CLI
Installieren Sie Node.js.
Visual Studio Code

Erstellen eines neuen Angular-Projekts

Führen Sie die folgenden Schritte aus, um das Angular-Projekt von Grund auf neu zu erstellen:

Öffnen Sie ein Terminalfenster, und führen Sie den folgenden Befehl aus, um ein neues Angular-Projekt zu erstellen:
```
ng new msal-angular-tutorial --routing=true --style=css --strict=false
```
Der Befehl erstellt ein neues Angular-Projekt mit dem Namen msal-angular-tutorial mit aktiviertem Routing, CSS zum Formatieren und deaktiviertem striktem Modus.
Wechseln Sie in das Projektverzeichnis:
```
cd msal-angular-tutorial
```
Installieren von App-Abhängigkeiten
```
npm install @azure/msal-browser @azure/msal-angular bootstrap
```
Der Befehl npm install @azure/msal-browser @azure/msal-angular bootstrap installiert die Azure MSAL-Browser-, Azure MSAL Angular- und Bootstrap-Pakete.
Öffnen Sie angular.json, und fügen Sie den CSS-Pfad von Bootstrap zum styles-Array hinzu:
```
"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
```
Der Code fügt das Bootstrap-CSS dem Formatvorlagenarray in der angular.json-Datei hinzu.
Generieren der Komponenten „Startseite” und „Profil”:
```
ng generate component home
ng generate component profile
```
Die Befehle generieren die Komponenten „Startseite” und „Profil” im Angular-Projekt.

Entfernen unnötiger Dateien und Code aus dem Projekt:

rm src/app/app.component.css
rm src/app/app.component.spec.ts
rm src/app/home/home.component.css
rm src/app/home/home.component.spec.ts
rm src/app/profile/profile.component.css
rm src/app/profile/profile.component.spec.ts

Die Befehle entfernen unnötige Dateien und Code aus dem Projekt.

Benennen Sie app.routes.ts mithilfe von Visual Studio Code in app-routing.module.ts um, und aktualisieren Sie alle Verweise auf app.routes.ts in der gesamten Anwendung.
Benennen Sie app.config.ts mithilfe von Visual Studio Code in app.module.ts um, und aktualisieren Sie alle Verweise auf app.config.ts in der gesamten Anwendung.

Nachdem Sie diese Schritte ausgeführt haben, sollte die Projektstruktur wie folgt aussehen:

.
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── home
│   │   │   ├── home.component.html
│   │   │   └── home.component.ts
│   │   └── profile
│   │       ├── profile.component.html
│   │       └── profile.component.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.css
├── tsconfig.app.json
└── tsconfig.json

Konfigurieren der Einstellungen für die Anwendung

Wir verwenden die Werte, die während der App-Registrierung aufgezeichnet wurden, um die Anwendung für die Authentifizierung zu konfigurieren. Führen Sie folgende Schritte aus:

Öffnen Sie die Datei src/app/app.module.ts, und ersetzen Sie den Inhalt durch den folgenden Code:

// Required for Angular multi-browser support
import { BrowserModule } from '@angular/platform-browser';

// Required for Angular
import { NgModule } from '@angular/core';

// Required modules and components for this application
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';

// HTTP modules required by MSAL
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

// Required for MSAL
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';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
      clientId: "Enter_the_Application_Id_Here",
      // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
      // Must be the same redirectUri as what was provided in your app registration.
      redirectUri: "http://localhost:4200",
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE
    }
  });
}

// MSAL Guard is required to protect routes and require authentication before accessing protected routes
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read']
    }
  };
}

// Create an NgModule that contains the routes and MSAL configurations
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    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: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

Der Code richtet MSAL für Benutzerauthentifizierung und API-Schutz ein. Er konfiguriert die App mit MsalInterceptor, um API-Anforderungen zu schützen, und MsalGuard, um Routen zu schützen, während wichtige Komponenten und Dienste für die Authentifizierung definiert werden. Ersetzen Sie die folgenden Werte durch die Werte aus dem Microsoft Entra Admin Center.

Ersetzen Sie Enter_the_Application_Id_Here durch Application (client) ID aus der App-Registrierung.
Ersetzen Sie Enter_the_Tenant_Info_Here durch Directory (tenant) ID aus der App-Registrierung.

Speichern Sie die Datei .

Hinzufügen von Authentifizierungscode zur Anwendung

Um die Benutzerauthentifizierung und Sitzungsverwaltung mit MSAL Angular zu verarbeiten, müssen Sie src/app/app.component.ts aktualisieren.

Öffnen Sie die src/app/app.component.ts-Datei und ersetzen Sie den Inhalt durch den folgenden Code:

// Required for Angular
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';

// Required for MSAL
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { EventMessage, EventType, InteractionStatus, RedirectRequest } from '@azure/msal-browser';

// Required for RJXS
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular - MSAL Example';
  loginDisplay = false;
  tokenExpiration: string = '';
  private readonly _destroying$ = new Subject<void>();

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

  // On initialization of the page, display the page elements based on the user state
  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
        .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.setLoginDisplay();
      });

      // Used for storing and displaying token expiration
      this.msalBroadcastService.msalSubject$.pipe(filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)).subscribe(msg => {
      this.tokenExpiration=  (msg.payload as any).expiresOn;
      localStorage.setItem('tokenExpiration', this.tokenExpiration);
    });
  }

  // If the user is logged in, present the user with a "logged in" experience
  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }

  // Log the user in and redirect them if MSAL provides a redirect URI otherwise go to the default URI
  login() {
    if (this.msalGuardConfig.authRequest) {
      this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  // Log the user out
  logout() {
    this.authService.logoutRedirect();
  }

  ngOnDestroy(): void {
    this._destroying$.next(undefined);
    this._destroying$.complete();
  }
}

Der Code integriert MSAL in Angular, um die Benutzerauthentifizierung zu verwalten. Er lauscht auf Anmeldestatusänderungen, zeigt den Anmeldestatus an, behandelt Tokenakquisitionsereignisse und stellt Methoden zum Anmelden von Benutzern basierend auf der Microsoft Entra-Konfiguration bereit.

Speichern Sie die Datei .

Nächste Schritte

Tutorial: Hinzufügen von funktionalen Komponenten zu einer Angular-App

Freigeben über