Ochrona tras przy użyciu funkcji MSAL Guard

Biblioteka MSAL Angular udostępnia MsalGuardklasę , której można użyć do ochrony tras i wymagania uwierzytelniania przed uzyskaniem dostępu do chronionej trasy. Ten dokument zawiera więcej informacji na temat konfigurowania i zagadnień dotyczących korzystania z programu MsalGuard.

MsalGuard to klasa wygody, której można użyć, aby poprawić środowisko użytkownika, ale nie należy polegać na zabezpieczeniach. Osoby atakujące mogą potencjalnie obejść zabezpieczenia po stronie klienta i należy upewnić się, że serwer nie zwraca żadnych danych, do których użytkownik nie powinien uzyskiwać dostępu.

Może być również potrzebny strażnik trasy, który odpowiada konkretnym potrzebom. Zachęcamy do napisania własnego zabezpieczenia, jeśli MsalGuard nie spełnia wszystkich tych wymagań.

Konfiguracje

Konfigurowanie `MsalGuard` w app.module.ts i app-routing.module.ts

MsalGuard można dodać do aplikacji jako dostawcę w pliku app.module.ts wraz z jego konfiguracją. Importy obejmują instancję MSAL, a także dwa obiekty konfiguracji specyficzne dla Angulara. Drugi argument to obiekt MsalGuardConfiguration, który zawiera wartości dla interactionType, opcjonalny authRequest i opcjonalny loginFailedRoute.

Element MsalGuard jest następnie używany do ochrony tras w app-routing.module.ts. Poniższy przykład kodu pokazuje, jak dodać element MsalGuard do trasy Profile. Zabezpieczenie trasy Profile oznacza, że nawet jeśli użytkownik nie zaloguje się za pomocą przycisku Login, to gdy spróbuje uzyskać dostęp do trasy Profile lub kliknie przycisk Profile, element MsalGuard wyświetli monit o uwierzytelnienie za pomocą wyskakującego okna lub przekierowania, zanim wyświetli stronę Profile.

Konfiguracja może wyglądać podobnie do poniższej. Zapoznaj się z naszym dokumentem konfiguracji, aby poznać inne sposoby konfigurowania biblioteki MSAL Angular w aplikacji, a w poniższych sekcjach znajdziesz więcej informacji o obiekcie MsalConfiguration i interfejsach routingu.

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { MsalModule, MsalRedirectComponent, MsalGuard } from '@azure/msal-angular'; // Import MsalInterceptor
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            // MSAL Configuration
        }), {
            // MSAL Guard Configuration
            interactionType: InteractionType.Redirect,
            authRequest: {
                scopes: ['user.read']
            },
            loginFailedRoute: '/login-failed'
        }, {
            // MSAL Interceptor Configurations
        }),
        AppRoutingModule
    ],
    providers: [
        // ...
        MsalGuard
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { MsalGuard } from '@azure/msal-angular';

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        path: '',
        component: HomeComponent
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Typ interakcji

Ustawienie typu interakcji określa, w jaki sposób element MsalGuard będzie interaktywnie wyświetlać monit logowania. Element InteractionType można zaimportować z @azure/msal-browser i ustawić na Popup lub Redirect.

Opcjonalny authRequest

Opcjonalnie authRequest jest to zaawansowana funkcja, która nie jest wymagana. Zalecamy jednak ustawienie authRequest w elemencie MsalGuardConfiguration za pomocą scopes, aby można było uzyskać zgodę na zakresy z wyprzedzeniem. Jeśli zgoda na scopes nie zostanie udzielona z góry, zakresy można uzyskiwać stopniowo. Może to spowodować wielokrotne wyświetlenie okna dialogowego zgody dla użytkownika aplikacji.

Wyrażenie zgody na zakresy z góry jest pokazane w powyższych przykładach kodu i w naszych przykładach.

Wszystkie możliwe parametry obiektu żądania można znaleźć tutaj: PopupRequest i RedirectRequest.

Ciąg znaków loginFailedRoute można ustawić w MsalGuardConfiguration. MsalGuard przekieruje na tę trasę, jeśli logowanie jest wymagane i się nie powiedzie.

Zobacz przykład usługi Angular, aby zapoznać się z przykładami implementacji w module konfiguracji i routingu aplikacji.

Należy pamiętać, że przekierowanie w razie niepowodzenia nie jest dostępne dla aplikacji Angular 9, które używają interfejsu CanLoad, ze względu na różnice w typach bazowych.

Interfaces

Oprócz canActivate, MsalGuard implementuje również canActivateChild i canLoad, które można dodać do definicji tras w pliku app-routing.module.ts. Można je zobaczyć w naszej starszej aplikacji przykładowej MSAL Angular v2 Angular 11, a także poniżej. Aby uzyskać więcej informacji na temat interfejsów, zobacz dokumentację platformy Angular.

const routes: Routes = [
    {
        path: 'profile',
        canActivateChild: [MsalGuard],
        children: [
        {
            path: '',
            component: ProfileComponent
        },
        {
            path: 'detail',
            component: DetailComponent
        }
        ]
    },
    { 
        path: 'lazyLoad', 
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
        canLoad: [MsalGuard]
    },
];

Zagadnienia dotyczące korzystania z funkcji MSAL Guard

Korzystanie z funkcji MSAL Guard na stronie głównej

Ustawienie elementu MsalGuard na stronie początkowej jest naszym zaleceniem, jeśli chcesz, aby użytkownicy byli monitowani o zalogowanie się po dotarciu do aplikacji. Nie zalecamy wywoływania metody login w metodzie ngOnInit w app.component.tspliku , ponieważ może to spowodować pętlę z przekierowaniami.

Nasze dodatkowe zalecenia zależą od twojej strategii routingu i można je znaleźć w poniższych sekcjach.

Używanie funkcji MSAL Guard z routingiem ścieżek

Podczas używania PathLocationStrategy i przekierowań w aplikacji Angular zalecamy użycie osobnej trasy dla przekierowań, co pomoże zapobiec pętli przekierowań. Ta trasa powinna być również twoją redirectUritrasą i nie powinna być chroniona przez element MsalGuard.

const routes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [MsalGuard]
    },
    {
        // Dedicated route for redirects
        path: 'auth', 
        component: MsalRedirectComponent
    },
    {
        path: '',
        component: HomeComponent
    }
];

