React MSAL：如何从所有设备注销？

Question

我们有一个应用程序，其中我们使用 msal-reactct 用于login/logout。

是否有一种方法可以在登录时登录用户登录的所有设备？

不幸的是，官方文档关于这个。

我们也有登录的问题，因此用户必须在新的选项卡中再次登录（在打开不同的微观前端时 - 所有这些都使用相同的登录会话），尽管令牌存储在本地存储中。

希望有人可以在这里提供帮助或提供文档。

Answer 1

当您必须使用 msal-react 的应用程序注销所有设备时，您可以肯定地配置所需的应用程序以登录所有在应用程序中的登录实例，如下所示：

msal.js v2提供logoutPopup方法，该方法清除了浏览器存储中的高速缓存，并将弹出窗口打开到Azure Active Directory（Azure AD）登录页面。登录后，Azure AD将弹出窗口重定向到您的应用程序，MSAL.js将关闭弹出窗口。

通过这种方式，您可以确保您的React应用程序已从Azure Active Directory登录，并且所有设备都将用户登录的信息汇总。

使用弹出窗口签名：

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

类似地，如果您使用重定向方法参考用于从应用程序中登录的方法，则必须通过设置Postlogoutredirecturi来配置其在登录后应重定向到的URI。该URI应在您的申请注册中注册为重定向URI。

有关更多信息，请参考下面的文档链接：

https://learn.microsoft.com/en-us/azure/active-directory/directory/develip/scenario-scenario-spa-sign-sign-sign-sign-sign-sign-sign-sign-sign-sign-sign-sign-在？tabs = react＃签名 - with-a-pop-up-window