次の方法で共有


シングルページ アプリケーション: サインインとサインアウト

アプリケーション内の API にアクセスするトークンを取得する前に、認証されたユーザー コンテキストが必要です。 ユーザーを認証するために、ポップアップ ウィンドウリダイレクト サインイン メソッドを使用することができます。

認証されたユーザー コンテキストまたは ID トークンに、ご利用のアプリケーションからアクセスできる場合は、サインイン手順をスキップして、直接トークンを取得することができます。 詳細については、ユーザー ヒントを使用するシングル サインオン (SSO) に関するページを参照してください。

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

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

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

  • ユーザーのブラウザーに制約またはポリシーがあり、ポップアップ ウィンドウが無効になっている場合は、リダイレクトを使用します。 たとえば、Internet Explorer のポップアップ ウィンドウには既知の問題があります。

ポップアップ ウィンドウを使用してサインインする

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

リダイレクトを使用してサインインする

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

ブラウザーでのサインアウト動作

確実に 1 つまたは複数のアプリから安全にサインアウトするには、次のメソッドをお勧めします。

  • 共有デバイスでは、ユーザーはブラウザーのプライベート/シークレット モードを使用し、デバイスから離れる前にすべてのブラウザー ウィンドウを閉じる必要があります。

  • 共有されていないデバイスでは、ユーザーはオペレーティング システムのロック画面を使用して、デバイス上のオペレーティング システム セッション全体をロックまたはサインアウトする必要があります。 Microsoft ではサインアウト ページを使用して、これらのプライバシーとセキュリティのベスト プラクティスをユーザーに通知します。

詳細については、Microsoft の インターネット プライバシーに関するベスト プラクティスを参照してください。

ユーザーが推奨事項を使用してサインアウトしないことを選択した場合に、サインアウト機能を有効にする他のメソッドを以下に示します。

  • フェデレーション サインアウト用の Microsoft の OpenID Connect のフロント チャネル ログアウト。このオプションは、あるアプリが新しいアプリとサインイン状態を共有するものの、独自のセッション トークン/Cookie を管理する場合に使用できます。 ブラウザーでサードパーティの Cookie がブロックされる場合など、コンテンツがブロックされる場合、この実装にはいくつかの制限があります。

  • ローカル アプリのサインアウト用のポップアップ ウィンドウリダイレクト。ポップアップおよびリダイレクト メソッドでは、エンドポイントとローカル アプリでユーザーのセッションが終了します。 しかし、フロント チャネル通信がブロックされている場合、これらのメソッドでは他のフェデレーション アプリケーションのセッションがすぐにクリアされない可能性があります。

ポップアップ ウィンドウを使用してサインアウトする

MSAL.js v2 以上には logoutPopup メソッドが用意されています。これにより、ブラウザー ストレージのキャッシュがクリアされ、Microsoft Entra サインアウト ページへのポップアップ ウィンドウが開かれます。 サインアウト後、リダイレクトは既定でサインインの開始ページに設定され、ポップアップは閉じられます。

サインアウト後のエクスペリエンスでは、ユーザーを特定の URI にリダイレクトするように postLogoutRedirectUri を設定できます。 この URI は、アプリケーションの登録でリダイレクト URI として登録する必要があります。 要求の一部として mainWindowRedirectUri を渡すことによって、メイン ウィンドウを別のページ (ホーム ページやサインイン ページなど) にリダイレクトするように logoutPopup を構成することもできます。

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

リダイレクトを使用してサインアウトする

MSAL.js には、v1 では logout メソッド、v2 では logoutRedirect メソッドが用意されています。これにより、ブラウザー ストレージのキャッシュがクリアされ、Microsoft Entra サインアウト ページにリダイレクトされます。 サインアウト後、リダイレクトは既定でサインインの開始ページに設定されます。

サインアウト後のエクスペリエンスでは、ユーザーを特定の URI にリダイレクトするように postLogoutRedirectUri を設定できます。 この URI は、アプリケーションの登録でリダイレクト URI として登録する必要があります。

このメソッドではプライベート ブラウザーとロック画面の使用に関するインターネット プライバシーのベスト プラクティスの Microsoft のリマインダーが表示されないため、ベスト プラクティスを説明し、すべてのブラウザー ウィンドウを閉じるようユーザーに通知することができます。

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

次のステップ

このシナリオの次の記事であるアプリのトークンの取得に関する記事に進みます。