Working example of recaptcha in meteor

Question

After doing some investigations I found that I had to manually integrate the reCaptcha.

The client side code:

HTML:

<form id="mySecuredForm" novalidate>
        <!-- labels and inputs here -->

        <div class="row">
            <div id="captcha-container">
                <div id="rendered-captcha-container">loading...</div>
            </div>
        </div>

        <div class="row">
            <button type="submit" id="submit" class="submit-button">Submit</button>
        </div>
</form>

JS

if (Meteor.isClient) {

Template.myTemplate.rendered = function() {

     $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js', function() {
         Recaptcha.create('add_your_public_key_here', 'rendered-captcha-container', {
             theme: 'red',
             callback: Recaptcha.focus_response_field
         });
     });

}

Template['myTemplate'].events({
    'submit form#mySecuredForm': function(event) {
        event.preventDefault();
        event.stopPropagation();

        var formData = {
            captcha_challenge_id: Recaptcha.get_challenge(),
            captcha_solution: Recaptcha.get_response()
            //add the data from form inputs here
        };

        Meteor.call('submitMySecuredForm', formData, function(error, result) {

            if (result.success) {
                //set session vars, redirect, etc

            } else {
                Recaptcha.reload();

                // alert error message according to received code
                switch (result.error) {
                    case 'captcha_verification_failed':
                        alert('captcha solution is wrong!');
                        break;
                    case 'other_error_on_form_submit':
                        alert('other error');
                        break;
                    default:
                        alert('error');
                }

            }
        });
    }

Server side code

function verifyCaptcha(clientIP, data) {

var captcha_data = {
    privatekey: 'add_private_key_here',
    remoteip: clientIP
    challenge: data.captcha_challenge_id,
    response: data.captcha_solution
};

var serialized_captcha_data =
    'privatekey=' + captcha_data.privatekey +
        '&remoteip=' + captcha_data.remoteip +
        '&challenge=' + captcha_data.challenge +
        '&response=' + captcha_data.response;
var captchaVerificationResult = null;
var success, parts; // used to process response string

try {
    captchaVerificationResult = HTTP.call("POST", "http://www.google.com/recaptcha/api/verify", {
        content: serialized_captcha_data.toString('utf8'),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Content-Length': serialized_captcha_data.length
        }
    });
} catch(e) {
    return {
        'success': false,
        'error': 'google_service_not_accessible'
    };
}

parts = captchaVerificationResult.content.split('\n');
success = parts[0];

if (success !== 'true') {
    return {
        'success': false,
        'error': 'captcha_verification_failed'
    };
}

return {
    'success': true
};
}

Meteor.methods({
"submitMySecuredForm": function(data) {

    //!add code here to separate captcha data from form data.

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

    if (!verifyCaptchaResponse.success) {
        console.log('Captcha check failed! Responding with: ', verifyCaptchaResponse);
        return verifyCaptchaResponse;
    }

    console.log('Captcha verification passed!');

    //!add code here to process form data

    return {success: true};
});

There is also the possibility to listen to the post event on the server side. The http calls can be done synchronous as above or asynchronous with fibers/futures.

Server side http call to google API was inspired from: https://github.com/mirhampt/node-recaptcha/blob/master/lib/recaptcha.js