在為第三方整合實作oAuth時，我偶然發現了一些很長一段時間沒有更新的資訊。在這裡，我試著記錄我的經驗及其運作方式

注意：本文不會詳細討論oAuth及其運作方式。主要關注如何在 React 應用程式中配置和實現它們。如果您想了解 oAuth，請閱讀此處。提供清晰的資訊。

流程：

大致流程如上所述。

那麼，問題出在哪裡：

通常當您嘗試直接從第三方網站取得代碼和code_verifier時，您可能會遇到CORS問題。這是預料之中的。

如何解決？

1. 與第三方提供者核實 - 如果他們可以將您的網站列入白名單，那就太棒了。你根本不需要後端

2. 如果白名單不起作用，您可能需要一個後端來為您充當反向代理。在我們的例子中，我們使用了一個簡單的打字稿設定來代理我們的呼叫並將其用作反向代理的後端。您也可以透過後端設定來實現它。

為什麼會出現 CORS 問題？

原因很可能是，如果您使用 PKCE，則必須隨請求一起發送身份驗證標頭才能取得令牌。出於安全原因，發送身份驗證是 UI 的禁忌。

CORs 是瀏覽器內建的功能，用於增強安全性。它可以防止任何隨機網站使用您經過驗證的 cookie 向您的銀行網站發送 API 請求並執行諸如秘密提款之類的操作。

我使用哪個函式庫來輕鬆完成反應？

https://github.com/authts/react-oidc-context
？這個。這提供了作為上下文的配置，並且還支援 webstoragestatestore，這很好。

您還有其他問題嗎？

在這裡回覆。如果可以的話，我很樂意提供協助:)

快樂編碼..