Rendering reCaptcha V2.0 widget within Marionette Itemview

Question

This will be a post where I ask the question and propose a solution Since having had several trouble and having looked around a lot I decided to post my final solution for anyone else to take profit from it.

Question: How to render google's reCaptcha v2.0 widget and verifying it in a Marionettejs app with a java back end.

Answer 1

After the common steps and following google guides to render the re captcha my captcha still didn't render, so here comes my solution:

Rendering the captcha and the inclusion of the script are both made inside the itemview onRender function:

    'text!login/templates/form.html',
    'app'
], function (app, Marionette, Backbone, _, $, Handlebars, FormTemplate) {
 return Marionette.ItemView.extend({

    template: Handlebars.compile(FormTemplate),

    ui: {
        form: '
    },

    events: {
        'submit @ui.form': 'onSubmit'
    },

    onRender: function() {
      this.loadCaptcha();
    },

    loadCaptcha: function() {
        var self = this;
        var getRecaptchaResponse = function(response) {
            self.captchaResponse = response;
        };

        window.renderCaptcha = function () {
            self.captchaWidgetId = grecaptcha.render('yourCaptchaDiv', {
                sitekey: 'YourSiteKey',
                callback: getRecaptchaResponse
            });
        };

        $.getScript('https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit', function() {});
    },
...
}

I tried other ways of loading the script with several errors, like the script loaded before the div for it, or the browser says de Dom has completely loaded but the onRender gets called after

I had to include a div for the captcha widget to load in, this is in form.html

<div id="reCaptcha" class="btn"></div>

That will have your widget rendered, now you need to both verify it has been filled and it is a valid user response with google, for this I use the same module and use the next function:

onSubmit: function (e) {
//only act if the captcha has been filled - This could be easily erased from a browser, but a back end verification takes place too
            if (grecaptcha.getResponse() !== "") {
                e.preventDefault();
                var _view = this;
                this.blockForm();
                $.ajax({
                    url: 'yourLoginService',
                    type: 'POST',
                    data: {
                        userLogin: this.ui.user.val(),
                        userPassword: this.ui.password.val(),
                        //get the captcha response
                        captchaResponse: grecaptcha.getResponse()
                    }

                }).done(function (data) {
                    app.router.navigate('', {trigger: true});
                    _view.destroy();
                }).fail(function (jqXHR, textStatus, errorThrown) {
                  // your fail handling
                });
            }
        },

Then comes the time to verify your captcha server side using the secret key provided by google (note this is a Java6 app, therefore the clumbersome exception Handling):

//some other imports ignored
import org.apache.commons.io.IOUtils;
import org.json.JSONException;
import org.json.JSONObject;

class Captcha {

    private static final String CAPTCHA_SECRET_KEY = "YourSecretKey";
    private static final Logger LOGGER = Logger.getLogger(Captcha.class);

    static boolean isCaptchaValid(String response) {
        try {
            String url = "https://www.google.com/recaptcha/api/siteverify?"
                    + "secret=" + CAPTCHA_SECRET_KEY
                    + "&response=" + response;

            InputStream res = new URL(url).openStream();
            JSONObject json = new JSONObject(getJsonResponse(res));
            res.close();    
            return json.getBoolean("success");
        } catch (JSONException e) {
            LOGGER.error("Can not parse captcha response Json: " + e);
            return false;
        } catch (MalformedURLException e) {
            LOGGER.error("Malformed URL: " + e);
            return false;
        } catch (IOException e) {
            LOGGER.error("Error reading response from captcha verification response: " + e);
            return false;
        }
    }

    private static String getJsonResponse(InputStream res) throws IOException {
        BufferedReader rd = new BufferedReader(new InputStreamReader(res, Charset.forName("UTF-8")));
            /*TODO in java 8+ use this and avoid using the external library
                return rd.lines().collect(Collectors.joining());
             */
        return IOUtils.toString(rd);
    }
}