javascript - 在 Marionette Itemview 中渲染 reCaptcha V2.0 小部件

Question

这将是我提出问题并提出解决方案的帖子由于遇到了一些麻烦并且四处查看了很多，我决定发布我的最终解决方案，以供其他人从中获利。

问题:如何呈现 google 的 reCaptcha v2.0 小部件并在具有 java 后端的 Marionettejs 应用程序中验证它。

Answer 1

在完成常见步骤并按照谷歌指南渲染重新验证码之后，我的验证码仍然没有渲染，所以这是我的解决方案:

渲染验证码和包含脚本都是在 itemview onRender 函数内完成的:

    '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() {});
    },
...
}

我尝试了其他加载脚本的方法，但出现了一些错误，例如在 div 之前加载脚本，或者浏览器显示 de Dom 已完全加载，但 onRender 在之后被调用

我必须包含一个 div 来加载验证码小部件，这是在表单.html

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

这将渲染您的小部件，现在您需要验证它已被填充并且它是谷歌的有效用户响应，为此我使用相同的模块并使用下一个函数:

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
                });
            }
        },

然后是时候使用 google 提供的 key 来验证您的验证码服务器端(请注意，这是一个 Java6 应用程序，因此需要繁琐的异常处理):

//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);
    }
}