带有OKCE授权和PKCE流的Amazon S3存储桶中托管的角度应用程序静态网站的重定向问题

编程问答 2022-06-08

问题描述

我已经在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。

我的应用程序设置是：

  1. 构建角度应用程序并上传到Amazon S3
  2. S3静态网站托管
  3. S3的Cloud Front distribution
  4. 托管域（Route 53）到CloudFront

解决方法

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

了解登录响应URI

这将是一个诸如以下的值，并且您需要使它成为您的index.html文件：

工作代码示例

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

在我的情况下，已注册的重定向URI是这个，并包含一个反斜杠，以防止S3重定向丢失登录响应查询参数：

完整的登录响应如下：

默认文档

通常可以在S3设置中将其指定为index.html，尽管您可以通过lambda edge函数对其进行进一步自定义-请参阅下面我到可视博客文章的链接。

默认文档应处理登录响应

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

更多信息

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

,

谢谢加里！

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

  1. 在S3存储桶中写入重定向规则-

    403 index.html 404 https www.mydomain.com ＃！/

  2. 通过在CloudFront行为中为“查询字符串转发和缓存”选择“全部转发，基于所有缓存”来更新CloudFront行为以转发查询字符串

  3. 在403和404的CloudFront“错误页面”中将错误文档更新为index.html。

  4. 在index.html文件中添加以下JavaScript 

In [1190]: import numpy as np

In [1191]: df1 = df.T
In [1197]: df1[0] = np.where(df1[1].notna(),df1[1],df1[0])

In [1200]: df = df1[0].to_frame().T

In [1201]: df
Out[1201]: 
  book1  book2 book3 book4
0     1  genre     3     1

amazon-cloudfrontamazon-s3angularangularoktaopenid-connect