angular 托管在 Amazon S3 存储桶中的应用程序静态网站的重定向问题，使用 PKCE 流程授予 OKTA 授权

Question

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

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

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

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

我的应用程序设置是：

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

Answer 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.

中做同样的事情

更多信息

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

Answer 2

谢谢加里！

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

在 S3 存储桶中写入重定向规则 -
403 index.html 404 https www.mydomain.com #!/
通过在“查询字符串转发和缓存”的 CloudFront 行为中选择“全部转发，基于所有缓存”更新了 CloudFront 行为以转发查询字符串
已将 403 和 404 的 CloudFront“错误页面”中的错误文档更新为 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>

angular 托管在 Amazon S3 存储桶中的应用程序静态网站的重定向问题，使用 PKCE 流程授予 OKTA 授权

Redirection issue with angular application static web site hosted in Amazon S3 bucket with OKTA Authorization grant with PKCE flow

amazon-s3

amazon-cloudfront

openid-connect

okta

angular