次の方法で共有

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

  • [アーティクル]

この記事では、ユーザー エージェント アプリケーションのインスタンスを使用して 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 をインスタンスする方法を示しています。