vuex 中的 aws cognito 自定义挑战前端实现

Question

我正在扩展 cognito 登录过程以包括由 email 发送的一次性密码。 我按照此链接使用 3 个 lambda 进行 AWS 设置（定义、创建和验证质询）

我按照此链接中的逻辑使用 amazon-cognito-identity-js 进行前端实现

在前端，我使用 vuex 存储通过以下登录操作来处理身份验证。 我遇到的问题是该实现有效，但我无法真正控制它以将其正确集成到现有的 UI 和登录表单中。 它目前使用简单的提示来捕获输入一次性密码的用户，这使得 function 易于运行并处理错误输入和重试。

我正在寻找有关如何修改或分解流程以获得更多控制权的指导。 当前进程运行如下：

1. 输入 email + 密码
2. 如果正确，通过 email 发送密码并显示提示
3. 获得及时响应并解决 customChallenge

目前在第 1 点和第 2 点之间没有回调，服务器端我定义了最多 3 次重试，但也没有关于尝试次数的回调。 要正确执行此操作，我需要在第 1 点之后停止该过程。然后向用户显示一个输入字段以捕获密码并向他提供有关尝试次数的反馈。

我只是对如何在 vuex 中实现这一点感到困惑。 我尝试在 customChallenge 部分中添加一个循环或间隔，但没有让它工作。 我觉得应该调用第二个异步操作来等待用户输入，也许吧？ 或者我应该在运行挑战的 lambda function 中添加回调？

希望有人曾经经历过这个过程。

Vuex 动作：

 async customAuth({dispatch, commit, state}, data){

    var authData = { Username: data.email, Password: data.password, };
    var authDetails = new AuthenticationDetails( authData );
    var userData = { Username: data.email, Pool: userPool, };
    var cognitoUser = new CognitoUser(userData);

    cognitoUser.setAuthenticationFlowType('CUSTOM_AUTH');

    cognitoUser.authenticateUser(authDetails, {


          onSuccess: function(result) {

                var logins = {}
                logins['cognito-idp.' + awsLinks.aws_cognito_region + '.amazonaws.com/' + awsLinks.identityPoolId] = result.getIdToken().getJwtToken()

                Config.region = awsLinks.aws_cognito_region
                Config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: awsLinks.identityPoolId, Logins: logins });
                console.log('LOGIN SUCCESS------')
                return result

          },

          customChallenge: function(challengeParameters) {

            var verificationCode = prompt('Please input code sent to your email address: ' ,'');
            cognitoUser.sendCustomChallengeAnswer(verificationCode, this);

          },

          onFailure: function(err) {

            console.log('Cognito Login Error')
            alert(err.message || JSON.stringify(err)); 
            return false
        }, 
    });
  }

定义身份验证挑战 Lambda：

exports.handler = async (event:any) => {
    if (event.request.session && event.request.session.length === 1
        && event.request.session[0].challengeName === 'SRP_A'
        && event.request.session[0].challengeResult === true) {
        //SRP_A is the first challenge, this will be implemented by cognito. Set next challenge as PASSWORD_VERIFIER.
        event.response.issueTokens = false;
        event.response.failAuthentication = false;
        event.response.challengeName = 'PASSWORD_VERIFIER';

        
    } else if (event.request.session && event.request.session.length === 2
        && event.request.session[1].challengeName === 'PASSWORD_VERIFIER'
        && event.request.session[1].challengeResult === true) {
        //If password verification is successful then set next challenge as CUSTOM_CHALLENGE.
        event.response.issueTokens = false;
        event.response.failAuthentication = false;
        event.response.challengeName = 'CUSTOM_CHALLENGE';
        
    } else if (event.request.session && event.request.session.length >= 5
        && event.request.session.slice(-1)[0].challengeName === 'CUSTOM_CHALLENGE'
        && event.request.session.slice(-1)[0].challengeResult === false) {
        //The user has exhausted 3 attempts to enter correct otp.
        event.response.issueTokens = false;
        event.response.failAuthentication = true;
        
    } else if (event.request.session  && event.request.session.slice(-1)[0].challengeName === 'CUSTOM_CHALLENGE'
        && event.request.session.slice(-1)[0].challengeResult === true) {
        //User entered the correct OTP. Issue tokens.
        event.response.issueTokens = true;
        event.response.failAuthentication = false;
        
    } else {
        //user did not provide a correct answer yet.
        event.response.issueTokens = false;
        event.response.failAuthentication = false;
        event.response.challengeName = 'CUSTOM_CHALLENGE';
    }

    return event;
};