如何在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中文網其他相關文章！