如何在react中使用PKCE实现oAuth以进行第三方集成

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

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

流程：

流程大致如上所述。

那么，问题出在哪里：

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

如何解决？

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

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

为什么会出现 CORS 问题？

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

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

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

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

您还有其他问题吗？

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

编码愉快..

以上是如何在react中使用PKCE实现oAuth以进行第三方集成的详细内容。更多信息请关注PHP中文网其他相关文章！