在为第三方集成实现oAuth时，我偶然发现了一些很长一段时间没有更新的信息。在这里，我试图记录我的经验及其运作方式

注意：本文不会详细讨论oAuth及其工作原理。主要关注如何在 React 应用程序中配置和实现它们。如果您想了解 oAuth，请阅读此处。提供清晰的信息。

流程：

大致流程如上所述。

那么，问题出在哪里：

通常当您尝试直接从第三方网站获取代码和code_verifier时，您可能会遇到CORS问题。这是预料之中的。

如何解决？

1. 与第三方提供商核实 - 如果他们可以将您的网站列入白名单，那就太棒了。你根本不需要后端

2. 如果白名单不起作用，您可能需要一个后端来为您充当反向代理。在我们的例子中，我们使用了一个简单的打字稿设置来代理我们的调用并将其用作反向代理的后端。您也可以通过后端设置来实现它。

为什么会出现 CORS 问题？

原因很可能是，如果您使用 PKCE，则必须随请求一起发送身份验证标头才能获取令牌。出于安全原因，发送身份验证是 UI 的禁忌。

CORs 是浏览器内置的一项功能，用于增强安全性。它可以防止任何随机网站使用您经过身份验证的 cookie 向您的银行网站发送 API 请求并执行诸如秘密取款之类的操作。

我使用哪个库来轻松完成反应？

https://github.com/authts/react-oidc-context
？这个。这提供了作为上下文的配置，并且还支持 webstoragestatestore，这很好。

您还有其他问题吗？

在这里回复。如果可以的话，我很乐意提供帮助:)

快乐编码..