【问题标题】:AWS Cognito 'Index.handler' Error in React-Redux appReact-Redux 应用程序中的 AWS Cognito 'Index.handler' 错误
【发布时间】:2020-09-07 09:02:27
【问题描述】:

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

"message:"CustomMessage 失败,错误 index.handler 未定义或未导出。"}"

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

以下是我在注册过程中的操作和缩减程序。任何建议都会有所帮助。

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

动作

// 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】:

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

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

    【讨论】:

    • 是的,就是这样。在设置过程中,我最初配置了一个 lambda 查询以在确认后重定向,我认为我提交重定向到的 url 导致了问题。
    猜你喜欢
    • 2021-03-25
    • 2017-02-08
    • 2018-03-04
    • 1970-01-01
    • 2019-02-07
    • 2016-11-09
    • 2020-03-03
    • 2021-03-01
    • 2019-06-04
    相关资源
    最近更新 更多