單頁應用程式登入和註銷 - Microsoft identity platform

發行項
05/09/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 {}

若要啟用彈出視窗體驗，請在中將組interactionType態設定為 InteractionType.Popup 。MsalGuardConfiguration 您也可以傳遞需要同意的範圍。

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

若要根據使用者互動叫用特定的登入體驗（例如，按鈕選取），請使用 AuthenticatedTemplate 中的@azure/msal-react和/或 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);

若要啟用重新導向體驗，請將 interactionType 中的組態InteractionType.Redirect設定設為，然後啟動程序MsalRedirectComponentMsalGuardConfiguration來處理重新導向。

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

若要根據使用者互動叫用特定的登入體驗（例如，按鈕選取），請使用 AuthenticatedTemplate 中的@azure/msal-react和/或 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 連線同盟註銷的 Front Channel Logout。當應用程式與新應用程式共用登入狀態，但管理自己的會話令牌/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提供 logout v1 中的方法，以及 logoutRedirect v2 中清除瀏覽器記憶體中的快取，並重新導向至 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>
    </>
  );
}

下一步

請移至此案例中的下一篇文章，取得應用程式的令牌。

單頁應用程式：登入和註銷

選擇快顯或重新導向體驗

使用彈出視窗登入

使用重新導向登入

瀏覽器上的註銷行為

使用彈出視窗註銷

使用重新導向註銷

下一步

其他資源