Question

我收到了无形的recaptcha，但是我在实现它时遇到了问题，谷歌开发者页面中的代码显示它应该是这样的

<button
class="g-recaptcha"
data-sitekey="6Lee9CEUAA....."
data-callback="YourOnSubmitFn">
Submit
</button>

但是我页面上的按钮当前包含knockout js数据绑定，我用来调用登录函数将ajax调用发送到后端，但如果我使用googles给出代码，我不知道如何调用我的knockout js文件中的函数。

这是旧代码。

<button type="submit" class="btn btnlogin" data-bind="disable: (loggedIn() == 'true'), click: callLoginFunction">
SIGN IN 
</button>

这是淘汰赛的js功能。

    self.callLoginFunction= function () {
            self.getRecaptchaCode();
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/login/loginUsingAjax/' + auth,
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON({
                    email : self.eMail(),
                    password : self.passWord(),
                    recaptcha : self.recaptchaCode()
                })
            })
            .done(function(returnmsg) {
                return window.location.href = BASEURL + 'index.php/main/index';
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                self.loggedIn('failed');
                grecaptcha.reset();
            })
            .always(function(data){
                self.passWord(null);                
            });


};

所以我想知道如何使用谷歌提供的新代码调用此功能，我尝试删除data-callback并添加data-bind但是工作需要帮助。

Answer 1

何塞·路易斯的评论走向了正确的道路！乔治·迪米特里亚迪斯正在思考正确的方法，如果你把他们建议的解决方案结合起来。

通过关注link，您了解到可以轻松设置jquery函数来调用knockout函数。然后你可以设置你的按钮来发送那个Jquery函数作为回调函数，它将调用你的knockout函数，它将发送grecaptcha响应作为其ajax请求的一部分。所以在你的head标签中也许创建一个像这样的jquery函数：

<script>
  function loginCB() {
    yourViewModel.callLoginFunction();
  }
</script>

yourViewModel将是您为视图模型命名的实例，例如：

<script>
  yourViewModel = new login_vm();
  ko.applyBindings(yourViewModel, $("#login")[0]);
</script>

现在创建你的按钮就像google建议发送新的Jquery函数作为回调函数：

<button
  class="g-recaptcha"
  data-sitekey="6Lee9CEUAA....."
  data-callback="loginCB">
  Submit
</button>

我使用grecaptcha.getResponse（）成功获得了recaptcha响应代码，所以我会改变你的淘汰赛callLoginFunction，如下所示：

    self.callLoginFunction= function () {
        response = grecaptcha.getResponse()
        $.ajax({
            type: 'POST',
            url: BASEURL + 'index.php/login/loginUsingAjax/' + auth,
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON({
                email : self.eMail(),
                password : self.passWord(),
                recaptcha : response
            })
        })
        .done(function(returnmsg) {
            return window.location.href = BASEURL + 'index.php/main/index';
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            self.loggedIn('failed');
            grecaptcha.reset();
        })
        .always(function(data){
            self.passWord(null);                
        });
     };

你获得使用ajax请求发送的响应代码的方式可能没问题，我只是看不出你是怎么做的。

我假设您在询问如何设置recaptcha的客户端，因此我假设您知道如何处理您在服务器上使用ajax请求发送的响应代码。

无形的recaptcha与淘汰赛js

1 个答案: