React 应用程序使用 msal-react，如何自动验证用户

如何解决React 应用程序使用 msal-react，如何自动验证用户

我正在开发一个 React 应用程序，其中的页面可供经过身份验证的用户和匿名用户使用。这些页面为经过身份验证的用户显示了更多功能。

如果用户之前已登录并重新访问该网站，我希望该用户能够自动进行身份验证，并且正在努力实现这一目标。

我使用重定向方法是因为我不相信弹出窗口在手机上运行良好（这个假设正确吗？）。

我尝试将 homeAccountId 存储在本地存储中，并使用它来获取使用的帐户，然后在 msal 实例中调用 login。我还设置了一个 addEventCallback 并监听 EventType.LOGIN_SUCCESS，我用它来设置有关登录用户的一些内部状态。

我曾尝试使用 MsalAuthenticationTemplate 但奇怪的是这不会调用登录。我还尝试检测这是否是“第一次运行”然后调用登录，但这并不总是有效。有时我会收到一个 SSO 错误，指示我应该提供 login_hint 或 sid，这是不可能的，因为我使用 B2C。

如果我什么都不做，用户可以点击登录按钮，如果用户有一个有效的 B2C cookie，用户登录时没有提供凭据，这对用户来说是一种奇怪的行为，因为我的网站表明用户是未通过身份验证（并且不显示退出按钮）。

所以我真的无法让它发挥作用，想知道是否有人有实现这一目标的概念？

解决方法

请查看 msal-react samples，它们都展示了您正在寻找的行为。 MsalAuthenticationTemplate 将是执行此操作的推荐方法，如果您在查看示例后仍然无法使用它，我建议您打开带有代码片段的 issue on our repo，以便我们仔细查看正在发生的事情。

如果您还没有使用 localStorage，也有助于在浏览器会话之间维护应用程序状态。 sessionStorage 是默认值。

至于 B2C 不要求凭据；服务器状态与客户端状态是分开的。您可以在应用程序不知情的情况下登录服务器。在您的应用程序向 B2C 服务器发出请求之前，您的应用程序将显示用户未登录。如果在您发出登录请求时服务器上已存在会话，则服务器可能会将您重定向回您的应用程序，而无需提供凭据再次。