Usare MSAL Guard per proteggere le route

MSAL Angular fornisce MsalGuard, una classe che è possibile usare per proteggere le route e richiedere l'autenticazione prima di accedere alla route protetta. Questo documento fornisce altre informazioni sulla configurazione e sulle considerazioni relative all'uso di MsalGuard.

MsalGuard è una classe di praticità che è possibile usare per migliorare l'esperienza utente, ma non deve essere basata sulla sicurezza. Gli utenti malintenzionati possono potenzialmente aggirare le guardie lato client e assicurarsi che il server non restituisca dati a cui l'utente non deve accedere.

Potrebbe anche essere necessaria una guardia di rotta per soddisfare esigenze specifiche. Ti incoraggiamo a scrivere il tuo guard se MsalGuard non soddisfa tutte queste esigenze.

Configurazioni

Configurazione di MsalGuard in app.module.ts e app-routing.module.ts

Il MsalGuard può essere aggiunto all'applicazione come provider in app.module.ts, insieme alla relativa configurazione. Le istruzioni di importazione includono un'istanza di MSAL, nonché due oggetti di configurazione specifici per Angular. Il secondo argomento è un oggetto MsalGuardConfiguration, che contiene i valori per interactionType, un authRequest facoltativo e un loginFailedRoute facoltativo.

Il MsalGuard viene quindi utilizzato per proteggere le rotte nel file app-routing.module.ts. L'esempio di codice seguente illustra l'aggiunta di MsalGuard alla Profile route. Proteggere la route Profile significa che, anche se un utente non accede tramite il pulsante Login, se prova ad accedere alla route Profile o fa clic sul pulsante Profile, MsalGuard chiederà all'utente di autenticarsi tramite popup o reindirizzamento prima di mostrare la pagina Profile.

La configurazione potrebbe essere simile alla seguente. Consulta la nostra documentazione sulla configurazione per altri modi di configurare MSAL Angular per la tua app e le sezioni seguenti per maggiori dettagli sull'oggetto MsalConfiguration e sulle interfacce di routing.

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

Tipo di interazione

L'impostazione del tipo di interazione determina come MsalGuard richiederà in modo interattivo di accedere. Può InteractionType essere importato da @azure/msal-browser e impostato su Popup o Redirect.

AuthRequest facoltativo

L'opzione facoltativa authRequest è una funzionalità avanzata non necessaria. Tuttavia, consigliamo di impostare authRequest su MsalGuardConfiguration con scopes in modo da ottenere in anticipo il consenso per gli ambiti. Se il consenso per scopes non viene concesso in anticipo, gli ambiti possono essere ottenuti in modo incrementale. Ciò può comportare la presentazione di una finestra di dialogo di consenso all'utente dell'app più volte.

L'autorizzazione preventiva degli ambiti è illustrata negli esempi di codice sopra e nei nostri esempi.

Tutti i possibili parametri per l'oggetto richiesta sono disponibili qui: PopupRequest e RedirectRequest.

Route di accesso non riuscita

La loginFailedRoute stringa può essere impostata su MsalGuardConfiguration. MsalGuard reindirizzerà a questo percorso se è richiesto l'accesso e questo non riesce.

Consulta l'esempio di Angular per esempi su come implementarlo nel modulo di configurazione e nel modulo di instradamento dell'app.

Si noti che il reindirizzamento in caso di errore non è disponibile per le applicazioni Angular 9 che usano l'interfaccia CanLoad a causa delle differenze tra i tipi di base.

Interfaces

Oltre a canActivate, MsalGuard implementa anche canActivateChild e canLoad, che possono essere aggiunti alle definizioni delle route in app-routing.module.ts. È possibile visualizzare questi elementi usati nell'applicazione di esempio MSAL Angular v2 Angular 11 precedente, oltre a quanto riportato di seguito. Per altre informazioni sulle interfacce, vedere la documentazione di 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]
    },
];

Considerazioni sull'uso di MSAL Guard

Uso di MSAL Guard nella home page

Impostare MsalGuard nella pagina iniziale è la soluzione che consigliamo se vuoi che agli utenti venga chiesto di effettuare l'accesso quando accedono alla tua applicazione. Non è consigliabile chiamare login in ngOnInit in app.component.ts, poiché può causare cicli di reindirizzamento.

Le raccomandazioni aggiuntive dipendono dalla strategia di routing e sono disponibili nelle sezioni seguenti.

Usare MSAL Guard con il routing basato sul percorso

Quando usi PathLocationStrategy e i reindirizzamenti con la tua app Angular, consigliamo di usare una route dedicata per i reindirizzamenti, in modo da evitare cicli di reindirizzamento. Questa route dovrebbe anche essere la tua redirectUri e non dovrebbe essere protetta da MsalGuard.

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

Per effettuare l'accesso degli utenti quando raggiungono la tua app, se utilizzi PathLocationStrategy, ti consigliamo:

  • Impostazione di MsalGuard nella tua pagina iniziale
  • Imposta il tuo redirectUri su 'http://localhost:4200/auth'
  • Aggiungere un percorso 'auth' alle route, impostando MsalRedirectComponent come componente (questo percorso non deve essere protetto da MsalGuard)
  • Assicurarsi che MsalRedirectComponent sia stato inizializzato
  • Facoltativamente: aggiungere MsalGuard a tutte le route, se si desidera proteggerle tutte

Il nostro esempio Angular Modules usa PathLocationStrategy e dimostra come proteggere le route con MsalGuard.

Uso della MSAL Guard con routing con hash

Quando si usa HashLocationStrategy con l'app Angular, consigliamo vivamente di impostare route segnaposto (ad esempio /code) nel file app-routing.module.ts per evitare che venga attivato il router di Angular quando Microsoft Entra ID restituisce nell'hash la risposta contenente il codice di autorizzazione, poiché in caso contrario potrebbero verificarsi problemi nel completamento dell'autenticazione. Queste route segnaposto non devono essere protette da MsalGuarde non devono puntare a un componente che attiva l'interazione o effettua chiamate API protette al caricamento della pagina.

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

Anche redirectUri nella configurazione MSAL deve essere impostato sulla home page.

Per effettuare l'accesso degli utenti quando raggiungono la tua app, se utilizzi HashLocationStrategy, ti consigliamo:

  • Impostazione di MsalGuard nella tua pagina iniziale
  • Senza impostare il MsalGuard nelle route segnaposto (ad esempio /code, /error)
  • Assicurarsi che MsalRedirectComponent sia stato inizializzato
  • Facoltativamente: aggiungendo MsalGuard a tutti gli altri percorsi se si desidera proteggere tutti i percorsi

Vedere l'esempio precedente di MSAL Angular v2 Angular 11, che usa HashLocationStrategy e illustra come proteggere le route con MsalGuard.

Modifiche da msal-angular v1 a msal-angular v2

  • Configurazione: MsalAngularConfiguration è stata deprecata e non funziona più. La configurazione di MsalGuard viene ora eseguita tramite .MsalGuardConfiguration
  • Interfacce: MsalGuard ora implementa CanActivateChild e CanLoad oltre a CanActivate. Per altri dettagli, vedere la sezione precedente Interfaces .
  • Reindirizzamento in caso di errore: MsalGuard la configurazione include ora un oggetto loginFailedRoute che può essere configurato. Per i dettagli, vedere la sezione sopra su loginFailedRoute.
  • Last updated on