MSAL.js を使用してクライアントアプリケーションを初期化する

[アーティクル]
02/27/2024

この記事では、ユーザーエージェントアプリケーションのインスタンスを使用して JavaScript 用 Microsoft Authentication Library (MSAL.js) を初期化する方法について説明します。

ユーザーエージェントアプリケーションは、Web ブラウザーなどのユーザーエージェントでクライアントコードが実行されるパブリッククライアントアプリケーションの一種です。ブラウザーコンテキストがオープンにアクセスできるため、このようなクライアントでは、シークレットは保存されません。

クライアントアプリケーションの種類とアプリケーションの構成オプションの詳細については、MSAL のパブリッククライアントアプリケーションと機密クライアントアプリケーションに関するページを参照してください。

前提条件

アプリケーションを初期化する前に、まず、そのアプリケーションを Microsoft Entra 管理センターに登録して、アプリケーションと Microsoft ID プラットフォーム間で信頼関係を確立する必要があります。

アプリの登録後、Microsoft Entra 管理センターで確認できる次の値の一部またはすべてが必要になります。

値	必須	説明
アプリケーション (クライアント) ID	必須	Microsoft ID プラットフォーム内でアプリケーションを一意に識別する GUID。
Authority	省略可能	ID プロバイダーの URL (インスタンス) とアプリケーションのサインイン対象ユーザー。インスタンスとサインイン対象ユーザーが連結されると、Authority が構成されます。
ディレクトリ (テナント) ID	省略可能	組織専用の基幹業務アプリケーション (シングルテナントアプリケーションとも呼ばれる) をビルドしている場合は、ディレクトリ(テナント)IDを指定します。
リダイレクト URI	省略可能	Web アプリを構築している場合、`redirectUri` では、ID プロバイダー (Microsoft ID プラットフォーム) が発行済みのセキュリティトークンを返す場所を指定します。

MSAL.js 2.x アプリの初期化

構成オブジェクトを使用して PublicClientApplication をインスタンスすることで、MSAL 認証コンテキストを初期化します。最低限必要な構成プロパティは、アプリケーションの clientID です。これは、Microsoft Entra 管理センターのアプリ登録の [概要] ページにアプリケーション (クライアント) ID として表示されます。

次に、構成オブジェクトと PublicClientApplication のインスタンス化の例を示します。

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

`handleRedirectPromise`

アプリケーションでリダイレクトフローを使用する場合は、handleRedirectPromise を呼び出します。リダイレクトフローを使用する場合は、すべてのページ読み込みで handleRedirectPromise を実行する必要があります。

Promise から次の 3 つの結果が得られます。

.then が呼び出され、tokenResponse が truthy である: リダイレクト操作が成功すると、アプリケーションに戻ります。
.then が呼び出され、tokenResponse が偽物 (null) である: リダイレクト操作では、アプリケーションに戻りません。
.catch が呼び出される: リダイレクト操作によりアプリケーションに戻りますが、エラーが発生しています。

MSAL.js 1.x アプリの初期化

構成オブジェクトを使用して UserAgentApplication をインスタンス化することで、MSAL 1.x 認証コンテキストを初期化します。最低限必要な構成プロパティは、お使いのアプリケーションの clientID です。これは、Microsoft Entra 管理センターのアプリ登録の [概要] ページにアプリケーション (クライアント) ID として表示されます。

MSAL.js 1.2.x 以前のリダイレクトフロー (loginRedirect と acquireTokenRedirect) を使用した認証メソッドの場合、handleRedirectCallback() メソッドを介して成功またはエラーに対するコールバックを明示的に登録する必要があります。 MSAL.js 1.2. x以前ではコールバックを明示的にレジスタする必要がある。これは、リダイレクトフローが、ポップアップエクスペリエンスを持つメソッドと同様に promise を返さないためです。バージョン 1.3.x 以降の MSAL.js では、コールバックの登録は省略可能です。

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

単一インスタンスと構成

MSAL.js 1.x および 2.x では、UserAgentApplication またはPublicClientApplication の 1 つのインスタンスと構成によって、それぞれが 1 つの認証コンテキストを表すように設計されています。

UserAgentApplication または PublicClientApplication の複数のインスタンスは、ブラウザーでキャッシュエントリと動作の競合を引き起こす可能性があるため、お勧めしません。

次の手順

GitHub にある、この MSAL.js 2.x コードサンプルでは、次の構成オブジェクトを使用して PublicClientApplication をインスタンスする方法を示しています。

MSAL.js を使用してクライアント アプリケーションを初期化する