シングルページ アプリケーション:API を呼び出すトークンを取得する

MSAL.js を使用して API 用のトークンを取得するパターンは、acquireTokenSilent メソッドを使用してサイレント トークン要求を最初に試行することです。 このメソッドが呼び出されると、ライブラリでは、まずブラウザー ストレージ内のキャッシュを調べて、期限切れでないアクセス トークンが存在するかどうかを確認し、それを返します。 アクセス トークンが見つからないか、見つかったアクセス トークンの有効期限が切れている場合は、その更新トークンを使用して新しいアクセス トークンを取得しようとします。 更新トークンの 24 時間の有効期間も期限切れになった場合、MSAL.js は非表示の iframe を開き、Azure AD との既存のアクティブなセッション (存在する場合) を利用して新しい認可コードをサイレントに要求します。その後、これは新しいトークン セット (アクセス "および" 更新のトークン) と交換されます。 シングル サインオン (SSO) セッションおよび Azure AD 内のトークン有効期間値の詳細については、トークンの有効期間に関するページを参照してください。 MSAL.js キャッシュ検索ポリシーの詳細については、「アクセス トークンの取得」を参照してください。

Azure AD へのサイレント トークン要求は、パスワードの変更や条件付きアクセス ポリシーの更新などの理由により、失敗する場合があります。 エラーは多くの場合、更新トークンの 24 時間の有効期限が切れ、ブラウザーがサード パーティの Cookie をブロックしていることが原因で発生します。この場合、非表示の iframe を使用してユーザーの認証を継続することができなくなります。 このような場合は、トークンを取得するために、(ユーザーにプロンプトを表示できる) 対話型のメソッドのいずれかを呼び出す必要があります。

ポップアップ エクスペリエンスか、リダイレクト エクスペリエンスを選択

ポップアップまたはリダイレクト エクスペリエンスのいずれを選択するかは、ご利用のアプリケーション フローに依存します。

  • 認証中にユーザーにメイン アプリケーション ページから移動してほしくない場合は、ポップアップ メソッドをお勧めします。 認証リダイレクトはポップアップ ウィンドウで行われるため、メイン アプリケーションの状態は保持されます。

  • ポップアップウィンドウが無効になっているブラウザの制約またはポリシーがある場合は、リダイレクト方法を使用できます。 Internet Explorer のポップアップ ウィンドウには既知の問題 があるので、Internet Explorer ブラウザーでは、リダイレクト メソッドを使用してください。

アクセス トークン要求を作成するときにアクセス トークンに含める API スコープを設定することができます。 要求されたすべてのスコープがアクセス トークンに付与されるとは限りません。 これは、ユーザーの同意によって異なります。

ポップアップ ウィンドウを使用してトークンを取得する

次のコードでは、前に説明したパターンと、ポップアップ エクスペリエンスのメソッドを組み合わせています。

// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = publicClientApplication.getAllAccounts()[0];

const accessTokenRequest = {
  scopes: ["user.read"],
  account: account,
};

publicClientApplication
  .acquireTokenSilent(accessTokenRequest)
  .then(function (accessTokenResponse) {
    // Acquire token silent success
    let accessToken = accessTokenResponse.accessToken;
    // Call your API with token
    callApi(accessToken);
  })
  .catch(function (error) {
    //Acquire token silent failure, and send an interactive request
    if (error instanceof InteractionRequiredAuthError) {
      publicClientApplication
        .acquireTokenPopup(accessTokenRequest)
        .then(function (accessTokenResponse) {
          // Acquire token interactive success
          let accessToken = accessTokenResponse.accessToken;
          // Call your API with token
          callApi(accessToken);
        })
        .catch(function (error) {
          // Acquire token interactive failure
          console.log(error);
        });
    }
    console.log(error);
  });

リダイレクトを使用してトークンを取得する

次のパターンは前述したとおりですが、トークンを対話形式で取得するリダイレクト メソッドを使用して示しています。 ページの読み込み時に handleRedirectPromise を呼び出して待つ必要があります。

const redirectResponse = await publicClientApplication.handleRedirectPromise();
if (redirectResponse !== null) {
  // Acquire token silent success
  let accessToken = redirectResponse.accessToken;
  // Call your API with token
  callApi(accessToken);
} else {
  // MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
  const account = publicClientApplication.getAllAccounts()[0];

  const accessTokenRequest = {
    scopes: ["user.read"],
    account: account,
  };

  publicClientApplication
    .acquireTokenSilent(accessTokenRequest)
    .then(function (accessTokenResponse) {
      // Acquire token silent success
      // Call API with token
      let accessToken = accessTokenResponse.accessToken;
      // Call your API with token
      callApi(accessToken);
    })
    .catch(function (error) {
      //Acquire token silent failure, and send an interactive request
      console.log(error);
      if (error instanceof InteractionRequiredAuthError) {
        publicClientApplication.acquireTokenRedirect(accessTokenRequest);
      }
    });
}

次のステップ

このシナリオの次の記事である Web API の呼び出しに関する記事に進みます。