使用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

如果您的應用程序可以在瀏覽器本地存儲中找到有效的訪問令牌，則可以重定向以從查詢字符串中刪除代碼或檢查頁面加載，在這種情況下，忽略查詢字符串中收到的代碼。