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

この記事では、ユーザー エージェント アプリケーションのインスタンスを使用して JavaScript 用 Microsoft Authentication Library (MSAL.js) を初期化する方法について説明します。This article describes initializing Microsoft Authentication Library for JavaScript (MSAL.js) with an instance of a user-agent application.

ユーザー エージェント アプリケーションは、Web ブラウザーなどのユーザー エージェントでクライアント コードが実行されるパブリック クライアント アプリケーションの一種です。The user-agent application is a form of public client application in which the client code is executed in a user-agent such as a web browser. このようなクライアントでは、シークレットは格納されません。ブラウザーのコンテキストが公開されアクセス可能であるからです。Such clients do not store secrets because the browser context is openly accessible.

クライアント アプリケーションの種類とアプリケーションの構成オプションの詳細については、MSAL のパブリック クライアント アプリケーションと機密クライアント アプリケーションに関するページを参照してください。To learn more about the client application types and application configuration options, see Public and confidential client apps in MSAL.

前提条件Prerequisites

アプリケーションを初期化する前に、まず、そのアプリケーションを Azure portal に登録して、アプリケーションと Microsoft ID プラットフォーム間で信頼関係を確立する必要があります。Before initializing an application, you first need to register it with the Azure portal, establishing a trust relationship between your application and the Microsoft identity platform.

アプリの登録後、Azure portal で確認できる次の値の一部またはすべてが必要になります。After registering your app, you'll need some or all of the following values that can be found in the Azure portal.

Value 必須Required 説明Description
アプリケーション (クライアント) IDApplication (client) ID 必須Required Microsoft ID プラットフォーム内でアプリケーションを一意に識別する GUID。A GUID that uniquely identifies your application within the Microsoft identity platform.
AuthorityAuthority 省略可能Optional ID プロバイダーの URL (インスタンス) とアプリケーションのサインイン対象ユーザーThe identity provider URL (the instance) and the sign-in audience for your application. インスタンスとサインイン対象ユーザーが連結されると、Authority が構成されます。The instance and sign-in audience, when concatenated, make up the authority.
ディレクトリ (テナント) IDDirectory (tenant) ID 省略可能Optional 組織専用の基幹業務アプリケーション (シングルテナント アプリケーションとも呼ばれる) を構築している場合は、この値を指定します。Specify this if you're building a line-of-business application solely for your organization, often referred to as a single-tenant application.
リダイレクト URIRedirect URI 省略可能Optional Web アプリを構築している場合、redirectUri では、ID プロバイダー (Microsoft ID プラットフォーム) が発行済みのセキュリティ トークンを返す場所を指定します。If you're building a web app, the redirectUri specifies where the identity provider (the Microsoft identity platform) should return the security tokens it has issued.

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

構成オブジェクトを使用して PublicClientApplication をインスタンス化することで、MSAL 認証コンテキストを初期化します。Initialize the MSAL authentication context by instantiating a PublicClientApplication with a Configuration object. 最低限必要な構成プロパティは、アプリケーションの clientID です。これは、Azure portal のアプリ登録の [概要] ページにアプリケーション (クライアント) ID として表示されます。The minimum required configuration property is the clientID of your application, shown as the Application (client) ID on the Overview page of the app registration in the Azure portal.

次に、構成オブジェクトと PublicClientApplication のインスタンス化の例を示します。Here's an example configuration object and instantiation of a PublicClientApplication:

const msalConfig = {
    auth: {
        clientId: "11111111-1111-1111-111111111111",
        authority: "https://login.microsoftonline.com/common",
        knownAuthorities: [],
        redirectUri: "https://localhost:3001",
        postLogoutRedirectUri: "https://localhost:3001/logout",
        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 を呼び出します。Invoke handleRedirectPromise when your application uses the redirect flows. リダイレクト フローを使用する場合は、すべてのページ読み込みで handleRedirectPromise を実行する必要があります。When using the redirect flows, handleRedirectPromise should be run on every page load.

Promise では、次の 3 つの結果が考えられます。There are three possible outcomes from the promise:

  • .then が呼び出され、tokenResponse が truthy である: リダイレクト操作が成功すると、アプリケーションに戻ります。.then is invoked and tokenResponse is truthy: The application is returning from a redirect operation that was successful.
  • .then が呼び出され、tokenResponse が falsey (null) である: リダイレクト操作では、アプリケーションに戻りません。.then is invoked and tokenResponse is falsey (null): The application is not returning from a redirect operation.
  • .catch が呼び出される: リダイレクト操作によりアプリケーションに戻りますが、エラーが発生しています。.catch is invoked: The application is returning from a redirect operation and there was an error.

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

構成オブジェクトを使用して UserAgentApplication をインスタンス化することで、MSAL 1.x 認証コンテキストを初期化します。Initialize the MSAL 1.x authentication context by instantiating a UserAgentApplication with a configuration object. 最低限必要な構成プロパティは、アプリケーションの clientID です。これは、Azure portal のアプリ登録の [概要] ページにアプリケーション (クライアント) ID として表示されます。The minimum required configuration property is the clientID of your application, shown as the Application (client) ID on the Overview page of the app registration in the Azure portal.

リダイレクト フローを使用した認証メソッドの場合 (loginRedirectacquireTokenRedirect)、MSAL.js 1.2.x 以前では、handleRedirectCallback() メソッドを介して成功またはエラーに対するコールバックを明示的に登録する必要があります。For authentication methods with redirect flows (loginRedirect and acquireTokenRedirect) in MSAL.js 1.2.x or earlier, you must explicitly register a callback for success or error through the handleRedirectCallback() method. MSAL.js 1.2.x 以前では、コールバックを明示的に登録する必要があります。これは、リダイレクト フローがポップアップ エクスペリエンスを持つメソッドのように Promise を返さないためです。Explicitly registering the callback is required in MSAL.js 1.2.x and earlier because redirect flows do not return promises like the methods with a pop-up experience do. バージョン 1.3.x 以降の MSAL.js では、コールバックの登録は省略可能です。Registering the callback is optional in MSAL.js version 1.3.x and later.

// Configuration object constructed
const msalConfig = {
    auth: {
        clientId: "11111111-1111-1111-111111111111"
    }
}

// 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);

単一インスタンスと構成Single instance and configuration

MSAL.js 1.x および 2.x では、UserAgentApplication またはPublicClientApplication の 1 つのインスタンスと構成によって、それぞれが 1 つの認証コンテキストを表すように設計されています。Both MSAL.js 1.x and 2.x are designed to have a single instance and configuration of the UserAgentApplication or PublicClientApplication, respectively, to represent a single authentication context.

UserAgentApplication または PublicClientApplication の複数のインスタンスを使用することは推奨されません。ブラウザー内でキャッシュ エントリおよび動作が競合する原因となるからです。Multiple instances of UserAgentApplication or PublicClientApplication are not recommended as they cause conflicting cache entries and behavior in the browser.

次のステップNext steps

GitHub にある、この MSAL.js 2.x コード サンプルでは、次の構成オブジェクトを使用して PublicClientApplication をインスタンスする方法を示しています。This MSAL.js 2.x code sample on GitHub demonstrates instantiation of a PublicClientApplication with a Configuration object:

Azure-Samples/ms-identity-javascript-v2Azure-Samples/ms-identity-javascript-v2