reactjs - AWS Cognito/React.js newPasswordRequired 挑战

Question

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

我正在使用 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 />用于普通登录。根据isFirstLogin标记您决定渲染哪一个。

由于您在this.state.user中有cognito用户您可以使用它调用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>
  );
}