我正在尝试学习如何将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);
该错误消息听起来像是Lambda函数失败。您是否偶然将Cognito设置为使用自定义注册消息来触发Lambda函数?
听起来您似乎已使用自己的Lambda函数自定义了“发送电子邮件确认”行为,但该函数未正确编写/打包/部署。