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

Question

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

这是显示联系表格的网页 ->这是页面 -> 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 meteor 调用

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 meteor.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
        })
    }
});

Answer 1

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

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

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

然后在回调中回到客户端，做类似的事情:

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

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