Útvonalak védelme az MSAL Guard használatával

Az MSAL Angular az útvonalak védelmére és hitelesítésre használható osztályt biztosít MsalGuarda védett útvonal elérése előtt. Ez a dokumentum további információt nyújt a konfigurálásról és a használat során MsalGuardmegfontolandó szempontokról.

MsalGuard egy olyan kényelmi osztály, amelyet a felhasználói élmény javítása érdekében használhat, de biztonsági okokból nem szabad arra támaszkodni. A támadók potenciálisan megkerülhetik az ügyféloldali őröket, és győződjön meg arról, hogy a kiszolgáló nem ad vissza olyan adatokat, amelyekhez a felhasználó nem férhet hozzá.

Szükség lehet egy útvonalőrre is, amely megfelel az adott igényeknek. Javasoljuk, hogy készítsen saját védelmet, ha a MsalGuard nem felel meg mindezeknek az igényeknek.

Konfigurációk

A app.module.ts és a app-routing.module.ts fájlokban a MsalGuard konfigurálása

A MsalGuard szolgáltatóként hozzáadható az alkalmazáshoz az app.module.ts fájlban, a konfigurációjával együtt. Az importálás az MSAL egy példányát, valamint két Angular-specifikus konfigurációs objektumot vesz igénybe. A második argumentum egy MsalGuardConfiguration objektum, amely a választható és az opcionális interactionTypeauthRequestértékeket loginFailedRoutetartalmazza.

Ezután MsalGuard a app-routing.module.ts útvonalainak védelmére szolgál. Az alábbi kódminta bemutatja, hogyan adható hozzá a(z) MsalGuard a(z) Profile útvonalhoz. Profile Az útvonal védelme azt jelenti, hogy még akkor is, ha egy felhasználó nem a gomb használatával jelentkezik beLogin, ha megpróbál hozzáférni az Profile útvonalhoz, vagy rákattint a Profile gombra, a MsalGuard rendszer arra kéri a felhasználót, hogy a lap megjelenítése előtt hitelesítsen Profile előugró vagy átirányítási funkcióval.

A konfiguráció az alábbihoz hasonlóan nézhet ki. Az MSAL Angular alkalmazáshoz való konfigurálásának egyéb módjairól szóló konfigurációs dokumentumunkban , valamint az alábbi szakaszokban további információt talál az MsalConfiguration útválasztás objektumáról és felületéről.

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

Interakció típusa

Az interakció típusának beállítása határozza meg, hogy a MsalGuard rendszer hogyan kéri interaktívan a bejelentkezést. A InteractionType importálható innen: @azure/msal-browser, és Popup vagy Redirect értékre állítható.

Választható hitelesítés

Az opcionális authRequest egy haladó funkció, amely nem kötelező. Javasoljuk azonban, hogy a scopes használatával állítsa be a authRequest elemet a(z) MsalGuardConfiguration helyen, hogy a hatókörökre vonatkozó hozzájárulás előre beszerezhető legyen. Ha a(z) scopes használatához szükséges hozzájárulást nem adják meg előre, a hatókörök fokozatosan is kérhetők. Ez azt eredményezheti, hogy a hozzájárulási párbeszéd többször is megjelenik az alkalmazás felhasználója számára.

A hatókörök előzetes jóváhagyása a fenti kódmintákban és a mintáinkban is látható.

A kérelemobjektum összes lehetséges paramétere itt található: PopupRequest és RedirectRequest.

Sikertelen bejelentkezés útvonala

A loginFailedRoute karakterlánc beállítható a(z) MsalGuardConfiguration elemen. A MsalGuard rendszer átirányítja erre az útvonalra, ha bejelentkezés szükséges és sikertelen.

Az Angular-minta példákat mutat be a konfigurációs és alkalmazás-útválasztási modulban való implementálására.

Vegye figyelembe, hogy a sikertelen átirányítás nem érhető el azon Angular 9-alkalmazások esetében, amelyek alaptípus-különbségek miatt használják az CanLoad interfészt.

Interfaces

A canActivate mellett a MsalGuard a canActivateChild és canLoad felületet is megvalósítja, és ezek hozzáadhatók az útvonaldefiníciókhoz az app-routing.module.ts fájlban. Ezeket a régebbi MSAL Angular v2 Angular 11 mintaalkalmazásban, valamint alább is láthatja. A felületekkel kapcsolatos további információkért lásd az Angular-dokumentációt.

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]
    },
];

