问题
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.
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.
For the login form, I only want to deploy recaptcha 2.0 after failed attempts/throttling.
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.
But recaptcha is now showing.
I am trying to follow these instructions
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.
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 - 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 - 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 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>
回答1:
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');
}
});来源：https://stackoverflow.com/questions/30274985/recaptcha-2-0-how-to-display-only-after-n-failed-attempts-throttling