MSAL の初期化

MSAL Browser を初期化する前に、まずアプリケーションをMicrosoft Entra 管理センターに登録して、アプリケーション (クライアント) ID を取得します。

CreatePCA パターン

MSAL.js は、アプリのCreatePCAの種類を選択できるPublicClientApplication パターンを提供します。 現在のオプションには、 Standard 構成と Nestable 構成が含まれます。 今後、より多くの構成が導入される予定です。

標準構成

シングルページ アプリケーションで MSAL.js を使用している場合は、msal-browser をインポートして、IPublicClientApplicationを含むcreateStandardPublicClientApplication インスタンスを作成します。 この関数は、標準構成で PublicClientApplication インスタンスを作成します。

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

ネストされたアプリ構成

アプリがハブ SDK (MetaOS フレームワークで実行されている SPA またはデスクトップ アプリケーション) にその認証を委任する iframed 入れ子になったアプリの場合は、msal-browser をインポートして、IPublicClientApplicationを使用してcreateNestablePublicClientApplication インスタンスを作成します。 この関数は、NAA 構成を使用して PublicClientApplication インスタンスを作成します。

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

PublicClientApplication オブジェクトの初期化

MSAL.jsを使用するには、 PublicClientApplication オブジェクトをインスタンス化する必要があります。 アプリケーションの client id (appId) を指定する必要があります。

オプション 1

PublicClientApplication オブジェクトをインスタンス化し、後で初期化します。 initialize関数は非同期であり、他の MSAL.js API を呼び出す前に解決する必要があります。

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

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

方法 2

初期化されたcreatePublicClientApplication オブジェクトを返すPublicClientApplication静的メソッドを呼び出します。 この関数は非同期であることに注意してください。

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

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(省略可能)権限の構成

既定では、MSAL は common テナントで構成されます。これは、(B2C ではなく) 個人アカウントを許可するマルチテナント アプリケーションおよびアプリケーションに使用されます。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

アプリケーションの対象が単一テナントである場合は、以下のようにテナント ID を含む authority を指定する必要があります。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

アプリケーションで "https://login.live.com" や IdentityServer などの OIDC 準拠の別の機関を使用している場合は、 knownAuthorities フィールドに指定し、 protocolMode を "OIDC" に設定する必要があります。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

（任意）リダイレクト URI を設定する

既定では、MSAL は、リダイレクト URI を実行中の現在のページに設定するように構成されています。 MSAL を実行しているページとは異なるページで承認コードを受け取る場合は、構成でこれを設定できます。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

使用するリダイレクト URI は、ポータルの登録で構成する必要があります。 ログイン API と要求 API を使用して、要求ごとのリダイレクト URI を設定することもできます。

(省略可能)追加の構成

MSAL には、ここで確認できる追加の構成オプション があります。

0 個以上の利用可能なアカウントでのアプリ起動の処理

次のフロー図は、1 つのアカウント (または複数のアカウント) が SSO に使用できる場合に、不要な認証プロンプトを回避するのに役立ちます。

相互作用の種類の選択

ブラウザーでは、アプリケーションからユーザーにログイン画面を表示する方法が 2 つあります。

• 現在のページからポップアップ ウィンドウを表示する
• ブラウザー ウィンドウをログイン サーバーにリダイレクトする

ポップアップ API群

• loginPopup
• acquireTokenPopup

ポップアップ API では、ポップアップ内の認証フローが終了して指定されたリダイレクト URI に戻ったときに解決する ES6 Promise を使用するか、コードに問題がある場合やポップアップがブロックされた場合は拒否します。

RedirectUri に関する考慮事項

ポップアップ API を使用する場合、 redirectUri は MSAL リダイレクト ブリッジを実装する専用ページを指す必要があります。 このページでは、認証応答を処理し、メイン アプリケーションに通信します。

リダイレクト ページの設定に関する詳細なガイダンスについては、「 RedirectUri の考慮事項」を参照してください。

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/redirect",
});

リダイレクト API

• loginRedirect
• acquireTokenRedirect

注: msal-angular または msal-reactを使用している場合、リダイレクトは異なる方法で処理されます。詳細については、 msal-angular リダイレクトドキュメント と msal-react FAQ が表示されます。

リダイレクト API は、基本的な情報をキャッシュした後にブラウザー ウィンドウをリダイレクトする非同期 (つまり、promise を返す) void 関数です。 リダイレクト API を使用する場合は、API を 正しく処理するために handleRedirectPromise() を呼び出す必要があることに注意してください。 次の関数を使用して、このトークン交換が完了したときにアクションを実行できます。

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

これにより、ページの再読み込み時にトークンを取得することもできます。 使用方法の詳細については、 onPageLoad サンプル を参照してください。

1 つのアプリケーションで両方の対話の種類を使用することはお勧めしません。

次のステップ

ログインを実行する準備ができました。