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

Question

我正在开发SPA，并且希望拥有SSO。 到目前为止，据我了解，带有OIDC的OAuth2是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上强制执行相同操作，以防止从用户界面访问任何未经授权的访问。