与淘汰赛js的隐形Recaptcha [英] invisible recaptcha with knockout js
问题描述
我正在完成隐形的recapcha，但是我在实现它时遇到了问题，google开发人员页面中的代码表明它应该是这样的
<button
class="g-recaptcha"
data-sitekey="6Lee9CEUAA....."
data-callback="YourOnSubmitFn">
Submit
</button>
但是我页面上的按钮当前包含敲除js数据绑定，我用它来调用将ajax调用发送到后端的登录功能，但是如果我使用Google给定的代码，则不确定如何调用我的剔除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);
});
};
所以我想知道如何使用google提供的新代码调用此函数，我尝试删除data-callback并添加data-bind，但努力工作，因此需要帮助.
何塞·路易斯(Jose Luis)的评论走上了正确的道路！乔治·迪米特里亚迪斯(George Dimitriadis)的想法是正确的，如果您结合他们的建议，则可以找到解决方案.
通过遵循链接，您了解到可以轻松设置一个jquery函数来调用一个淘汰赛函数.然后，您可以设置按钮以将该Jquery函数作为回调函数发送，该函数将仅调用敲除函数，该函数将grecaptcha响应作为其ajax请求的一部分发送. 因此，在您的head标签中也许创建一个像这样的jQuery函数:
<script>
function loginCB() {
yourViewModel.callLoginFunction();
}
</script>
您的ViewModel就是您为视图模型的实例命名的名称，例如:
<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请求发送的响应代码.
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.
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.
这篇关于与淘汰赛js的隐形Recaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
