如何使用OAuth2处理SPA的授权和身份验证？

Question

我正在开发SPA，并希望有SSO。据我所知，到目前为止，OAuth2与OIDC是SPA SSO的最佳解决方案。比SAML更好。 到目前为止我还不了解的是如何在SPA的JS代码中使用授权令牌来处理SPA各种资源的授权。例如，我希望具有角色“买方”的用户可以访问购物历史记录选项卡，而其他用户将无权访问该选项卡。 我应该解析从JS代码中的授权服务器获取的访问令牌，并检查用户是否具有查看选项卡的适当角色，或者是否应该在服务器（API）端做出此决定，在这种情况下，SPA的代码将只读取来自API并基于该自定义UI？ 在第一种方法的情况下，是否有任何标准的检查方式（以某些JS库的形式）？ 在身份验证方面，更好的方法是什么（更安全等）：

• 让SPA（此时已经加载到浏览器中）执行身份验证流程并根据结果让用户使用它的受保护功能。这实际上是伪验证，因为代码在用户的浏览器中并且意味着用户正在用自己的代码向自己验证自己。这种认证是否有意义？
• 要求用户验证自己，以便能够在他的浏览器中加载SPA。这可能不是SPA架构，因为为SPA提供服务的后端应该能够使用身份验证服务器创建反向通道。

Answer 1

根据用户描述，您的应用程序必须根据用户类型而有所不同。如果是这种情况，我建议您使用后端进行身份验证，并决定从后端提供应用程序内容。否则，正如您所知，在浏览器上运行身份验证并更改用户视图并不安全。

IMO这不一定会打破SPA架构。您正在做的是根据呈现给您的令牌更改您的服务器。此外，这种方法还需要维持会话。 SPA的后端调用需要包含此会话以获取内容。

Answer 2

用户登录后，您将立即请求身份验证并基于其UserId，并且您所属的角色应该会收到用户有权使用的所有权限。

您将这些权限转换为声明并可以将它们发送回UI并相应地使用它来相应地显示功能。

您还可以在服务器端api上强制执行相同的操作，以防止除UI之外的任何未经授权的访问。