Sdílet prostřednictvím

Kurz: Vytvoření aplikace Angular a jeho příprava na ověřování

  • Článek

platí pro: zelený kruh se symbolem bílé značky zaškrtnutí. tenanti pracovních sil zelený kruh se symbolem bílé značky zaškrtnutí. externí tenanti (další informace)

Tento kurz je první částí série, která ukazuje vytvoření jednostránkové aplikace Angular (SPA), přidání ověřování a extrahování uživatelských dat pomocí platformy Microsoft Identity Platform.

V tomto kurzu:

  • Vytvoření nového projektu Angular
  • Konfigurace nastavení pro aplikaci
  • Přidání ověřovacího kódu do aplikace

Požadavky

Vytvoření nového projektu Angular

V této části vytvoříte nový projekt Angular pomocí Angular CLI v editoru Visual Studio Code. Na základě typu tenanta zvolte příslušnou kartu.

Pokud chcete projekt Angular sestavit úplně od začátku, postupujte takto:

  1. Otevřete okno terminálu a spuštěním následujícího příkazu vytvořte nový projekt Angular:

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

    Příkaz vytvoří nový projekt Angular pojmenovaný msal-angular-tutorial s povoleným směrováním, CSS pro stylování a zakázaným striktním režimem.

  2. Přejděte do adresáře projektu:

    cd msal-angular-tutorial

  3. Nainstalujte závislosti aplikace:

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

    npm install @azure/msal-browser @azure/msal-angular bootstrap Příkaz nainstaluje balíčky Azure MSAL Browser, Azure MSAL Angular a Bootstrap.

  4. Otevřete angular.json a přidejte cestu CSS metody Bootstrap do styles pole:

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

    Kód přidá bootstrap CSS do pole stylů v angular.json souboru.

  5. Vytvořit komponenty domovská stránka a profil:

    ng generate component home
ng generate component profile

    Příkazy generují komponenty Home and Profile v projektu Angular.

  6. Odeberte nepotřebné soubory a kód 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

    Příkazy z projektu odeberou nepotřebné soubory a kód.

  7. Přejmenujte app.routes.ts na app-routing.module.ts pomocí editoru Visual Studio Code a aktualizujte všechny odkazy na app.routes.ts v celé aplikaci.

  8. Přejmenujte app.config.ts na app.module.ts pomocí editoru Visual Studio Code a aktualizujte všechny odkazy na app.config.ts v celé aplikaci.

Po dokončení těchto kroků by struktura projektu měla vypadat takto:

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

Konfigurace nastavení aplikace

V této části nakonfigurujete nastavení aplikace pro ověřování. K konfiguraci aplikace pro ověřování použijeme hodnoty zaznamenané během registrace aplikace. Na základě typu tenanta zvolte příslušnou kartu.

K konfiguraci aplikace pro ověřování použijeme hodnoty zaznamenané během registrace aplikace. Postupujte následovně:

  1. src/app/app.module.ts Otevřete soubor a nahraďte jeho obsah následujícím kódem:

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

    Kód nastaví knihovnu MSAL pro ověřování uživatelů a ochranu rozhraní API. Konfiguruje se aplikaci s MsalInterceptor k zabezpečení požadavků rozhraní API a MsalGuard k ochraně tras, přičemž definuje klíčové komponenty a služby pro ověřování. Nahraďte následující hodnoty hodnotami z Centra pro správu Microsoft Entra.

    • Nahraďte Enter_the_Application_Id_Here pomocí Application (client) ID z registrace aplikace.
    • Nahraďte Enter_the_Tenant_Info_Here s Directory (tenant) ID z registrace aplikace.

  2. Uložte soubor.

Přidání ověřovacího kódu do aplikace

V této části přidáte do aplikace ověřovací kód, který bude zpracovávat ověřování uživatelů a správu relací. Na základě typu tenanta zvolte příslušnou kartu.

  1. Otevřete src/app/app.component.ts soubor a nahraďte obsah následujícím kódem:

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

    Kód integruje MSAL s Angular ke správě ověřování uživatelů. Naslouchá změnám stavu přihlášení, zobrazuje stav přihlášení, zpracovává události získávání tokenů a poskytuje metody pro přihlášení nebo odhlášení uživatelů na základě konfigurace Microsoft Entra.

  2. Uložte soubor.

Další kroky

Kurz: Přidání přihlášení a odhlášení funkčních komponent v aplikaci Angular