invisible recaptcha with knockout js

Question

I am getting the invisible recaptcha done, but I am having a problem implementing it, the code in the developers page in google show it should be like this

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

But the button on my page is currently includes knockout js data binding which I use to call the login function which sends the ajax call to the back end, but if I use the googles given code, I am not sure how to call the functions in my knockout js file.

Here is the old codes.

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

And here is the knockout js function.

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


};

So I would like to know how can I call this function using the new codes given by google, I tried removing data-callback and adding data-bind but dint work so need help.

Answer 1

The comment by Jose Luis was headed down the right path! And George Dimitriadis was thinking the right way, if you combine what they suggest you have a solution.

By following that link you learn that you can easily set up a jquery function to call a knockout function. Then you could set your button up to send that Jquery function as the callback function, which will just call your knockout function, which will send the grecaptcha response as part of its ajax request. So in your head tag perhaps create a jquery function like this:

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

yourViewModel would be what you named your instance of your view model, for example:

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

Now create your button like google suggests sending that new Jquery function as the callback function:

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

I had success getting the recaptcha response code by using grecaptcha.getResponse(), so I would alter your knockout callLoginFunction like this:

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

The way you were getting the response code to send with your ajax request might have been fine, I just couldn't see how you did it.

I assume you were asking how to set up the client side of the recaptcha, so I will assume you know what to do with that response code you are sending with your ajax request on your server.