帶有 S3 靜態站點前端和 EC2 API 后端的 OAuth2 重定向 URL 應該是什么？

Question

我正在使用 React 應用程序運行通常的設置，其中我使用 S3 和 Cloudfront 作為我的單頁應用程序的前端，然后讓他們查詢 EC2 后端以獲取他們需要的任何數據。 這很好用。

我遇到的問題是創建 OAuth2 授權代碼流。 我讓它工作，客戶端被重定向到谷歌登錄，但我現在困惑的是我應該在成功身份驗證后將用戶重定向到哪里。

“前端”基本上是www.website.com並托管在配置為用作靜態網站的 S3 存儲桶中，而“后端”是www.website.com/api/ 。 我對 Cloudfront 進行了設置，以便www.website.com/api/調用重定向到 EC2 實例，並且所有其他路由都重定向到 S3 存儲桶。

在這種情況下，我應該指定什么作為重定向 URL？ 似乎是這樣，如果我指定“后端”，那么在后端 EC2 路由被命中后，重定向回“前端”不起作用。

是否推薦的方法是將 OAuth2 重定向 URL 指定到“前端”（靜態 S3 站點），並有一個前端路由，然后向 EC2 后端發出請求？ 我擔心的是，不應授予前端（以及用戶）訪問 OAuth2 響應路由的響應數據的權限，但我不確定是否有任何替代方案。

Answer 1

您有一個單頁應用程序和一個 SPA 托管模型，因此重定向應返回到您的 SPA 前端，該前端應使用授權代碼流 (PKCE)。 請參閱此文檔。

一旦 SPA 擁有令牌，它就可以直接調用您的 API。 您可能需要在 EC2 服務器前面考慮一個 API 域，例如 api.mysite.com，並使 AWS API Gateway 作為入口點。

出於興趣，我有一個非常相似的示例 SPA 架構，您可以從這個頁面運行它並與您自己的進行比較。

我的 React SPA 代碼在這里並使用oidc 客戶端庫來管理 SPA 登錄 + 令牌處理，盡管我使用 Cognito 而不是 Google。