如何解决带有OKCE授权和PKCE流的Amazon S3存储桶中托管的角度应用程序静态网站的重定向问题
我已经在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。
我的应用程序设置是:
解决方法
当收到登录响应时,感觉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中做同样的事情。
更多信息
也许浏览下面的我的博客文章将提供一些有用的进一步信息-希望其中的一些细节可以帮助您解决问题:
- Code Sample Overview
- Web Cloud Deployment / OAuth Settings
- Lambda Edge Default Document Customisation
谢谢加里!
我能够通过以下步骤解决此问题:
-
在S3存储桶中写入重定向规则-
403 index.html 404 https www.mydomain.com #!/ -
通过在CloudFront行为中为“查询字符串转发和缓存”选择“全部转发,基于所有缓存”来更新CloudFront行为以转发查询字符串
-
在403和404的CloudFront“错误页面”中将错误文档更新为index.html。
-
在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。