Aby zalogować użytkowników po dotarciu do aplikacji, w przypadku korzystania z elementu PathLocationStrategyzalecamy:

Ustawianie obiektu MsalGuard na stronie początkowej
Ustaw redirectUri na 'http://localhost:4200/auth'
Dodanie ścieżki 'auth' do tras, ustawienie MsalRedirectComponent jako komponentu (ta trasa nie powinna być chroniona przez MsalGuard)
Upewnij się, że element MsalRedirectComponent został uruchomiony
Opcjonalnie: dodanie MsalGuard do wszystkich tras, jeśli chcesz, aby wszystkie trasy były zabezpieczone

Nasz przykład modułów Angular wykorzystuje element PathLocationStrategy i pokazuje, jak chronić trasy za pomocą MsalGuard.

Korzystanie z mechanizmu MSAL Guard z trasowaniem opartym na znaku #

Podczas używania HashLocationStrategy z aplikacją Angular zdecydowanie zalecamy skonfigurowanie tras zastępczych (takich jak /code) w pliku app-routing.module.ts, aby zapobiec uruchomieniu routera Angular, gdy usługa Microsoft Entra ID zwróci odpowiedź z kodem uwierzytelnienia w hashu, ponieważ w przeciwnym razie mogą wystąpić problemy z dokończeniem uwierzytelniania. Te trasy zastępcze nie powinny być chronione za pomocą elementu MsalGuard i nie powinny wskazywać na komponent, który uruchamia interakcję lub wykonuje chronione wywołania interfejsu API podczas ładowania strony.

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [MsalGuard]
  },
  {
    // Needed for hash routing
    path: 'code',
    component: HomeComponent
  },
  {
    path: '',
    component: HomeComponent
  }
];

Element redirectUri w konfiguracji MSAL również należy ustawić na stronę główną.

Aby zalogować użytkowników po dotarciu do aplikacji, w przypadku korzystania z elementu HashLocationStrategyzalecamy:

Ustawianie obiektu MsalGuard na stronie początkowej
Brak ustawienia MsalGuard w trasach symbolicznych (np. /code, /error)
Upewnij się, że element MsalRedirectComponent został uruchomiony
Opcjonalnie: dodanie MsalGuard do wszystkich pozostałych tras, jeśli chcesz, aby wszystkie Twoje trasy były chronione

Zobacz nasz wcześniejszy przykład MSAL Angular v2 dla Angulara 11, który używa składnika HashLocationStrategy i pokazuje, jak chronić trasy za pomocą MsalGuard.

Zmiany w msal-angular z wersji v1 na v2

Konfiguracja: MsalAngularConfiguration została przestarzała i nie działa już. Konfigurowanie elementu MsalGuard odbywa się teraz za pomocą MsalGuardConfiguration.
Interfejsy: MsalGuard implementuje teraz CanActivateChild i CanLoad, oprócz CanActivate. Więcej szczegółów można znaleźć w powyższej Interfaces sekcji.
Przekierowanie po niepowodzeniu: konfiguracja MsalGuard ma teraz loginFailedRoute, które można skonfigurować. Aby uzyskać szczegółowe informacje, zobacz sekcję powyżej.loginFailedRoute

Opinia

Czy ta strona była pomocna?

Last updated on 2026-07-02