具有 PKCE 流的 OKTA 授权授予托管在 Amazon S3 存储桶中的 Angular 应用程序静态网站的重定向问题答案

【问题标题】：Redirection issue with angular application static web site hosted in Amazon S3 bucket with OKTA Authorization grant with PKCE flow具有 PKCE 流的 OKTA 授权授予托管在 Amazon S3 存储桶中的 Angular 应用程序静态网站的重定向问题
【发布时间】：2021-01-30 13:07:32
【问题描述】：

我在 Amazon S3 上托管了 Angular 9 应用程序作为静态网站托管，并与 OIDC 身份验证提供商 (OKTA) 和授权授予与 PKCE 流集成。

应用程序部署成功，当我点击登录时，我的应用程序被重定向到 okta 进行登录，但是当 OKTA 使用隐式/回调重定向时，我的浏览器会抛出以下错误-

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: implicit/callback

我还使用 CloudFront 将 http 重定向到 https。

我的应用设置是：

Angular 应用构建并上传到 Amazon S3
S3 静态网站托管
S3 的云端分发
到 CloudFront 的托管域（Route 53）

【问题讨论】：

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

【解决方案1】：

当收到登录响应时，感觉 S3 在这里提供了错误的文件，而不是您的 index.html 文件。

了解登录响应 URI

这将是一个类似于以下的值，您需要让它为您的 index.html 文件提供服务：

https://web.mycompany.com/myapp/callback?code=abc&state=123

工作代码示例

您可以登录我的Online Cloudfront SPA 与一个类似的有效 SPA 进行比较（我的是用 ReactJS 编码的）。

在我的例子中，注册的重定向 URI 是这样的，并包含一个尾随反斜杠，以防止 S3 重定向丢失登录响应查询参数：

https://web.authsamples.com/spa/

完整的登录响应如下所示：

https://web.authsamples.com/spa/?code=abc&state=123

默认文件

这通常在 S3 设置中指定为 index.html，但您可以通过 lambda 边缘函数进一步自定义它 - 请参阅下面的可视化博客文章链接。

默认文档应处理登录响应

我总是将登录响应作为主要 index.html 页面加载的一部分处理 - 请参阅this source file 中对 handleLoginResponse 的调用。你需要在 Angular 中做同样的事情。

更多信息

也许浏览我下面的博客文章会提供一些有用的进一步信息 - 希望其中一些细节可以帮助您解决问题：

【讨论】：

【解决方案2】：

谢谢加里！

我能够通过以下步骤解决此问题：

在 S3 存储桶中编写重定向规则 -
403 索引.html 404 https www.mydomain.com #!/
通过在“查询字符串转发和缓存”的 CloudFront 行为中选择“全部转发，基于全部缓存”更新了 CloudFront 行为以转发查询字符串
将 CloudFront“错误页面”中 403 和 404 的错误文档更新为 index.html。
将以下 JavaScript 添加到 index.html 文件中

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

【讨论】：