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

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

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

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

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

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

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

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

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

特定のルートのサインイン エクスペリエンスを呼び出すには、@angular/router をインポートし、ルート定義に MsalGuard を追加します。

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

ポップアップ ウィンドウ エクスペリエンスを有効にするには、MsalGuardConfiguration で interactionType 構成を InteractionType.Popup に設定します。 同意を必要とするスコープを渡すこともできます。

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

React

ユーザーがまだサインインしていないときにサインイン エクスペリエンスを呼び出すには、@azure/msal-react の MsalAuthenticationTemplate 関数を使用します。 MSAL React ラッパーでは、特定のコンポーネントを MsalAuthenticationTemplate コンポーネントでラップすることによって保護します。

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

ユーザー操作 (ボタンの選択など) に基づいて特定のサインイン エクスペリエンスを呼び出すには、@azure/msal-react の AuthenticatedTemplate や UnauthenticatedTemplate 関数を使用します。

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup sign in when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

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

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

リダイレクト エクスペリエンスを有効にするには、MsalGuardConfiguration で interactionType 構成を InteractionType.Redirect に設定し、リダイレクトを処理するために MsalRedirectComponent をブートストラップします。

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

React

ユーザーがサインインしていないときにサインイン エクスペリエンスを呼び出すには、@azure/msal-react の MsalAuthenticationTemplate 関数を使用します。

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

ユーザー操作 (ボタンの選択など) に基づいて特定のサインイン エクスペリエンスを呼び出すには、@azure/msal-react の AuthenticatedTemplate や UnauthenticatedTemplate 関数を使用します。

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

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

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

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

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

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

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

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

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

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

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

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

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton component returns a button that invokes a pop-up sign out when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

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

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

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

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

JavaScript (MSAL.js v2)

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

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

次のステップ

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