Question

我正在为我在React中构建的Web应用程序创建登录流程，并且正在使用AWS Cognito进行用户管理。我正在处理登录流程，并且有一个用例，其中通过AWS控制台创建了一个用户，并向该用户提供了一个临时密码。当用户第一次登录我的应用程序时，AWS Cognito返回一个newPasswordRequired质询，并且该用户被迫更改密码。

我正在使用amazon-cognito-identity-js API来验证用户身份。可以在here中找到该文档。我已经按照文档中的说明进行了newPasswordRequired回调函数的设置，但是我一直在努力寻找在newPasswordRequired函数中使用React从用户那里收集新密码的最佳方法。我最初在函数中使用prompt()来获取输入，但是我希望该应用程序进入新页面，用户可以在其中输入新密码，确认新密码并登录到该应用程序。该新页面应该能够调用更新新密码所需的cognitoUser.completeNewPasswordChallenge()。请帮忙！这是我的代码如下：

onFormSubmission = (username, password) => {
    const poolData = {
      UserPoolId : AWSConfig.cognito.USER_POOL_ID,
      ClientId : AWSConfig.cognito.APP_CLIENT_ID
    }
    const userPool = new CognitoUserPool(poolData);
    const userData = {
      Username: username,
      Pool: userPool
    }
    const authenticationData = {
        Username : username,
        Password : password
    }
    const authenticationDetails = new AuthenticationDetails(authenticationData);

    const cognitoUser = new CognitoUser(userData);

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: function (result) {
          console.log('access token + ' + result.getAccessToken().getJwtToken());
          /*Use the idToken for Logins Map when Federating User Pools with identity pools or when passing through an Authorization Header to an API Gateway Authorizer*/
          console.log('idToken + ' + result.idToken.jwtToken);
      },
      onFailure: function(err) {
        console.log(err);
     },
     newPasswordRequired: function(userAttributes, requiredAttributes) {
          // User was signed up by an admin and must provide new
          // password and required attributes, if any, to complete
          // authentication.

          // userAttributes: object, which is the user's current profile. It will list all attributes that are associated with the user.
          // Required attributes according to schema, which don’t have any values yet, will have blank values.
          // requiredAttributes: list of attributes that must be set by the user along with new password to complete the sign-in.

*** THIS IS WHERE I WANT REACT TO RENDER A NEW PAGE TO GET THE NEW PASSWORD***

          // Get these details and call
          // newPassword: password that user has given
          // attributesData: object with key as attribute name and value that the user has given.
          cognitoUser.completeNewPasswordChallenge(pw, userAttributes, this);
      }
    });
  }

  render() {
    return (
      <div>
        <LoginScreenComponent isInvalidForm={this.state.isInvalidForm} onFormSubmission={this.onFormSubmission}/>
      </div>
    )
  }

Answer 1

我遇到了完全相同的问题！这是我的解决方案：

Login.js react容器可以呈现两个不同的组件。 <NewPassswordForm />询问新密码，<LoginForm />进行普通登录。根据{{1}}标记，您决定要渲染哪个。

由于您在isFirstLogin中拥有认知用户，因此可以使用它来调用this.state.user以完成登录流程：

completeNewPasswordChallenge

AWS Cognito / React.js newPasswordRequired挑战

1 个答案: