Megosztás a következőn keresztül:

Oktatóanyag: Egyoldalas Angular-alkalmazás létrehozása és hitelesítésre való előkészítése

A következőre vonatkozik: Zöld kör fehér pipa jellel. A munkaerő bérlői zöld kör fehér pipa szimbólummal. Külső bérlők (további információ)

Ez az oktatóanyag egy olyan sorozat első része, amely bemutatja egy Angular egyoldalas alkalmazás (SPA) kiépítését, a hitelesítés hozzáadását és a felhasználói adatok microsoftos identitásplatform használatával történő kinyerését.

Ebben az útmutatóban Ön:

  • Új Angular-projekt létrehozása
  • Az alkalmazás beállításainak konfigurálása
  • Hitelesítési kód hozzáadása az alkalmazáshoz

Előfeltételek

  • Munkaerőt igénybe vevő. Használhatja az alapértelmezett címtárat , vagy beállíthat egy új bérlőt.
  • Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
    • Alkalmazás (ügyfél) azonosítója
    • Címtár (ügyfél) azonosítója
  • Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. További részletekért tekintse meg az átirányítási URI hozzáadását az alkalmazásban .
    • Átirányítási URI: http://localhost:4200/.

Új Angular-projekt létrehozása

Ebben a szakaszban egy új Angular-projektet fog létrehozni a Visual Studio Code Angular CLI-jének használatával. A bérlő típusa alapján válassza ki a megfelelő lapot.

Az Angular-projekt alapoktól való létrehozásához kövesse az alábbi lépéseket:

  1. Nyisson meg egy terminálablakot, és futtassa a következő parancsot egy új Angular-projekt létrehozásához:

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

    A parancs létrehoz egy új Angular-projektet, amelyben engedélyezve van az msal-angular-tutorial útválasztás, CSS a stílushoz és a szigorú mód letiltva van.

  2. Válts a projektkönyvtárra:

    cd msal-angular-tutorial

  3. Alkalmazásfüggőségek telepítése:

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

    A parancs npm install @azure/msal-browser @azure/msal-angular bootstrap telepíti az Azure MSAL böngészőt, az Azure MSAL Angulart és a Bootstrap-csomagokat.

  4. Nyissa meg angular.json és adja hozzá a Bootstrap CSS-elérési útját a styles tömbhöz:

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

    A kód hozzáadja a Bootstrap CSS-t a fájl stílustömbjéhez angular.json .

  5. Otthoni és profilösszetevők létrehozása:

    ng generate component home
ng generate component profile

    A parancsok az Angular-projekt kezdőlap- és profilösszetevőit generálják.

  6. Távolítsa el a felesleges fájlokat és kódot a projektből:

    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

    A parancsok eltávolítják a felesleges fájlokat és kódot a projektből.

  7. Nevezze át a(z) app.routes.ts-t app-routing.module.ts-re a Visual Studio Code segítségével, és frissítse az alkalmazásban a(z) app.routes.ts összes hivatkozását.

  8. Nevezze át a app.config.ts elemet app.module.ts névre a Visual Studio Code használatával, és frissítse az alkalmazásban a app.config.ts összes hivatkozását.

A lépések elvégzése után a projekt struktúrájának a következőképpen kell kinéznie:

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

Alkalmazásbeállítások konfigurálása

Ebben a szakaszban az alkalmazásbeállításokat fogja konfigurálni a hitelesítéshez. Az alkalmazás regisztrációja során rögzített értékeket fogjuk használni az alkalmazás hitelesítésre való konfigurálásához. A bérlő típusa alapján válassza ki a megfelelő lapot.

Az alkalmazás regisztrációja során rögzített értékeket fogjuk használni az alkalmazás hitelesítésre való konfigurálásához. Tegye a következők egyikét:

  1. Nyissa meg a src/app/app.module.ts fájlt, és cserélje le a tartalmat a következő kódra:

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

    A kód beállítja az MSAL-t a felhasználói hitelesítéshez és az API-védelemhez. Konfigurálja az alkalmazást MsalInterceptor az API-kérések biztonságossá tételéhez és MsalGuard az útvonalak védelméhez, miközben meghatározza a hitelesítéshez szükséges fő összetevőket és szolgáltatásokat. Cserélje le a következő értékeket a Microsoft Entra adminisztrációs központ értékeire.

    • Cserélje le Enter_the_Application_Id_Here az Application (client) ID alkalmazásregisztrációból származóra.
    • Cserélje le Enter_the_Tenant_Info_Here az Directory (tenant) ID alkalmazásregisztrációból származóra.

  2. Mentse a fájlt.

Hitelesítési kód hozzáadása az alkalmazáshoz

Ebben a szakaszban hitelesítési kódot fog hozzáadni az alkalmazáshoz a felhasználói hitelesítés és a munkamenet-kezelés kezeléséhez. A bérlő típusa alapján válassza ki a megfelelő lapot.

  1. Nyissa meg src/app/app.component.ts a fájlt, és cserélje le a tartalmat a következő kódra:

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

    A kód integrálja az MSAL-t az Angularlal a felhasználói hitelesítés kezeléséhez. Figyeli a bejelentkezési állapot változásait, megjeleníti a bejelentkezési állapotot, kezeli a jogkivonat-beszerzési eseményeket, és a Microsoft Entra konfigurációja alapján metódusokat biztosít a felhasználók be- és kijelentkezésére.

  2. Mentse a fájlt.

Következő lépések

Oktatóanyag: Bejelentkezés hozzáadása és funkcionális összetevők kijelentkezése egy Angular-alkalmazásban