MSAL Guard を使用してルートを保護する

MSAL Angular には、 MsalGuard、ルートを保護するために使用できるクラスが用意されており、保護されたルートにアクセスする前に認証が必要です。 このドキュメントでは、 MsalGuardを使用する場合の構成と考慮事項について詳しく説明します。

MsalGuard は、ユーザー エクスペリエンスを向上させるために使用できる便利なクラスですが、セキュリティに依存すべきではありません。 攻撃者はクライアント側のガードを回避する可能性があり、ユーザーがアクセスしてはならないデータがサーバーから返されないようにする必要があります。

また、特定のニーズに対応するルート ガードが必要な場合もあります。 MsalGuardがこれらのすべてのニーズを満たしていない場合は、独自のガードを記述することをお勧めします。

Configurations

app.module.ts と app-routing.module.ts での MsalGuard の設定

MsalGuard は、設定とともに、app.module.ts 内でアプリケーションのプロバイダーとして追加できます。 インポートでは、MSAL のインスタンスと、2 つの Angular 固有の構成オブジェクトが取り込まれます。 2 番目の引数は、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 のサンプルを参照してください。

基本型の違いにより、 CanLoad インターフェイスを使用する Angular 9 アプリケーションでは、障害時のリダイレクトは使用できません。

Interfaces

canActivateに加えて、MsalGuardではcanActivateChildとcanLoadも実装され、これらはapp-routing.module.tsのルート定義に追加できます。 これらは、 以前の MSAL Angular v2 Angular 11 サンプル アプリケーションと以下で使用されています。 インターフェイスの詳細については、 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 の使用

Angular アプリで PathLocationStrategy とリダイレクトを使用する場合は、リダイレクト専用のルートを使用することをお勧めします。これにより、ループを防ぐことができます。 このルートは 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 Modules サンプルでは、PathLocationStrategyを使用し、MsalGuardでルートを保護する方法を示します。

ハッシュ ルーティングでの MSAL Guard の使用

Angular アプリでHashLocationStrategyを使用する場合は、app-routing.module.tsでプレースホルダー ルート (/code など) を設定することを強くお勧めします。これにより、Microsoft Entra IDがハッシュで認証コードの応答を返すときに Angular ルーターがトリガーされないようにします。そうせずに認証を完了する際に問題が発生する可能性があるためです。 これらのプレースホルダー ルートは、 MsalGuardによって保護されるべきではありません。また、ページ読み込み時に対話をトリガーしたり、保護された API 呼び出しを行ったりするコンポーネントを指すべきではありません。

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

MSAL 構成の redirectUri もホーム ページに設定する必要があります。

アプリにアクセスしたときにユーザーをログインするには、 HashLocationStrategyを使用するときは、次のことをお勧めします。

  • 初期ページでの MsalGuard の設定
  • プレースホルダー ルートに MsalGuard を設定しない (例: /code、 /error)
  • MsalRedirectComponentがブートストラップされていることを確認する
  • 必要に応じて、すべてのルートを保護する場合は、残りのすべてのルートに MsalGuard を追加します

を使用し、HashLocationStrategyでルートを保護する方法を示す、MsalGuardを参照してください。

msal-angular v1 から v2 への変更

  • 構成: MsalAngularConfiguration は非推奨となり、機能しなくなりました。 MsalGuardの構成は、MsalGuardConfigurationを使用して行われるようになりました。
  • インターフェイス: MsalGuardは、CanActivateChildに加えてCanLoadとCanActivateを実装するようになりました。 詳細については、 Interfaces に関する上記のセクションを参照してください。
  • 失敗時のリダイレクト: MsalGuard 構成に、構成できる loginFailedRoute が含まれるようになりました。 詳細については、 loginFailedRoute 上のセクションを参照してください。
  • Last updated on