将 Amazon Cognito 的授权代码授予与无服务器/单页 Web 应用程序一起使用

Question

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

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

为 Cognito 用户池配置 App 客户端时，您必须做出的最关键决定是使用授权代码授权还是隐式授权。使用授权代码授予，成功的身份验证将向调用方返回包含 JWT id_token、access_token 和 refresh_token 的会话令牌。使用隐式授权，您的调用者将收到一个授权代码，该代码仅可用于获取 id_token 和 access_token，没有 refresh_token。隐式授权最适用于无服务器（或单页）应用程序，因为它不会向客户端公开长期存在的 refresh_token，该令牌很容易被破坏并用于假设对您的应用程序的有效访问。但是，access_token 有固定的一小时过期时间，目前无法配置。所以，

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

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

当我登录时，我的浏览器 URL 类似于以下内容：https : //www.myapp.com/home?code=ABC123XYZ ... 并且在浏览器的 LocalStorage 中设置了三个 JWT 令牌。但是，如果我立即刷新页面，则会收到“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

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