javascript - 将 Amazon Cognito 的授权码授予用于无服务器/单页 Web 应用程序

Question

我正在尝试开发一个由 API 网关(带有 Amazon Cognito 自定义授权器)、Lambda 和 DynamoDB 组成的无服务器 JavaScript Web 应用程序。这篇文章是我在完全放弃之前(第二次)让 Cognito 满足我的需求的最后一次尝试。由于 Cognito 文档令人困惑和缺乏，我将尝试注入(inject)一些我学到的东西。

借助 Cognito，您可以使用自己的注册、登录等网页开发自定义身份验证工作流程。您还可以选择利用 Amazon 的托管 Web UI 使事情变得更简单(尽管只有很少的 HTML/CSS 自定义选项)。 我正在使用后者。

为 Cognito 用户池配置 App Client 时，您必须做出的最关键的决定是使用授权代码授予还是隐式授予。通过授权代码授予，成功的身份验证将向您的调用方返回一个包含 JWT id_token、access_token 和 refresh_token 的 session token 。使用隐式授予，您的调用者将收到一个授权代码，该代码可用于仅获取 id_token 和 access_token，没有 refresh_token。 Implicit Grant 最适合无服务器(或单页)应用程序，因为它不会向客户端公开长期存在的 refresh_token，该客户端很容易被破坏并用于假定对您的应用程序的有效访问。但是，access_token 的固定有效期为一小时，此时无法配置。因此，如果没有刷新 token 来静默更新 access_token，您的用户将不得不每小时登录一次。

由于我的 Web 应用程序绝不会包含敏感信息，我将使用授权代码授予并将 token 保存在浏览器的 LocalStorage 中(这是不安全的，不推荐，并且是一种不好的做法) 希望在某个时候，Cognito 将完全遵守 OpenId 规范并为 refresh tokens with implicit grants via prompt=none 提供全面支持.如您所见，亚马逊对此事一直没有回应。哎呀，即使是自定义 access_token 过期时间的选项(使用隐式授权)也是一个不错的折衷方案。

所以我已经成功部署了来自 amazon-cognito-auth-js 的示例应用程序JavaScript 库，旨在与托管 Web UI 流程一起使用。这不应与 amazon-cognito-identity-js 库混淆，如果您正在开发自己的自定义身份验证工作流程，则应使用该库。 amazon-cognito-auth-js 库同时支持授权代码授予和隐式授予，并将处理 token 解析、将它们缓存到 LocalStorage 或从 LocalStorage 中检索它们，并使用刷新 token 静默更新 access_token(用于授权代码格兰特)。

当我登录时，我的浏览器 URL 类似于以下内容:https://www.myapp.com/home?code=ABC123XYZ ...并且三个 JWT token 设置在浏览器的 LocalStorage 中。但是，如果我立即刷新页面，我会收到一个“invalid_grant”错误，因为授权代码仍在 URL 中并且已经被使用。我是否应该在成功登录后进行页面重定向以从 URL 中删除授权代码？下面是我计划从应用程序中每个页面的 onLoad() 调用的主要代码:

function initCognitoSDK() {
        var authData = {
            ClientId : '<TODO: your app client ID here>', // Your client id here
            AppWebDomain : '<TODO: your app web domain here>', // Exclude the "https://" part. 
            TokenScopesArray : <TODO: your scope array here>, // like ['openid','email','phone']...
            RedirectUriSignIn : '<TODO: your redirect url when signed in here>',
            RedirectUriSignOut : '<TODO: your redirect url when signed out here>',
            IdentityProvider : '<TODO: your identity provider you want to specify here>', 
                    UserPoolId : '<TODO: your user pool id here>', 
                    AdvancedSecurityDataCollectionFlag : <TODO: boolean value indicating whether you want to enable advanced security data collection>
        };
        var auth = new AmazonCognitoIdentity.CognitoAuth(authData);
        // You can also set state parameter 
        // auth.setState(<state parameter>);  
        auth.userhandler = {
            onSuccess: function(result) {
                alert("Sign in success");
                showSignedIn(result);
            },
            onFailure: function(err) {
                alert("Error!" + err);
            }
        };
        // The default response_type is "token", uncomment the next line will make it be "code".
        auth.useCodeGrantFlow();
        return auth;
    }

Answer 1

如果您的应用可以在浏览器本地存储中找到有效的访问 token ，您可以重定向以从查询字符串中删除代码或检查页面加载，在这种情况下，忽略查询字符串中收到的代码。