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>
