Question

通过遵循tutorial来学习Meteor和Reactjs，这非常适合。这是一个注册页面，默认情况下，在注册完成之前不会通过电子邮件进行验证。在现实生活中，我希望用户在注册完成之前验证他们的电子邮件，作为一个新手，我已经准备好了howto，请帮助。

Signupform = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        let data = {};
        data.currentUser = Meteor.user();
        return data;
    },
    getInitialState(){
        return {
            message: '',
            messageClass: 'hidden'
        }
    },
    displayError(message){
        this.setState({message: message, messageClass: 'alert alert-danger registerError'});
    },
    handleSubmit(e){
        e.preventDefault();
        this.setState({message: '', messageClass: 'hidden'});
        var that = this;
        var first_name = ReactDOM.findDOMNode(this.refs.first_name).value.trim();
        var last_name = ReactDOM.findDOMNode(this.refs.last_name).value.trim();
        var email = ReactDOM.findDOMNode(this.refs.email).value.trim();
        var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
        var user = {
            email: email,
            password: password,
            profile: {
                fullname: (first_name + last_name).toLowerCase(),
                firstname: first_name,
                lastname: last_name,
                avatar: 'http://placehold.it/150x150',
                friends: []
            }
        };
        Accounts.createUser(user, function (e) {

            if (e) {
                that.displayError(e.reason);
            } else {
                FlowRouter.go('/dashboard');
            }
        })


    },
    render(){
        return (
            <div className="row">
                <div className="signup">
                    <h1>Sign Up</h1>
                    <p className="text-muted">It's free and always will be.</p>
                </div>
                <form onSubmit={this.handleSubmit}>
                    <div className="col-sm-9">
                        <div className="row">
                            <div className="col-sm-6 form-group">
                                <input ref="first_name" type="text" placeholder="First name"
                                       className="form-control"/>
                            </div>
                            <div className="col-sm-6 form-group">
                                <input ref="last_name" type="text" placeholder="Last name"
                                       className="form-control"/>
                            </div>
                        </div>


                        <div className="form-group">
                            <input type="text" placeholder="Email or mobile number" ref="email"
                                   className="form-control"/>
                        </div>
                        <div className="form-group">
                            <input type="password" placeholder="New password" ref="password"
                                   className="form-control"/>
                        </div>
                        <button type="submit" className="btn btn-md btn-success">Sign Up</button>
                        <span className={this.state.messageClass}>{this.state.message}</span>

                    </div>
                </form>
            </div>
        )
    }
});

Answer 1

Meteor帐户包具有用于验证电子邮件地址的功能，但这是在用户创建帐户后发生的。 Accounts.sendVerificationEmail

Here is a link to the docs for it.

或者，您可以使用另一个名为Accounts.sendEnrollmentEmail的帐户功能，该功能会向用户发送一个链接，然后将其重定向回应用程序以设置其密码并访问应用程序。

通过这种方式，您知道他们在使用您的应用程序之前正在使用有效的电子邮件。

Here is a link to the docs for that.

Answer 2

我不确定您在注册前验证电子邮件的含义。如果您要验证电子邮件的存在，请按照以下步骤操作。

用户提交注册表后，您需要向电子邮件地址发送一封电子邮件，其中包含一些一次性密码（OTP）随机的4位或6位数字。然后在UI上要求用户输入他们在电子邮件中收到的OTP。如果它与你发送的那个匹配，那么你可以注册用户，如果没有抛出错误并要求他们重新确认电子邮件并重新开始循环。

注意：这与反应或流星无关。这是一个合乎逻辑的问题。

使用Meteor和React进行注册确认前的电子邮件验证

2 个答案: