Ochrana tras pomocí MSAL Guard

MSAL Angular poskytuje MsalGuardtřídu, kterou můžete použít k ochraně tras a vyžadovat ověřování před přístupem k chráněné trase. Tento dokument poskytuje další informace o konfiguraci a aspektech, které je třeba zvážit při používání MsalGuard.

MsalGuard je třída pohodlí, kterou můžete použít ke zlepšení uživatelského prostředí, ale nemělo by se spoléhat na zabezpečení. Útočníci můžou potenciálně obejít ochranu na straně klienta a měli byste zajistit, aby server nevrátil žádná data, ke kterým by uživatel neměl přistupovat.

Možná budete potřebovat také ochranu trasy, která řeší konkrétní potřeby. Doporučujeme, abyste si napsali vlastní guard, pokud MsalGuard nesplňuje všechny tyto požadavky.

Konfigurace

Konfigurace MsalGuard v souborech app.module.ts a app-routing.module.ts

MsalGuard lze přidat do vaší aplikace jako poskytovatele v souboru app.module.ts, včetně jeho konfigurace. Importy přijímají instanci MSAL a také dva konfigurační objekty specifické pro Angular. Druhý argument je MsalGuardConfiguration objekt, který obsahuje hodnoty pro interactionType, volitelné authRequesta volitelné loginFailedRoute.

MsalGuard se poté používá k ochraně tras v app-routing.module.ts. Následující ukázka kódu demonstruje přidání MsalGuard do trasy Profile. Ochrana trasy Profile znamená, že i když se uživatel nepřihlásí pomocí tlačítka Login, pokud se pokusí získat přístup k trase Profile nebo klikne na tlačítko Profile, MsalGuard uživatele před zobrazením stránky Profile vyzve k ověření pomocí místního okna nebo přesměrování.

Vaše konfigurace může vypadat podobně jako v následujícím příkladu. Další podrobnosti o objektu a rozhraních pro směrování najdete v naší MsalConfiguration MSAL Angular pro vaši aplikaci a v následujících částech.

// 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 interakce

Nastavení typu interakce určuje, jak bude MsalGuard interaktivně vyzývat k přihlášení. Lze InteractionType importovat z @azure/msal-browser a nastavit na Popup nebo Redirect.

Volitelný authRequest

authRequest Volitelné je pokročilá funkce, která není povinná. Doporučujeme však nastavit authRequest na MsalGuardConfiguration pomocí scopes, aby bylo možné předem získat souhlas s oprávněními. Pokud není souhlas pro scopes udělen předem, lze oprávnění získat postupně. To může vést k tomu, že se uživateli vaší aplikace několikrát zobrazí dialog souhlasu.

Udělení souhlasu s oprávněními předem je znázorněno ve výše uvedených ukázkách kódu a v našich ukázkách.

Všechny možné parametry objektu požadavku najdete tady: PopupRequest a RedirectRequest.

Neúspěšná trasa přihlášení

Řetězec loginFailedRoute lze nastavit na MsalGuardConfiguration. MsalGuard přesměruje na tuto cestu, pokud je vyžadováno přihlášení a to se nezdaří.

Příklady implementace v modulu konfigurace a směrování aplikací najdete v ukázce Angular.

Upozorňujeme, že přesměrování při selhání není k dispozici pro aplikace Angular 9, které používají CanLoad rozhraní kvůli rozdílům základního typu.

Interfaces

Kromě canActivate, MsalGuard také implementuje canActivateChild a canLoada , a je možné je přidat do definic tras v app-routing.module.ts. Můžete je vidět v naší starší ukázkové aplikaci MSAL Angular v2 Angular 11 a také níže. Další informace o rozhraních najdete v dokumentaci k 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]
    },
];

Důležité informace o používání ochrany MSAL Guard

Použití nástroje MSAL Guard na domovské stránce

MsalGuard Nastavení na úvodní stránce je naším doporučením, pokud chcete, aby se uživatelé při přístupu k vaší aplikaci přihlásili. Nedoporučujeme volat login v ngOnInit v app.component.ts, protože to může způsobit cyklení přesměrování.

Naše další doporučení závisí na vaší strategii směrování a najdete ji v následujících částech.

Použití MSAL Guard se směrováním cest

Při používání PathLocationStrategy a přesměrování ve vaší aplikaci Angular doporučujeme použít samostatnou trasu pro přesměrování, která pomůže zabránit vzniku smyček. Tato cesta by také měla být vaše redirectUri a neměla by být chráněna pomocí MsalGuard.

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

Chcete-li uživatele po vstupu do aplikace automaticky přihlásit, doporučujeme při použití PathLocationStrategy:

  • Nastavení MsalGuard na vaší výchozí stránce
  • Nastavte svůj redirectUri na 'http://localhost:4200/auth'
  • Přidání cesty 'auth' do tras a nastavení MsalRedirectComponent jako komponenty (tato trasa by neměla být chráněna pomocí MsalGuard)
  • Ujistěte se, že je MsalRedirectComponent inicializován
  • Volitelně: přidejte MsalGuard ke všem svým trasám, pokud chcete, aby byly všechny vaše trasy chráněné.

Ukázka našich modulů Angular používá PathLocationStrategy a ukazuje, jak chránit trasy pomocí MsalGuard.

Použití MSAL Guard při směrování pomocí hash

Při použití HashLocationStrategy s aplikací Angular důrazně doporučujeme nastavit zástupné trasy (například /code) v souboru app-routing.module.ts, aby nedošlo ke spuštění směrovače Angular, když Microsoft Entra ID vrátí odpověď s autorizačním kódem v části hash, protože jinak můžete narazit na problémy s dokončením ověřování. Tyto zástupné trasy by neměly být chráněny znakem MsalGuarda neměly by odkazovat na komponentu, která aktivuje interakci nebo provádí volání chráněného rozhraní API při načítání stránky.

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

Položka redirectUri v konfiguraci MSAL by také měla být nastavena na domovskou stránku.

Chcete-li uživatele po vstupu do aplikace automaticky přihlásit, doporučujeme při použití HashLocationStrategy:

  • Nastavení MsalGuard na vaší výchozí stránce
  • Nenastavení MsalGuard na zástupných trasách (např. /code, /error)
  • Ujistěte se, že je MsalRedirectComponent inicializován
  • Volitelně: přidejte MsalGuard ke všem ostatním cestám, pokud chcete, aby byly všechny vaše cesty chráněné.

Podívejte se na naši starší ukázku MSAL Angular v2 Angular 11, která používá HashLocationStrategy a ukazuje, jak chránit trasy pomocí MsalGuard.

Změny z msal-angular v1 na v2

  • Konfigurace: MsalAngularConfiguration Je zastaralá a už nefunguje. Konfigurace MsalGuard se nyní provádí prostřednictvím MsalGuardConfiguration.
  • Rozhraní: MsalGuard nyní implementuje CanActivateChild a CanLoad kromě CanActivate. Další podrobnosti najdete ve výše uvedené části o Interfaces.
  • Přesměrování při selhání: Konfigurace MsalGuard nyní obsahuje loginFailedRoute, které lze nakonfigurovat. Podrobnosti najdete v části výše o loginFailedRoute.
  • Last updated on