Uso de MSAL Guard para proteger rutas

MSAL Angular proporciona MsalGuard, una clase que puede usar para proteger las rutas y requerir autenticación antes de acceder a la ruta protegida. En este documento se proporciona más información sobre la configuración y las consideraciones al usar MsalGuard.

MsalGuard es una clase de conveniencia que puede usar para mejorar la experiencia del usuario, pero no se debe confiar en ella para la seguridad. Los atacantes pueden evitar guardias del lado cliente y debe asegurarse de que el servidor no devuelve ningún dato al que el usuario no debe tener acceso.

Puede que también necesite una guarda de ruta para cubrir necesidades específicas. Le recomendamos que escriba su propio guard si MsalGuard no satisface todas esas necesidades.

Configuraciones

Configuración de MsalGuard en el app.module.ts y app-routing.module.ts

El MsalGuard se puede añadir a su aplicación como proveedor en app.module.ts, junto con su configuración. La importación toma una instancia de MSAL, así como dos objetos de configuración específicos de Angular. El segundo argumento es un MsalGuardConfiguration objeto , que contiene los valores de interactionType, un opcional authRequesty un opcional loginFailedRoute.

El MsalGuard se utiliza a continuación para proteger las rutas en app-routing.module.ts. En el ejemplo de código siguiente se muestra cómo agregar el elemento MsalGuard a la Profile ruta. Proteger la Profile ruta significa que, incluso si un usuario no inicia sesión con el Login botón, si intenta acceder a la Profile ruta o hacer clic en el Profile botón, MsalGuard pedirá al usuario que se autentique a través de la ventana emergente o redirección antes de mostrar la Profile página.

La configuración puede ser similar a la siguiente. Consulte nuestra documentación de configuración sobre otras formas de configurar MSAL Angular para la aplicación y las secciones siguientes para obtener más información sobre el objeto y las MsalConfiguration interfaces para el enrutamiento.

// 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 de interacción

Establecer el tipo de interacción determina cómo MsalGuard solicitará el inicio de sesión de forma interactiva. InteractionType se puede importar desde @azure/msal-browser y establecer en Popup o Redirect.

authRequest opcional

El authRequest opcional es una función avanzada que no es obligatoria. Sin embargo, recomendamos establecer authRequest en el MsalGuardConfiguration con scopes para que se pueda obtener el consentimiento para los ámbitos por adelantado. Si no se da el consentimiento para scopes por adelantado, los ámbitos se pueden obtener de forma incremental. Esto puede dar lugar a que se presente un diálogo de consentimiento al usuario de la aplicación varias veces.

El consentimiento previo de los ámbitos se muestra en los ejemplos de código anteriores y en nuestros ejemplos.

Todos los parámetros posibles para el objeto de solicitud se pueden encontrar aquí: PopupRequest y RedirectRequest.

Ruta con error de inicio de sesión

La loginFailedRoute cadena se puede establecer en MsalGuardConfiguration. El MsalGuard redirigirá a esta ruta si se requiere el inicio de sesión y se produce un error.

Consulte el ejemplo de Angular para obtener ejemplos de implementación en el módulode configuración y enrutamiento de aplicaciones.

Tenga en cuenta que el redireccionamiento en caso de error no está disponible para las aplicaciones de Angular 9 que usan la CanLoad interfaz debido a las diferencias de tipo base.

Interfaces

Además de canActivate, MsalGuard también implementa canActivateChild y canLoad, y estos se pueden añadir a las definiciones de rutas en app-routing.module.ts. Puede ver estos elementos usados en nuestra aplicación de ejemplo msAL Angular v2 Angular 11 anterior, así como a continuación. Para más información sobre las interfaces, consulte la documentación de 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]
    },
];

Consideraciones al usar MSAL Guard

Uso de MSAL Guard en la página principal

Nuestra recomendación es establecer MsalGuard en la página inicial si desea que se solicite a los usuarios que inicien sesión al acceder a su aplicación. No recomendamos llamar a login en el ngOnInit en app.component.ts, ya que esto puede provocar un bucle con redireccionamientos.

Nuestras recomendaciones adicionales dependen de su estrategia de enrutamiento y se pueden encontrar en las secciones siguientes.

Uso de MSAL Guard con enrutamiento basado en rutas

Cuando uses PathLocationStrategy y redirecciones con tu aplicación Angular, te recomendamos usar una ruta específica para las redirecciones, lo que ayudará a evitar bucles. Esta ruta también debería ser tu redirectUri y no debería estar protegida por el MsalGuard.

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

Para iniciar sesión a los usuarios al acceder a tu aplicación, al usar PathLocationStrategy, recomendamos:

  • Configurar la MsalGuard en su página inicial
  • Establezca su redirectUri en 'http://localhost:4200/auth'
  • Añadir una ruta de acceso 'auth' a tus rutas, estableciendo MsalRedirectComponent como componente (esta ruta no debe estar protegida por MsalGuard)
  • Asegúrese de que MsalRedirectComponent esté inicializado
  • Opcionalmente: agregar MsalGuard a todas las rutas si desea proteger todas las rutas

Nuestro ejemplo de módulos de Angular usa PathLocationStrategy y demuestra cómo proteger rutas con MsalGuard.

Uso de MSAL Guard con enrutamiento basado en hash

Al usar HashLocationStrategy con la aplicación Angular, recomendamos encarecidamente configurar rutas de marcador de posición (como /code) en app-routing.module.ts para evitar que se active el enrutador de Angular cuando Microsoft Entra ID devuelva la respuesta con el código de autenticación en el hash, ya que, de lo contrario, puede haber problemas para completar la autenticación. Estas rutas de marcador de posición no deben estar protegidas por MsalGuardy no deben apuntar a un componente que desencadene la interacción o realice llamadas API protegidas en la carga de página.

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

El redirectUri de la configuración de MSAL también debe configurarse como la página de inicio.

Para que los usuarios inicien sesión al acceder a tu aplicación, al usar HashLocationStrategy, recomendamos:

  • Configuración de MsalGuard en su página inicial
  • No establecer MsalGuard en las rutas de marcador de posición (por ejemplo, /code, /error)
  • Asegurarse de que el MsalRedirectComponent se inicialice
  • Opcionalmente: agregar MsalGuard al resto de las rutas si desea que todas las rutas se protejan

Vea nuestro ejemplo anterior de MSAL Angular v2 para Angular 11, que usa HashLocationStrategy y muestra cómo proteger rutas con MsalGuard.

Cambios de msal-angular v1 a v2

  • Configuración: MsalAngularConfiguration ha quedado en desuso y ya no funciona. La configuración de MsalGuard ya se realiza a través de MsalGuardConfiguration.
  • Interfaces: MsalGuard ahora implementa CanActivateChild y CanLoad además de CanActivate. Consulte la sección anterior sobre Interfaces para obtener más detalles.
  • Redirección en caso de fallo: la configuración de MsalGuard ahora cuenta con un loginFailedRoute configurable. Consulte la sección anterior sobre loginFailedRoute para obtener más detalles.
  • Last updated on