AWS Cognito / React.js newPasswordRequired挑战

Question

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

我正在使用amazon-cognito-identity-jsAPI来验证用户身份。可以在此处找到该文档。我已经按照newPasswordRequireddocs的指示进行了回调函数的设置，但是我正在努力寻找在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.jsreact容器可以呈现两个不同的组件。<NewPassswordForm />要求输入新密码，<LoginForm />用于普通登录。根据isFirstLogin标志，您决定渲染哪一个。

由于您拥有cognito用户，因此this.state.user可以使用它来调用completeNewPasswordChallenge以完成登录流程：

handleLogin = (username, password) => {
  const authDetails = new AuthenticationDetails({
    Username: username,
    Password: password,
  });
  const userData = {
    Username: username,
    Pool: getUserPool(),
    Storage: getStorage(),
  };
  const cognitoUser = new CognitoUser(userData);
  cognitoUser.authenticateUser(authDetails, {
    onSuccess: () => {
      // login
    }
    newPasswordRequired: userAttr => {
      this.setState({
        isFirstLogin: true,
        user: cognitoUser,
        userAttr: userAttr,
      });
    },
  });
};

changePassword = (newPassword) => {
  const cognitoUser = this.state.user;
  const userAttr = this.state.userAttr;
  cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
    onSuccess: result => {
      // login
    }
  });
};

render() {
  return (
    <div>
      {this.state.isFirstLogin ? (
        <NewPassswordForm changePassword={this.changePassword} />
      ) : (
        <LoginForm handleLogin={this.handleLogin} />
      )}
    </div>
  );
}