單頁應用程式：新增登入和登出代碼

適用於： 員工租戶 外部租戶 （了解更多）

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

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

選擇快顯或重新導向體驗

快顯或重新導向體驗的選擇取決於應用程式流程。

• 如果您不想讓使用者在驗證期間離開主要的應用程式頁面，請使用快顯視窗。 由於驗證重新導向會發生在快顯視窗，因此主要應用程式的狀態會保留。
• 如果使用者具有瀏覽器條件約束，或已停用快顯視窗的原則，請使用重新導向。 例如，Internet Explorer 上有已知的快顯視窗問題。

使用快顯視窗登入

反應

若要在使用者尚未登入時叫用登入體驗，請使用 MsalAuthenticationTemplate 中的 @azure/msal-react 函式。 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 中的 UnauthenticatedTemplate 和/或 @azure/msal-react 函式。

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）

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）

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

使用重新導向登入

反應

若要在使用者未登入時叫用登入體驗，請使用 MsalAuthenticationTemplate 中的 @azure/msal-react 函式。

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 中的 UnauthenticatedTemplate 和/或 @azure/msal-react 函式。

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

JavaScript （MSAL.js）

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）

若要啟用重新導向體驗，請將 interactionType 中的 InteractionType.Redirect 組態設定設為 MsalGuardConfiguration，然後啟動程序 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 {}

瀏覽器上的登出行為

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

• 在共用裝置上，用戶應該使用瀏覽器的私人/incognito 模式，並關閉所有瀏覽器視窗，然後才離開裝置。

• 在未共享的裝置上，用戶應該使用操作系統鎖定畫面，在裝置上鎖定或登出其整個操作系統工作階段。 Microsoft 會使用其登出頁面來提醒使用者這些隱私權和安全性最佳做法。

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

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

• Microsoft 的 OpenID Connect 前端通道登出以進行同盟登出。當應用程式與新的應用程式共用登入狀態，但管理自己的工作階段權仗/Cookie 時，您可以使用此選項。 此實作有一些限制，其中內容遭到封鎖，例如瀏覽器封鎖第三方 Cookie 時。

• 快顯視窗和/或本機應用程式登出的重新導向。快顯和重新導向方法會在端點和本機應用程式結束使用者的工作階段。 但是，如果封鎖前端通道通訊，這些方法可能不會立即清除其他同盟應用程式的工作階段。

使用快顯視窗登出

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

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

JavaScript （MSAL.js）

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）

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

使用重新導向登出

MSAL.js 提供的 logoutRedirect 方法在 v2 中清除瀏覽器存儲中的快取，並且重新導向至 Microsoft Entra 登出頁面。 登出之後，重新導向預設為登入起始頁。 針對登出後的體驗，您可以把postLogoutRedirectUri設定為將使用者重新導向至特定 URI。 此 URI 應該註冊為應用程式註冊中的重新導向 URI。

因為Microsoft使用私人瀏覽器和鎖定畫面的 因特網隱私權最佳做法 的提醒未顯示在此方法中，所以您可能會想要描述最佳做法，並在使用者註銷應用程式時提醒使用者關閉所有瀏覽器視窗。

反應

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

JavaScript （MSAL.js）

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）

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

後續步驟

• 取得應用程式的令牌。