Защита маршрутов с помощью MSAL Guard

MSAL Angular предоставляет MsalGuardкласс, который можно использовать для защиты маршрутов и проверки подлинности перед доступом к защищенному маршруту. В этом документе содержатся дополнительные сведения о настройке и рекомендациях при использовании MsalGuard.

MsalGuard — это удобный класс, который можно использовать для улучшения пользовательского интерфейса, но его не следует полагаться на безопасность. Злоумышленники могут обойти клиентские охранники, и вы должны убедиться, что сервер не возвращает какие-либо данные, к которым пользователь не должен обращаться.

Кроме того, может потребоваться защита маршрутов, которая отвечает конкретным потребностям. Мы рекомендуем вам написать собственный защитный механизм, если MsalGuard не отвечает всем этим требованиям.

Конфигурации

Настройка MsalGuard в app.module.ts и app-routing.module.ts

MsalGuard можно добавить в ваше приложение в качестве провайдера в файле app.module.ts вместе с его конфигурацией. Импорт принимает экземпляр MSAL, а также два объекта конфигурации Angular. Второй аргумент — это объект MsalGuardConfiguration, который содержит значения для interactionType, необязательного authRequest и необязательного loginFailedRoute.

Затем используется MsalGuard для защиты маршрутов в app-routing.module.ts. В приведенном ниже примере кода показано, как добавить MsalGuard к маршруту Profile. Защита маршрута Profile означает, что даже если пользователь не выполнит вход с помощью кнопки Login, при попытке перейти к маршруту Profile или нажатии кнопки Profile приложение MsalGuard предложит пользователю пройти аутентификацию через всплывающее окно или перенаправление, прежде чем отобразить страницу Profile.

Конфигурация может выглядеть следующим образом. См. нашу документацию по настройке с описанием других способов настройки MSAL Angular для вашего приложения, а также разделы ниже для получения дополнительных сведений об объекте MsalConfiguration и интерфейсах маршрутизации.

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

Тип взаимодействия

Задание типа взаимодействия определяет, как MsalGuard будет интерактивно запрашивать учетные данные для входа. InteractionType можно импортировать из @azure/msal-browser и установить значение Popup или Redirect.

Необязательный параметр authRequest

Необязательный authRequest является дополнительным компонентом, который не требуется. Тем не менее, мы рекомендуем задать authRequest в MsalGuardConfiguration с помощью scopes, чтобы заранее получить согласие на области доступа. Если согласие для scopes не было получено заранее, области доступа можно запрашивать поэтапно. Это может привести к тому, что диалог согласия предоставляется пользователю приложения несколько раз.

Согласие на предварительные действия демонстрируется в приведенных выше примерах кода и в наших примерах.

Здесь можно найти все возможные параметры для объекта запроса: PopupRequest и RedirectRequest.

Сбой маршрута для входа

Строку loginFailedRoute можно задать в MsalGuardConfiguration. MsalGuard будет перенаправлен на этот маршрут, если требуется вход в систему и попытка входа завершается неудачей.

Примеры реализации Angular см. в модуле конфигурации и маршрутизации приложений.

Обратите внимание, что перенаправление при сбое недоступно для приложений Angular 9, использующих интерфейс CanLoad, из-за различий в базовых типах.

Interfaces

Помимо canActivate, MsalGuard также реализует canActivateChild и canLoad, и их можно добавить в определения маршрутов в app-routing.module.ts. Их использование можно увидеть в нашем более старом примере приложения для Angular 11 с MSAL Angular v2, а также ниже. Дополнительные сведения об интерфейсах см. в документации 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]
    },
];

Рекомендации по использованию MSAL Guard

Использование MSAL Guard на главной странице

Мы рекомендуем задать MsalGuard на начальной странице, если вы хотите, чтобы пользователям предлагалось войти в систему при переходе в ваше приложение. Мы не рекомендуем вызывать login в ngOnInit в app.component.ts, так как это может вызвать цикл перенаправлений.

Наши дополнительные рекомендации зависят от стратегии маршрутизации и см. в следующих разделах.

Использование MSAL Guard с маршрутизацией путей

При использовании PathLocationStrategy и перенаправлений в вашем приложении Angular мы рекомендуем использовать отдельный маршрут для перенаправлений, чтобы предотвратить зацикливание. Этот маршрут также должен быть вашим redirectUriи не должен быть защищен MsalGuard.

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

Чтобы автоматически выполнять вход пользователей при открытии приложения с помощью PathLocationStrategy, мы рекомендуем следующее:

  • Настройка MsalGuard на вашей начальной странице
  • Установите для redirectUri значение 'http://localhost:4200/auth'
  • Добавление пути 'auth' в маршруты, назначение MsalRedirectComponent в качестве компонента (этот маршрут не должен быть защищён с помощью MsalGuard)
  • Убедитесь, что MsalRedirectComponent инициализирован.
  • При необходимости: добавьте MsalGuard ко всем своим маршрутам, если хотите, чтобы все они были защищены

В примере модулей Angular используется PathLocationStrategy и демонстрируется, как защитить маршруты с помощью MsalGuardмодуля Angular.

Использование MSAL Guard с хэш-маршрутизацией

При использовании HashLocationStrategy с приложением Angular мы настоятельно рекомендуем задавать маршруты-заполнители (например, /code) в файле app-routing.module.ts, чтобы предотвратить срабатывание маршрутизатора Angular, когда Microsoft Entra ID возвращает ответ с кодом авторизации в URL-фрагменте, иначе могут возникнуть проблемы с завершением аутентификации. Эти маршруты-заглушки не должны быть защищены с помощью MsalGuard, и не должны указывать на компонент, который инициирует взаимодействие или выполняет защищенные вызовы API при загрузке страницы.

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

Для параметра redirectUri в конфигурации MSAL также следует указать домашнюю страницу.

Чтобы автоматически выполнять вход пользователей при открытии приложения с помощью HashLocationStrategy, мы рекомендуем следующее:

  • Настройка MsalGuard на вашей начальной странице
  • Не задано значение MsalGuard для маршрутов-заполнителей (например, /code, /error)
  • Убедитесь, что MsalRedirectComponent инициализирован.
  • Дополнительно: добавление MsalGuard ко всем остальным маршрутам, если вы хотите защитить все маршруты.

См. наш старый пример MSAL Angular версии 2 Angular 11, который использует HashLocationStrategy и демонстрирует, как защитить маршруты с помощью MsalGuard.

Изменения от msal-angular версии 1 до версии 2

  • Конфигурация: MsalAngularConfiguration устарела и больше не работает. Настройка MsalGuard теперь выполняется с помощью MsalGuardConfiguration.
  • Интерфейсы: MsalGuard теперь реализуется CanActivateChild и CanLoad в дополнение к CanActivate. Дополнительные сведения см. в разделе выше Interfaces .
  • Перенаправление при сбое: в конфигурации MsalGuard теперь есть настраиваемый параметр loginFailedRoute. Подробности см. в разделе выше, посвящённом loginFailedRoute.
  • Last updated on