React-Redux应用程序中的AWS Cognito'Index.handler'错误

问题描述 投票:0回答:1

我正在尝试学习如何将AWS Cognito Auth集成到自定义的React-Redux应用程序中。我在注册事件期间遇到了一个问题,出现了来自cognito的以下错误消息:

“消息:” CustomMessage失败,错误索引为错误。处理程序未定义或未导出。“}”

此错误是由我的“注册”操作产生的。所以我知道react正在将表单数据准确地传递给redux。 Cognito控制台也成功显示了一个注册用户,但是在发送注册过程后该用户应该收到的电子邮件确认(我正在使用真实的电子邮件进行测试)。

下面是我在注册过程中的动作和简化工具。任何建议都会有所帮助。

-仅供参考,我确保Amplify配置位于根目录中,并且src目录中具有index.js文件。我也使用电子邮件作为用户名。

ACTION

// SIGN UP USER
export const signup = ({
  firstname,
  lastname,
  username,
  password,
  phonenumber,
}) => async (dispatch) => {
  try {
    const res = await Auth.signUp({
      username,
      password,
      attributes: {
        given_name: firstname,
        family_name: lastname,
        phone_number: phonenumber,
      },
    });

    console.log(res);
    dispatch({
      type: SIGNUP_SUCCESS,
      payload: res,
    });
    // get if user is signed in
    dispatch(loadUser());
  } catch (error) {
    console.log(error);

    dispatch({
      type: SIGNUP_FAIL,
    });
  }
};


减速器

  case SIGNUP_SUCCESS:
      return {
        ...state,
        ...payload,
        isAuthenticate: true,
      };
    case AUTH_ERROR:
    case LOGOUT:
      return {
        ...state,
        isAuthenticated: false,
        user: null,
      };

反应形式

const SignUp = ({ signup, isAuthenticated }) => {
  // collect data from form
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    username: '',
    password: '',
    phonenumber: '',
  });
  //extract data into formData object
  const { firstname, lastname, username, password, phonenumber } = formData;
  // collect input data on click
  const onChange = (event) =>
    setFormData({ ...formData, [event.target.name]: event.target.value });

  // call action on submit of form
  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      // call signup action
      signup({ firstname, lastname, username, password, phonenumber });
      //this.props.history.push('/welcome');
      return <Redirect to='/welcome' />;
    } catch (error) {
      console.log(error.message);
    }
  };

  // if user is already signed up/in then return to dashboard
  if (isAuthenticated) {
    return <Redirect to='/dashboard' />;
  }

  return (
    <Fragment>
      <div className='row signin'>
        <div className='col-md-3 col-sm-auto col-lg-3'></div>
        <div className='col-md-6 col-sm-auto col-lg-6 text-center '>
          {/* onSubmit={this.handleSubmit} */}
          <form className='form-signin' onSubmit={onSubmit}>
            <h1 className='h3  font-weight-normal'>Please sign in</h1>
            <label for='inputFirstName' className='sr-only'>
              First Name
            </label>
            <input
              type='text'
              id='inputFirstName'
              name='firstName'
              className='form-control'
              placeholder='First Name'
              required
              onChange={onChange}
            ></input>
            <label for='inputLastName' className='sr-only'>
              Last Name
            </label>
            <input
              type='text'
              id='inputLastName'
              name='lastname'
              className='form-control'
              placeholder='Last Name'
              required
              onChange={onChange}
            ></input>
            <label for='inputEmail' className='sr-only'>
              E-mail
            </label>
            <input
              type='text'
              name='username'
              id='inputemail'
              className='form-control'
              placeholder='Email address'
              required
              autofocus
              onChange={onChange}
            ></input>
            <label for='inputPassword' className='sr-only'>
              Password
            </label>
            <input
              type='password'
              id='inputPassword'
              name='password'
              className='form-control'
              placeholder='Password'
              required
              onChange={onChange}
            ></input>

            <label for='inputPhoneNumber' className='sr-only'>
              Phone Number
            </label>
            <input
              type='text'
              id='inputPhoneNumber'
              name='phonenumber'
              className='form-control'
              placeholder='Phone Number'
              required
              onChange={onChange}
            ></input>
            <button className='btn btn-lg btn-primary btn-block' type='submit'>
              Sign up
            </button>
          </form>
        </div>
        <div className='col-md-3 col-sm-auto col-lg-3'></div>
      </div>
    </Fragment>
  );
};

SignUp.propTypes = {
  signup: propTypes.func.isRequired,
  isAuthenticated: propTypes.bool,
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});

export default connect(mapStateToProps, { signup })(SignUp);

reactjs amazon-web-services redux react-redux amazon-cognito
1个回答
0
投票

该错误消息听起来像是Lambda函数失败。您是否偶然将Cognito设置为使用自定义注册消息来触发Lambda函数?

听起来您似乎已使用自己的Lambda函数自定义了“发送电子邮件确认”行为,但该函数未正确编写/打包/部署。

© www.soinside.com 2019 - 2024. All rights reserved.