javascript - 带有 knockout js 的不可见 recaptcha

Question

我正在完成不可见的 recaptcha，但是我在实现它时遇到了问题，谷歌开发者页面中的代码显示它应该是这样的

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

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

这是旧代码。

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

这里是knockout 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);                
            });


};

所以我想知道如何使用 google 给出的新代码调用此函数，我尝试删除 data-callback 并添加 data-bind 但是 dint工作需要帮助。

Answer 1

Jose Luis 的评论是正确的! George Dimitriadis 的想法是正确的，如果结合他们的建议，您就有了解决方案。

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

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

yourViewModel 将是您命名 View 模型实例的名称，例如:

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

现在创建你的按钮，就像谷歌建议发送新的 Jquery 函数作为回调函数:

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

我使用 grecaptcha.getResponse() 成功获取了 recaptcha 响应代码，所以我会像这样更改你的 knockout 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 请求发送的响应代码。