Az MSAL Guard használata során megfontolandó szempontok

Az MSAL Guard használata a kezdőlapon

Ha azt szeretné, hogy a felhasználókat az alkalmazás elérésekor bejelentkezésre kérje a rendszer, javasoljuk, hogy a MsalGuard elemet a kezdeti oldalon állítsa be. Nem javasoljuk a app.component.tsngOnInit elemében a login meghívását, mivel ez átirányítási hurkot okozhat.

További javaslataink az útválasztási stratégiától függenek, és az alábbi szakaszokban találhatók.

Az MSAL Guard használata útvonal-útválasztással

Ha az Angular-alkalmazásában az PathLocationStrategy-t és az átirányításokat használja, javasoljuk, hogy az átirányításokhoz külön útvonalat használjon, mert ez segít megelőzni az átirányítási ciklusok kialakulását. Ennek az útvonalnak kell lennie az Ön redirectUri útvonalának is, és a MsalGuard nem védheti.

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

Ha azt szeretné, hogy a felhasználók be legyenek jelentkeztetve, amikor elérik az alkalmazását, a(z) PathLocationStrategy használatakor a következőket javasoljuk:

• A MsalGuard beállítása a kezdőoldalon
• Állítsa a(z) redirectUri elemet erre: 'http://localhost:4200/auth'
• Egy 'auth' útvonal hozzáadása az útvonalakhoz, a MsalRedirectComponent beállítása komponensként (ezt az útvonalat nem szabad a(z) MsalGuard elemmel védeni)
• Győződjön meg arról, hogy a MsalRedirectComponent inicializálva van
• Opcionálisan: ha az összes útvonalat védeni szeretné, adja hozzá MsalGuard az összes útvonalhoz

Angular Modules-mintánk a PathLocationStrategy használja, és bemutatja, hogyan lehet az útvonalakat a MsalGuard segítségével védeni.

Az MSAL Guard használata hash alapú útválasztással

Amikor a(z) HashLocationStrategy elemet az Angular-alkalmazásával használja, határozottan javasoljuk, hogy állítson be helyőrző útvonalakat (például /code) a app-routing.module.ts fájlban, hogy megakadályozza az Angular Router aktiválódását, amikor a Microsoft Entra ID a hitelesítési kódot tartalmazó választ a kivonatban adja vissza, mivel ellenkező esetben problémákba ütközhet a hitelesítés befejezése során. Ezeket a helyőrző útvonalakat nem szabad a(z) MsalGuard elemmel védeni, és nem szabad olyan összetevőre mutatniuk, amely az oldal betöltésekor interakciót indít, vagy védett API-hívásokat kezdeményez.

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

Az MSAL-konfigurációban a(z) redirectUri értékét szintén a kezdőlapra kell állítani.

Ha azt szeretné, hogy a felhasználók be legyenek jelentkeztetve, amikor elérik az alkalmazását, a(z) HashLocationStrategy használatakor a következőket javasoljuk:

• A MsalGuard beállítása a kezdőoldalon
• A(z) MsalGuard nincs beállítva a helyőrző útvonalakon (pl. /code, /error)
• Győződjön meg arról, hogy a MsalRedirectComponent inicializálva van
• Opcionálisan: ha az összes útvonalat védeni szeretné, adja hozzá MsalGuard az összes többi útvonalhoz

Tekintse meg a korábbi, MSAL Angular v2-höz készült Angular 11-mintánkat, amely a(z) HashLocationStrategy használja, és bemutatja, hogyan védhetők az útvonalak a(z) MsalGuard használatával.

Msal-angular v1 és v2 közötti változások

• Konfiguráció: MsalAngularConfiguration elavult, és már nem működik. A MsalGuard konfigurálása most már a MsalGuardConfiguration segítségével történik.
• Felületek: MsalGuard mostantól a CanActivate mellett a CanActivateChild és a CanLoad felületet is implementálja. További részletekért lásd a fenti Interfaces szakaszt.
• Átirányítás hiba esetén: a MsalGuard konfiguráció mostantól rendelkezik egy loginFailedRoute elemmel, amely konfigurálható. A részletekért tekintse meg a loginFailedRoute fenti szakaszt.