單一頁面應用程式登入和登出 - Microsoft identity platform

發行項
06/24/2024

在您可以取得權杖以存取應用程式中的 API 之前，您需要經過驗證的使用者內容。若要驗證使用者，您可以使用彈出視窗和/或重新導向登入方法。

如果應用程式可以存取已驗證的使用者內容或識別碼權杖，您可以略過登入步驟並直接取得權杖。如需詳細資訊，請參閱包含使用者提示的單一登入 (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);
  });

若要叫用特定路由的登入體驗，請匯入 @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 {}

若要在使用者尚未登入時叫用登入體驗，請使用 @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>
    </>
  );
}

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

若要啟用重新導向體驗，請將 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 {}

若要在使用者未登入時叫用登入體驗，請使用 @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>
    </>
  );
}

瀏覽器上的登出行為

若要確保安全登出一或多個應用程式，建議使用下列方法：

在共用裝置上，用戶應該使用瀏覽器的私人/incognito 模式，並關閉所有瀏覽器視窗，然後才離開裝置。
在未共享的裝置上，用戶應該使用操作系統鎖定畫面，在裝置上鎖定或登出其整個操作系統工作階段。 Microsoft 會使用其登出頁面來提醒使用者這些隱私權和安全性最佳做法。

如需詳細資訊，請參閱 Microsoft 的網際網路隱私權最佳做法。

如果使用者選擇不使用建議的方式登出，以下是啟用登出功能的其他方法：

Microsoft 的 OpenID Connect 前端通道登出以進行同盟登出。當應用程式與新的應用程式共用登入狀態，但管理自己的工作階段權仗/Cookie 時，您可以使用此選項。此實作有一些限制，其中內容遭到封鎖，例如瀏覽器封鎖第三方 Cookie 時。
快顯視窗和/或本機應用程式登出的重新導向。快顯和重新導向方法會在端點和本機應用程式結束使用者的工作階段。但是，如果封鎖前端通道通訊，這些方法可能不會立即清除其他同盟應用程式的工作階段。

使用快顯視窗登出

MSAL.js v2 和更新版本提供 logoutPopup 方法，可清除瀏覽器儲存體中的快取，並開啟快顯視窗至 Microsoft Entra 登出頁面。登出之後，重新導向會預設為登入起始頁面，並關閉快顯。

針對登出後的體驗，您可以把postLogoutRedirectUri設定為將使用者重新導向至特定 URI。此 URI 應該註冊為應用程式註冊中的重新導向 URI。您也可以設定 logoutPopup，在要求過程中傳遞 mainWindowRedirectUri，將主視窗重新導向至不同的頁面，例如首頁或登入頁面。

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

// 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: "/"
    });
}

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 登出頁面。登出之後，重新導向預設為登入起始頁。

針對登出後的體驗，您可以把postLogoutRedirectUri設定為將使用者重新導向至特定 URI。此 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);

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

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

下一步

請前往本案例中的下一篇文章：取得應用程式的權杖。

共用方式為

選擇快顯或重新導向體驗

瀏覽器上的登出行為

使用快顯視窗登出

使用重新導向登出

下一步

意見反應

其他資源

共用方式為

單一頁面應用程式：登入和登出

選擇快顯或重新導向體驗

使用快顯視窗登入

使用重新導向登入

瀏覽器上的登出行為

使用快顯視窗登出

使用重新導向登出

下一步

意見反應

其他資源