MSAL.js を使用して認証要求でカスタム状態を渡す

OAuth 2.0 で定義されている 状態 パラメーターは認証要求に含まれており、クロスサイト要求フォージェリ攻撃を防ぐためにトークン応答にも返されます。 既定では、JavaScript 用 Microsoft Authentication Library (MSAL.js) は、ランダムに生成された一意の 状態 認証要求のパラメーター値を渡します。

状態パラメーターを使用して、リダイレクト前にアプリの状態の情報をエンコードすることもできます。 このパラメーターへの入力として、アプリ内のユーザーの状態への参照 (ページまたはビューの識別子など) を渡すことができます。 MSAL.js ライブラリを使用すると、Request オブジェクトの状態パラメーターとしてカスタム状態を渡すことができます。

Important

セキュリティとプライバシーのために、状態パラメーターに URL やその他の機密データを直接配置しないでください。 代わりに、localStorage や sessionStorage などのブラウザー ストレージに格納されているデータに対応するキーまたは識別子を使用します。 この方法により、アプリは認証後に必要なデータを安全に参照できます。 たとえば、実際の URL を sessionStorage に格納し、状態パラメーターにストレージ キーのみを渡すことができます。

例えば次が挙げられます。

import {PublicClientApplication} from "@azure/msal-browser";

const myMsalObj = new PublicClientApplication({
    clientId: "ENTER_CLIENT_ID_HERE"
});

let loginRequest = {
    scopes: ["user.read"],
    state: "state_key"
}

myMSALObj.loginRedirect(loginRequest);

渡された状態は、要求の送信時に MSAL.js によって設定された一意の GUID に追加されます。 応答が返されると、MSAL.js 状態の一致を確認し、Response オブジェクトで渡されたカスタムを stateとして返します。

詳細については、MSAL.jsを使用 したシングルページ アプリケーション (SPA) の構築 に関するページを参照してください。