React 应用程序托管在 S3 存储桶中，使用 OKTA OIDC 授权授予 PKCE 流（AuthSdk 错误）答案

【问题标题】：React application hosted in S3 bucket with OKTA OIDC Authorization grant with PKCE flow (AuthSdk error)React 应用程序托管在 S3 存储桶中，使用 OKTA OIDC 授权授予 PKCE 流（AuthSdk 错误）
【发布时间】：2020-10-03 17:29:30
【问题描述】：

您能否告诉我我们是否可以成功部署托管在 S3 存储桶中的 React 应用程序，该应用程序还与 OIDC 身份验证提供程序 (OKTA) 集成，特别是与 PKCE 流的授权授权。我正面临这个问题（AuthSdk 错误：pkCE 需要具有加密支持的现代浏览器……PS 协议。PKCE 需要安全的 HTTPS 协议云端）

我们尝试遵循 AWS 文档并能够将 React SPA 托管为静态网站，并且还尝试了不同的技巧以成功地将回调重定向到 react 路由器（通过在重定向规则中添加 #!）并最终可以使用OKTA登录方式登录应用，但由于上述错误，回调不会成功。

将 S3 存储桶 url 用作 Cloudfront 分发的源而不是 S3 网站端点（自定义源）是否正确？使用 https url 解决 pkce 错误是否会有所帮助，因为似乎提供了 S3 存储桶 url通过 https，但 S3 网站端点将仅通过 http 提供服务。

当 S3 存储桶配置为源时，Cloudfront 会使用 https url，还是会使用 http url，因为 S3 存储桶是作为静态网站发布的。

您能否分享一下对此方法的任何想法。谢谢！

问候，苏达山。

【问题讨论】：

标签： reactjs amazon-s3 amazon-cloudfront openid-connect okta

【解决方案1】：

标准技术是：

使用 S3 作为上传 Web 静态内容的地方
使用 CloudFront 通过 HTTPS URL 托管
还将 CloudFront 用作内容交付网络以提高 Web 性能

看看我的以下博客文章，其中还包含一个 React SPA：

出于兴趣，您可以使用我的quick start page 上的 URL 和测试登录帐户从上述博客文章中运行已部署的 SPA。

【讨论】：

【解决方案2】：

我使用 Okta 作为 cognito 中的联合身份提供者，并使用 React 作为前端应用程序的 SPA。只要您创建指向 S3 存储桶的 Cloudfront 分发版，它就可以工作，您将应用程序的 React 包上传到该存储桶中。

您需要 https 才能让 Okta 能够将您重定向到所需的回调 URL，但 S3 只为您提供 http。所以你需要将其部署到 Cloudfront 以启用 https。

请记住将 Cloudfront 中的 Origin Domain Name 指向 S3 在启用静态托管后生成的 url。

希望这会有所帮助！

【讨论】：

感谢 Hemant 的回复。是的，我在 Cloudfront 中使用了 S3 网站 url 作为来源。此外，我已将 Cloudfront url 和 S3 网站都配置为 OKTA 应用程序设置中的回调 url。但是，OKTA登录完成并在Callback url上返回给应用程序后，cloudfront不再为应用程序服务，而是重定向到S3 bucket url并抛出上述错误。
您将提供给 okta 的回调 URL 仅适用于 cloudfront 而不是 s3。您现在只能与 Cloudfront url 交互。 S3 现在只用作存储。
好的，赫曼特。将对此进行检查。澄清一下，您是否使用 PKCE 将 OKTA 应用程序设置为隐式授权流或授权授权流？如果您使用 Cognito 作为 idp（反过来又联合 OKTA），您是显式生成 Cognito 的授权 URL 还是使用任何 SDK 来实现？
@SudharshanReddy 我看到你成功了。我实际上是在使用 SAML 而不是 OAuth 和隐式授权，而 cognito 对身份验证 URL 有一个预定义的命名，您可以在其中输入 id 提供者、客户端和其他一些东西……所以是明确的。
好的，赫曼特。我最终得到了以下设置：1）不将 S3 存储桶托管为静态网站托管 2）没有对 S3 的公共访问，但只能访问 Cloudfront 3）将回调 url 更改为 hostname/callback 而不是 hostname/implicit/callback。这有助于回调重定向到根文件夹中的 index.html 而不是 hostname/implicit 文件夹，并避免从隐式文件夹中搜索其他 *.js 文件，并使用 404 重定向配置 Cloudfront。 4) 不知道为什么在很多地方都没有提到在没有托管为 S3 网站的情况下服务器 SPA 应用程序。

【解决方案3】：

最后，在进行以下更改后，我能够解决问题。尽快发布以避免忘记帮助解决我的问题的步骤。如果某些事情应该以更合适的方式完成，请更正。

按照上面 Hemant 的建议，从 OKTA 设置中删除了 S3 存储桶网站网址
更新了 S3 404 重定向规则，使其具有如下所示的云端地址（连同 403 重定向规则）

 <RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <Protocol>https</Protocol>
      <HostName>xyz.cloudfront.net</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

之前，我使用 S3 网站 url 代替 HostName，它重定向回 S3 存储桶 (http)，这似乎是 react 应用程序因 pkce 错误而失败的原因之一。

更新了 Cloudfront 行为以转发查询字符串（这是我之前错过的一个步骤，需要保留回调授权代码以传递给反应代码库。）
另外，将错误文档更新为 S3 存储桶网站配置中的 index.html。
从历史对象的哈希 url 中正确替换 #!/ 并使用 pushState。

var hash = window.location.hash;
const newHashpath = hash.replace("#!/",""); //(/#!(\/.*)$/.exec(window.location.pathname) || [])[1];
if (newHashpath) {
   // history.replace(path);
   window.history.pushState({},'',newHashpath);
}

【讨论】：