javascript - 对于 S3 静态站点前端和 EC2 API 后端，我的 OAuth2 重定向 URL 应该是什么？

Question

我正在运行 usual setup在 React 应用程序中，我使用 S3 和 Cloudfront 作为我的单页应用程序的前端，然后让它们查询 EC2 后端以获取他们需要的任何数据。这很好用。

我遇到的问题是创建 OAuth2 授权代码流程。我让它工作，以便将客户端重定向到 Google 进行登录，但我现在感到困惑的是，在成功验证后我应该将用户重定向到哪里。

“前端”基本上是 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)。参见 this doc .

一旦 SPA 有了 token ，它就可以直接调用您的 API。您可能需要在 EC2 服务器前面考虑一个 API 域，例如 api.mysite.com，并将 AWS API Gateway 作为入口点。

出于兴趣，我有一个非常相似的示例 SPA 架构，您可以从 this page 运行它并与您自己的进行比较。

我的 React SPA 代码是 here并使用 oidc client library管理 SPA 登录 + token 处理，尽管我使用 Cognito 而不是 Google。