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

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

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

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

前提条件

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

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

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 をインスタンスする方法を示しています。