javascript - 带有 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 响应路由的响应数据的权限，但我不确定是否有任何替代方案。

标签： javascriptreactjsamazon-web-servicesamazon-ec2oauth-2.0

Answer 1

您有一个单页应用程序和一个 SPA 托管模型，因此重定向应该返回到您的 SPA 前端，该前端应该使用授权代码流 (PKCE)。请参阅此文档。

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

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

我的 React SPA 代码在这里并使用oidc 客户端库来管理 SPA 登录 + 令牌处理，尽管我使用 Cognito 而不是 Google。