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

Samouczek: dodaj funkcjonalne składniki logowania i wylogowywania w aplikacji Angular