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

Question

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

如果用户之前已经登录并恢复了网站，我希望用户自动进行身份验证，并且正在努力实现这一点。

我之所以使用重定向方法，是因为我不相信popup在手机上工作得很好(这个假设正确吗？)。

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

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

如果我不做任何事情，用户可以单击登录按钮，如果用户有一个有效的B2C cookie，则用户在没有提供凭据的情况下登录，这对用户来说是一种奇怪的行为，因为我的网站表明用户没有经过身份验证(并且不显示注销按钮)。

所以我真的不能让它工作，我想知道是否有人有实现这一目标的概念？

Answer 1

请查看msal-react samples，它们都演示了您正在寻找的行为。MsalAuthenticationTemplate将是实现这一点的推荐方法，如果您在查看示例后仍然有问题，我建议您打开一个包含代码片段的issue on our repo，这样我们就可以更仔细地了解发生了什么。

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

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