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

Question

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

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

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

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

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

当我登录时，我的浏览器URL类似于以下内容： https ：//www.myapp.com/home？code = ABC123XYZ ...并且三个JWT令牌在浏览器的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

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