用OKTA授权授予PKCE流程托管在亚马逊S3桶中的angular应用程序静态网站的重定向问题

Question 1

我在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的云锋分布
托管域名(Route 53)到CloudFront

Question 2


           
            
             当收到登录响应时，感觉S3在这里提供了错误的文件，而不是你的index.html文件。
            
            
             
              了解登录响应的URI
             
            
            
             这将是一个如下的值，你需要让它为你的index.html文件服务。
            
            
             
              https://web.mycompany.com/myapp/callback?code=abc&state=123
             
            
            
             
              工作代码样本
             
            
            
             你可以登录我的
             
              在线云端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页面加载的一部分来处理--见
             
              该源文件
             
             中对handleLoginResponse的调用。你需要在Angular中做同样的事情。
            
            
             也许浏览我下面的博客文章会提供一些有用的进一步信息--希望其中一些细节能帮助你解决你的问题。
            
            
             
              代码样本概述
             
            
            
             
              网络云的部署/OAuth设置
             
            
            
             
              Lambda Edge默认文件定制

Question 3


           
            
             谢谢加里!
            
            
             我能够通过以下步骤解决这个问题。
            
            
             
              在S3桶中写了重定向规则------。
             
             index.html
            
            
             
              更新了CloudFront行为，通过在CloudFront行为中为 "查询字符串转发和缓存 "选择 "转发全部，基于全部进行缓存 "来转发查询字符串。
             
            
            
             
              在CloudFront的 "错误页面 "中为403和404更新了错误文件到index.html。
             
            
            
             
              在index.html文件中添加以下JavaScript
             
             
              
               <
               
                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
               
               >