概要
- 手順 1: ユーザー フローを構成する
- 手順 2: SPA と API を登録する
- 手順 3: SPA のサンプル コードを取得する
- 手順 4: Web API のサンプル コードを取得する
- 手順 5: SPA と Web API を実行する
- アプリケーションをデプロイする
https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/configure-authentication-sample-spa-app
MSAL.jsとは？
MSAL.js（Microsoft Authentication Library for JavaScript）は、Microsoft Identity Platformを利用してWebアプリケーションやブラウザベースのアプリケーションで認証と認可を行うためのライブラリです。このライブラリを使用することで、アプリケーション開発者はAzure AD（Azure Active Directory）をはじめとするMicrosoftのアイデンティティプロバイダを使用してユーザーを認証し、アクセス許可を管理できます。
MSAL.jsは、OAuth 2.0と
OpenID Connectプロトコルを基にしており、安全にトークンを取得し、アプリケーションで使用することができます。このライブラリはシングルページアプリケーション（SPA）、Node.jsサーバーサイドアプリケーション、またはその他のJavaScriptベースのアプリケーションで利用可能です。
主な機能は以下の通りです：
- 認証とトークン取得: ユーザー認証やアプリケーションへのアクセス権を求めるためのトークン取得を行います。
- セッション管理: ユーザーセッションの状態を管理し、ログイン状態を保持します。
- 複数アカウントのサポート: 複数のユーザーアカウントでの操作をサポートします。
- キャッシュ機能: 認証トークンを効率的にキャッシュし、アプリケーションのパフォーマンスを向上させます。
MSAL.jsを使用することで、開発者は認証プロセスを簡単に実装し、保守しやすくすることができ、セキュリティ強化にも寄与します。
OIDC PKCEフローとは？
OIDC（OpenID Connect）PKCE（Proof Key for Code Exchange）フローは、特にパブリッククライアント（モバイルアプリやSPA（シングルページアプリケーション）など）のセキュリティを強化するために設計された認証フローです。このフローは、従来の認証コードフローを拡張して、攻撃者による認証コードの横取りを防ぐための追加のセキュリティ層を提供します。
PKCEフローの基本的なステップは以下の通りです：
- コード検証器の生成: クライアントはランダムな文字列から「コード検証器」という高エントロピーのシークレットを生成します。
- コードチャレンジの計算: コード検証器から「コードチャレンジ」と呼ばれる派生値を計算します。この計算には通常、SHA-256ハッシュ関数が用いられ、結果として得られたハッシュ値はBase64でエンコードされます。
- 認証リクエストの送信: クライアントは認証サーバーに対して認証リクエストを送信します。このリクエストには、先ほど計算したコードチャレンジやリダイレクトURI、クライアントIDなどが含まれます。
- 認証サーバーのユーザー認証: ユーザーは認証サーバー上でログインし、クライアントに対するアクセス承認を行います。
- 認証コードの受領: 認証が成功すると、クライアントには認証コードがリダイレクトURIを通じて送信されます。
- トークンリクエストの送信: クライアントは認証コードと共にコード検証器を認証サーバーに送信します。
- トークンの発行: 認証サーバーはコードチャレンジとクライアントが送信したコード検証器が一致することを確認後、アクセストークンとIDトークンをクライアントに発行します。
PKCEは、特に認証サーバーとクライアント間でクライアントシークレットを安全に保持できない場合に有効です。このフローにより、中間者攻撃による認証コードの横取りや再利用攻撃を防ぐことができ、セキュリティを大幅に向上させます。