Udostępnij za pośrednictwem


Samouczek: tworzenie jednostronicowej aplikacji Angular i przygotowywanie jej do uwierzytelniania

Dotyczy: Zielony okrąg z białym symbolem zaznaczenia wyboru. Najemcy usługi Workforce Zielony okrąg z białym symbolem zaznaczenia wyboru. Zewnętrzni najemcy (więcej informacji)

Ten samouczek jest pierwszą częścią serii, która pokazuje tworzenie jednostronicowej aplikacji angular (SPA), dodawanie uwierzytelniania i wyodrębnianie danych użytkownika przy użyciu platformy tożsamości firmy Microsoft.

W tym samouczku nauczysz się następujących rzeczy:

  • Tworzenie nowego projektu Angular
  • Konfigurowanie ustawień aplikacji
  • Dodawanie kodu uwierzytelniania do aplikacji

Wymagania wstępne

  • Najemca zasobów pracowniczych. Możesz użyć swojego katalogu domyślnego lub skonfigurować nowego najemcę.
  • Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
    • Identyfikator aplikacji (klienta)
    • Identyfikator katalogu (klienta)
  • Dodaj następujące identyfikatory URI przekierowania, używając konfiguracji platformy aplikacji jednostronicowej. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
    • identyfikator URI przekierowania: http://localhost:4200/.

Tworzenie nowego projektu Angular

W tej sekcji utworzysz nowy projekt Angular przy użyciu interfejsu wiersza polecenia platformy Angular w programie Visual Studio Code. Wybierz odpowiednią kartę na podstawie typu dzierżawy.

Aby skompilować projekt Angular od podstaw, wykonaj następujące kroki:

  1. Otwórz okno terminalu i uruchom następujące polecenie, aby utworzyć nowy projekt Angular:

    ng new msal-angular-tutorial --routing=true --style=css --strict=false
    

    Polecenie tworzy nowy projekt Angular o nazwie msal-angular-tutorial z włączonym routingiem, stylami CSS i wyłączonym trybem ścisłym.

  2. Przejdź do katalogu projektu:

    cd msal-angular-tutorial
    
  3. Zainstaluj zależności aplikacji:

    npm install @azure/msal-browser @azure/msal-angular bootstrap
    

    npm install @azure/msal-browser @azure/msal-angular bootstrap Polecenie instaluje pakiety Azure MSAL Browser, Azure MSAL Angular i Bootstrap.

  4. Otwórz angular.json i dodaj ścieżkę CSS Bootstrap do tablicy styles :

    "styles": [
        "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    

    Kod dodaje kod Bootstrap CSS do tablicy stylów w angular.json pliku.

  5. Generowanie składników strony głównej i profilu:

    ng generate component home
    ng generate component profile
    

    Polecenia generują komponenty Strona główna i Profil w projekcie Angular.

  6. Usuń niepotrzebne pliki i kod z projektu:

    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
    

    Polecenia usuwają niepotrzebne pliki i kod z projektu.

  7. Zmień nazwę app.routes.ts na app-routing.module.ts przy użyciu programu Visual Studio Code i zaktualizuj wszystkie odwołania app.routes.ts w całej aplikacji.

  8. Zmień nazwę app.config.ts na app.module.ts przy użyciu programu Visual Studio Code i zaktualizuj wszystkie odwołania do app.config.ts w całej aplikacji.

Po wykonaniu tych kroków struktura projektu powinna wyglądać następująco:

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

Konfigurowanie ustawień aplikacji

W tej sekcji skonfigurujesz ustawienia aplikacji na potrzeby uwierzytelniania. Użyjemy wartości zarejestrowanych podczas rejestracji aplikacji, aby skonfigurować aplikację do uwierzytelniania. Wybierz odpowiednią kartę na podstawie typu dzierżawy.

Użyjemy wartości zarejestrowanych podczas rejestracji aplikacji, aby skonfigurować aplikację do uwierzytelniania. Wykonaj te kroki:

  1. src/app/app.module.ts Otwórz plik i zastąp zawartość następującym kodem:

    // 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 { }
    

    Kod konfiguruje bibliotekę MSAL na potrzeby uwierzytelniania użytkowników i ochrony interfejsu API. Konfiguruje aplikację z MsalInterceptor do zabezpieczania żądań API i MsalGuard do ochrony tras, definiując kluczowe składniki i usługi dla uwierzytelniania. Zastąp następujące wartości wartości wartościami z centrum administracyjnego firmy Microsoft Entra.

    • Zastąp Enter_the_Application_Id_Here wartością Application (client) ID z rejestracji aplikacji.
    • Zastąp Enter_the_Tenant_Info_Here wartością Directory (tenant) ID z rejestracji aplikacji.
  2. Zapisz plik.

Dodawanie kodu uwierzytelniania do aplikacji

W tej sekcji dodasz kod uwierzytelniania do aplikacji w celu obsługi uwierzytelniania użytkowników i zarządzania sesjami. Wybierz odpowiednią kartę na podstawie typu dzierżawy.

  1. Otwórz src/app/app.component.ts plik i zastąp zawartość następującym kodem:

    // 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();
      }
    }
    

    Kod integruje bibliotekę MSAL z platformą Angular w celu zarządzania uwierzytelnianiem użytkowników. Nasłuchuje zmian stanu logowania, wyświetla stan logowania, obsługuje zdarzenia pozyskiwania tokenów i udostępnia metody logowania i wylogowywania użytkowników na podstawie konfiguracji Microsoft Entra.

  2. Zapisz plik.

Następne kroki