recaptcha 2.0 - 如何在n次失败尝试/限制后显示？ [英] recaptcha 2.0 - how to display only after n failed attempts/throttling?
问题描述
我环顾四周，没有看到任何具体的recaptcha 2.0，所以让我们看看我是否可以得到一些帮助。
I looked around and did not see anything specific for recaptcha 2.0, so let's see if I can get some help with this.
我正在建立一个注册/具有多个表单的登录页面。为了提高安全性，我正在安装recaptcha 2.0。
I am setting up a signup/login page with multiple forms.To improve security I am installing recaptcha 2.0.
它适用于单个表单以及何时在加载时呈现。
It works fine with single forms and when it is rendered on load.
对于登录表单，我只想在尝试/限制失败后部署recaptcha 2.0。
For the login form, I only want to deploy recaptcha 2.0 after failed attempts/throttling.
似乎我已经设置好了东西正确地在服务器端，我得到正确的响应登录延迟和recaptcha部署。
It seems that I've set things up properly on the server side and I am getting the correct responses for login delays and recaptcha deployment.
但是recaptcha现在正在显示。
But recaptcha is now showing.
我试图关注这些说明
我已经多次尝试过，包括：
- 将recaptcha holder设置为 display：none 并且仅在触发
时显示 - 仅在触发时附加recaptcha脚本。
I have already made several attempts, including:
- set the recaptcha holder to display:none and only show when triggered
- only append the recaptcha script when triggered.
我认为问题在于head标签上的recaptcha配置，但是我没有看到如何将其配置为由ajax调用触发。
I believe the problem is on the recaptcha configuration on the head tag, but I fail to see how to configure it to be triggered by the ajax call.
这是我到目前为止所做的：
This is what I have so far:
1 - 显式调用上的recaptcha< head> tag：
1 - Explicit call of recaptcha on <head> tag:
<script type="text/javascript">
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('captcha_signup', {
'sitekey' : 'mysitekey'
});
widgetId2 = grecaptcha.render('captcha_signin', {
'sitekey' : 'mysitekey'
});
};
</script>
2 - 登录表格：
2 - The login form:
<div id="login">
<form action="" name="login_form" method="post" id="login_form" >
<div class="contact">
<input id="focus2" data-validation="email" data-validation-error-msg="SVP, tapez un address mail valide" class="inp" name="email" size="35" type="text" placeholder="Votre e-mail" />
</div>
<div class="contact">
<input id="pass_in" type="password" name="pass_confirmation" data-validation="length" data-validation-length="8-15" data-validation-error-msg="SVP minimum 8 caracteres" placeholder="Votre mot de passe" class="inp" size="15" />
</div>
<span id="a_recovery">Mot de passe oubliee?</span>
<div id="captcha_holder"> <div id="captcha_signin" style="display:none"></div> </div>
<div class="form_sub">
<input class="sub inp" name="submit" type="submit" value="Valider" />
</div>
</form>
3 - ajax呼吁提交/处理错误/部署recaptcha
3 - ajax call for submission/handling errors/deploying recaptcha
<script>
$(document).ready(function(){
$('#login_form').submit(function(e) {
var str = $("#login_form").serialize();
$.ajax({
url: "used_dataentry.php",
type: "POST",
dataType:"text",
data:'code='+'login'+'&'+str,
success: function (data) {
var msg0 = data.substring(0, 4);
var msg1 = data.substring(4);
if ( msg0 == 'msg4' || msg0 == 'msg5') { //this to show recaptcha
alert(msg0);
$("#captcha_signin").show();
}
else{ alert(msg1)};
}
});
e.preventDefault(); //STOP default action
});
});
</script>
推荐答案
以下是我以前的做法。删除 head 中的内容，并查看代码段中的注释以获取更多详细信息。我使用的函数可以异步添加脚本（ GetScript 或使用jQuery。）
另请注意您需要的要点以及一些变量 WIN = window 和 KEY 是你的api密钥。让我知道它适合你。
Here is how I've done it before. Remove what you have in the head and see comments in the snippet for additional details. I use a function that can add scripts asynchronously (GetScript or use jQuery's.)
Also note the gist you will need as well as some variables WIN = window and KEY is your api key. Let me know it works out for you.
Captcha = function (context) {
/**
* @author (@colecmc)
* @summary google reCaptcha2.0 custom implementation
* @requires jQuery, PubSub @see https://gist.github.com/safe1981/2026701
* @returns {object}
* @param {object} context - jQuery object
* @see https://developers.google.com/recaptcha/docs/display
* @example Captcha(this); // Invoke from jQuery load call back
*/
'use strict';
var container, id, clientId;
return {
reCaptchaVerify: function (response) {
/** @param {string} response */
if (response === container.querySelector('.g-recaptcha-response').value) {
PubSub.publish('verify-response', {
successful: response
});
}
},
reCaptchaCallback: function () {
var parentEl;
container = $('[id*="reCaptcha20_"]', context)[0]; /* recaptcha ID must be unique. Prefix them with 'reCaptcha20_' */
if (container instanceof HTMLElement) {
id = container.id;
parentEl = container.parentElement;
parentEl.removeChild(container); /* prevents rendering duplicates */
parentEl.appendChild(container); /* prevents rendering duplicates */
clientId = grecaptcha.render(id, {
'sitekey': KEY, /* whatever your key is */
'callback': xReCaptchaVerify,
'expired-callback': xReCaptchaExpired
});
}
else {
throw new Error(container);
}
},
reCaptchaExpired: function () {
PubSub.publish('verify-response', {
successful: -1
});
},
globalize: function () {
/** Make it Global so google has access */
WIN.xReCaptchaCallback = this.reCaptchaCallback;
WIN.xReCaptchaVerify = this.reCaptchaVerify;
WIN.xReCaptchaExpired = this.reCaptchaExpired;
GetScript('', 'https://www.google.com/recaptcha/api.js?onload=xReCaptchaCallback&render=explicit');
}
};
};
/** Call function in your ajax **/
/* instead of $("#captcha_signin").show(); */
var captcha = new Captcha(this); /** @this {object} - $('#login_form') */
/** Verify the response **/
PubSub.subscribe('verify-response',function (name, response) {
/**
* listen for successful captcha response and proceed with submission
* @param {object} - response.successful should be a looooooong string
*/
if (typeof response.successful === 'string') {
/* Pass */
} else {
/* Fail */
throw new Error(response.successful + ' - should be a string');
}
});
这篇关于recaptcha 2.0 - 如何在n次失败尝试/限制后显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
