Reactjs 我应该如何在我的案例中使用OAuth 2.0授权授权（React前端、Spring Boot后端）

对于如何为我的web应用程序使用OAuth 2.0授权，我有点困惑

我知道水疗的隐性补助金现已停用，我应该使用授权补助金

然而，我读过的文章和文档，以及我看过的视频仍然有些含糊不清

如果我有一个React JS前端和一个Spring Boot后端，我可以看到三种方式来进行令牌交换。因此，当用户单击登录时，我可以：

1）让我的React前端执行授权授予，而不使用客户端密码，并按照OAuth 2.0 SPA文档的建议获取令牌

2）让我的React前端执行授权授权的一半，即获取授权代码。然后将其传递到我的后端，与客户机机密交换授权代码，以获取回令牌，然后将此令牌传递到我的前端

（这是此处推荐的方法：）

老实说，我不明白这将如何工作，因为前端和后端的客户端ID肯定会有所不同

3）让我的React前端将授权流委托给我的后端服务器，后端服务器可以使用客户端密码执行授权授予

---

我是否误解了什么，或者所有这些方法都是可能的？这里推荐的方法是什么？

这些都是可行的，但风险不同。最重要的区别可能是在身份验证期间哪个组件可以访问哪个组件。考虑到每个组件都会受到破坏，攻击者将得到什么。

让我们从上面的#3开始。作为此应用程序的用户，我必须在SPA中输入我的凭据，然后将其传递到您的后端。凭据将同时显示给SPA和后端，如果其中任何凭据被泄露，攻击者将直接获得对用户名和密码对的访问权限。这是一个你可能不想冒的风险，如果你不必冒的话。此外，如果身份提供商是公共提供商（不特定于您的应用程序），这将不起作用，也就是说，我不想在您的应用程序中输入我的Facebook密码

#从这个角度来看，上面的1更好，因为您的后端永远无法访问实际的用户凭据（他们的密码）。根据实现的不同，如果您将用户重定向到身份提供者以输入密码，SPA也不需要访问，但这是一种UX折衷。在这种情况下，SPA和后端都有访问令牌，这很容易受到潜在的XSS攻击。如果其中一个被破坏，攻击者可能获得访问令牌的权限，并在其有效时使用它

#2通过SPA永远无法访问访问令牌（只有身份验证代码）进一步改进了这一点。在这种情况下，SPA可能会与您的后端有一个常规会话（会话令牌可能位于httponly cookie中），这是针对XSS的安全性，后端可以使用交换的访问令牌查询它可以访问的任何资源。您可能会争辩说SPA拥有身份验证代码，攻击者也可以将其交换为访问令牌，但一方面身份验证代码应该是一次性令牌，而且SPA不需要存储身份验证代码，它只需要将其传递到后端一次

---

所有这些都存在并可行的原因是，有时出于安全之外的原因，您无法执行其中一项或另一项。选择一个在满足功能、用户体验和其他要求的同时，向应用程序中最少的组件公开最少的内容，并始终理解您隐含接受的风险。

这是一个非常好的回答，非常感谢，谢谢！