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

  • [アーティクル]

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

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

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

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

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

myMSALObj.loginRedirect(loginRequest);

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

次のステップ

次の複数パートのチュートリアル シリーズで、ユーザーをサインインさせる React シングルページ アプリケーション (SPA) をビルドして詳細を学習します。