如何将 Google 的 reCaptcha 集成到 aldeed:autoform (meteor) 中

问题描述：

我想做的是阻止用户绕过验证码.现在，在联系表单上，用户可以填写除验证码之外的所有字段并让表单仍然提交

What I'm trying to do is prevent the user from bypassing the captcha. Right now on the contact form a user can fill all the fields except captcha and have the form still submit

这是显示联系表单的网页 ->这是页面 -> http://ec2-52-5-104-185.compute-1.amazonaws.com/contact

Here's the webpage that's displaying the contact form -> here's the page -> http://ec2-52-5-104-185.compute-1.amazonaws.com/contact

这是显示此联系表单的代码->

{{# autoForm schema='ContactSchema' id="contactForm" type="method" meteormethod="sendContact"}}
    {{> afQuickField name="categoryId"}}                       
    {{> afQuickField name="email" }}
    {{> afQuickField name="title" }}
    {{> afQuickField name="message" rows=8 }}

    <!-- googles reCaptcha , i'm using ayue:recaptcha  package to render this captcha -->
    {{> reCAPTCHA}}
{{/ autoForm }}

这里是客户端 JS 流星调用验证码

Template.contact.events({
    'submit form': function(e) {
        e.preventDefault();

        var formData = {
            //get the data from your form fields
        };

        //get the captcha data
        var recaptchaResponse = grecaptcha.getResponse();

        Meteor.call('formSubmissionMethod', formData, recaptchaResponse, function(error, result) {
            if (error) {
                console.log('There was an error: ' + error.reason);
            } else {
                console.log('Success!');
            }
        });
    }
});

这里是服务器端代码，它从联系表单中获取 sendContact 方法和 recaptcha metre.call 方法

Meteor.methods({
    formSubmissionMethod: function(formData, recaptchaResponse) {

        var verifyCaptchaResponse = reCAPTCHA.verifyCaptcha(recaptchaResponse, this.connection.clientAddress);

        if (!verifyCaptchaResponse.success) {
            console.log('reCAPTCHA check failed!', verifyCaptchaResponse);
            throw new Meteor.Error(422, 'reCAPTCHA Failed: ' + verifyCaptchaResponse.error);
        } else {
            console.log('reCAPTCHA verification passed!');
        }

        //do stuff with your formData

        return true;
    },

    sendContact: function (doc) {
        check(doc, ContactSchema);

        var html = "<b>" + doc.title + "</b><br>"
        + "<b>" + doc.email + "</b><br><br>"
        + doc.message.escape();

        this.unblock();

        Email.send({
            to: orion.dictionary.get('contact form.email') && doc.categoryId,
            from: orion.config.get('MAIL_FROM'),
            // subject: orion.dictionary.get('global.siteName') + ' - Contact',
            subject: doc.title + ' - Contact',
            replyTo: doc.email,
            html: html
        })
    }
});

答

与其在服务器端方法上抛出错误，不如返回成功值，例如:

Rather than throw the error on your server side method, just return the success value, like:

verifyCaptchaResponse = reCAPTCHA.verifyCaptcha(this.connection.clientAddress, doc.gRecaptchaResponse);

  if (verifyCaptchaResponse.data.success === false) {
    return verifyCaptchaResponse.data;
  }

在回调中返回客户端，执行以下操作:

Than back on the client in the callback, do something like:

if (result && result.success === false) {
      //CAPTCHA failed
      Modal.show('recaptcha');
    }
return false;

与其使用提交表单"事件，不如使用 AutoForm.hooks，然后在您的表单中使用 AutoForm.hooks 中的 onSubmit 方法.

And rather than use a 'submit form' event, use AutoForm.hooks, then use the onSubmit method inside AutoForm.hooks for your form.

如何将 Google 的 reCaptcha 集成到 aldeed:autoform (meteor) 中

相关推荐