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

【问题标题】：aws cognito custom challenge frontend implementation inside vuexvuex 中的 aws cognito 自定义挑战前端实现
【发布时间】：2022-08-03 16:12:02
【问题描述】：

我正在扩展 cognito 登录过程以包括通过电子邮件发送的一次性密码。我按照link 使用 3 个 lambdas 的 AWS 设置（定义、创建和验证挑战）

我按照这个逻辑使用 amazon-cognito-identity-js 进行前端实现 link

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

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

输入邮箱+密码
如果正确，通过电子邮件发送密码并显示提示

获得及时响应并解决 customChallenge

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

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

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

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
        }, 
    });
  }

定义 Auth 质询 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;
};

标签： vue.js vuex amazon-cognito amazon-cognito-triggers

【解决方案1】：

几年前有一个类似的问题 - ReactJS/AWS Cognito getting user input mid-execution。不幸的是，我认为 OP 没有找到解决方案。当我收集状态下的用户输入时，我也尝试插入循环和超时，但它不起作用。

您是否设法找到解决方案？

【讨论】：