Uwaga
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Dotyczy: Najemcy usługi Workforce
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/
.
-
identyfikator URI przekierowania:
- Angular CLI interfejs wiersza poleceń
- Node.js 18.19 lub wyższe.
- Visual Studio Code lub innego edytora kodu.
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:
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.Przejdź do katalogu projektu:
cd msal-angular-tutorial
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.Otwórz
angular.json
i dodaj ścieżkę CSS Bootstrap do tablicystyles
:"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.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.
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.
Zmień nazwę
app.routes.ts
naapp-routing.module.ts
przy użyciu programu Visual Studio Code i zaktualizuj wszystkie odwołaniaapp.routes.ts
w całej aplikacji.Zmień nazwę
app.config.ts
naapp.module.ts
przy użyciu programu Visual Studio Code i zaktualizuj wszystkie odwołania doapp.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:
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 iMsalGuard
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.
- Zastąp
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.
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.
Zapisz plik.