Freigeben über

Lernprogramm: Erstellen einer Angular-Einzelseiten-App und Vorbereiten der Authentifizierung

Gilt für:Grüner Kreis mit weißem Häkchen. Mitarbeitermandanten Grüner Kreis mit weißem Häkchen. Externe Mandanten (weitere Informationen)

Dieses Lernprogramm ist der erste Teil einer Reihe, die das Erstellen einer Angular-Einzelseitenanwendung (Single Page Application, SPA) veranschaulicht, die Authentifizierung hinzufügt und Benutzerdaten mithilfe der Microsoft Identity Platform extrahiert.

In diesem Tutorial führen Sie Folgendes durch:

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

Voraussetzungen

  • Ein Mandant für Mitarbeitende. Sie können Ihr Standardverzeichnis verwenden oder einen neuen Mandanten einrichten.
  • Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie die folgenden Umleitungs-URIs mithilfe der Konfiguration der Plattform für die Einzelseitenanwendung hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
    • Umleitungs-URI: http://localhost:4200/.

Erstellen eines neuen Angular-Projekts

In diesem Abschnitt erstellen Sie ein neues Angular-Projekt mit der Angular CLI in Visual Studio Code. Wählen Sie die entsprechende Registerkarte basierend auf Ihrem Mandantentyp aus.

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

  1. Ö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.

  2. Wechseln Sie in das Projektverzeichnis:

    cd msal-angular-tutorial

  3. App-Abhängigkeiten installieren

    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.

  4. Ö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 in das Styles-Array in der angular.json-Datei hinzu.

  5. 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.

  6. 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.

  7. 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.

  8. 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 von Anwendungseinstellungen

In diesem Abschnitt konfigurieren Sie die Anwendungseinstellungen für die Authentifizierung. Wir verwenden die Werte, die während der App-Registrierung aufgezeichnet wurden, um die Anwendung für die Authentifizierung zu konfigurieren. Wählen Sie die entsprechende Registerkarte basierend auf Ihrem Mandantentyp aus.

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:

  1. Ö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 Interceptor is required to request access tokens in order to access the protected resource (Graph)
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

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

// 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.

  2. Speichern Sie die Datei .

Hinzufügen von Authentifizierungscode zur Anwendung

In diesem Abschnitt fügen Sie der Anwendung Authentifizierungscode hinzu, um die Benutzerauthentifizierung und Sitzungsverwaltung zu verarbeiten. Wählen Sie die entsprechende Registerkarte basierend auf Ihrem Mandantentyp aus.

  1. Ö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. Es überwacht Anmeldestatusänderungen, zeigt den Anmeldestatus an, verarbeitet Tokenakquisitionsereignisse und stellt Methoden zum Anmelden oder Abmelden von Benutzern basierend auf der Microsoft Entra-Konfiguration bereit.

  2. Speichern Sie die Datei .

Nächste Schritte

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