我正在尝试将隐式reCaptcha实施到网站上。但是我无法正常工作。这是我在做什么:
标头
<!-- Invisible reCaptcha --> <script src="https://www.google.com/recaptcha/api.js" async defer></script>
form.php
<form id="contact-form" class="contact-form" action="#contact"> <p class="contact-name"> <input id="contact_name" type="text" placeholder="Full Name" value="" name="name" /> </p> <p class="contact-email"> <input id="contact_email" type="text" placeholder="Your E-Mail Address" value="" name="email" /> </p> <p class="contact-message"> <textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea> </p> <p class="contact-submit"> <a type="submit" id="contact-submit" class="submit" href="#">Send Your Email</a> </p> <div id="recaptcha" class="g-recaptcha" data-sitekey="6LceN0sUAAAAAPvMoZ1v-94ePuXt8nZH7TxWrI0E" data-size="invisible" data-callback="onSubmit"></div> <div id="response"> </div> </form>
script.js
// contact form handling $(function() { $("#contact-submit").on('click',function() { $contact_form = $('#contact-form'); var fields = $contact_form.serialize(); var test = grecaptcha.execute(); console.log(fields); console.log(test); $.ajax({ type: "POST", url: "assets/php/contact.php", data: fields, dataType: 'json', success: function(response) { if(response.status){ $('#contact-form input').val(''); $('#contact-form textarea').val(''); } $('#response').empty().html(response.html); } }); return false; }); });
contact.php
private function validateFields(){ // Check reCaptcha if(!$this->captcha){ echo "Please fill out the reCaptcha correctly"; } $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$this->captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); if(intval($responseKeys["success"]) !== 1) { echo "You are a bot! GO AWAY!"; }
如果g-recaptcha-response不为null,则后端(contact.php)可以正常工作。但是我的问题是,当我尝试执行g-recaptcha- response(在var字段和test中)时,它总是空的。当我在表单上显示Recaptcha并将其填写时,g-recapcha- response不为空,并且一切正常。我知道我必须在某个地方调用grecaptcha.execute(),但是即使我这样做,该变量也为空。如何以编程方式调用此?
感谢您的帮助!先感谢您!
您缺少onSubmit()回调函数。
onSubmit()
要重新排列您的js以利用该功能,这将是您的新js块:
<script> // this block must be defined before api.js is included function onSubmit(token) { var fields = $('#contact-form').serializeArray(); // get your form data fields.push({name: "g-recaptcha-response", value: token});// add token to post $.ajax({ type: "POST", url: "assets/php/contact.php", data: fields, dataType: 'json', success: function(response) { if(response.status) { $('#contact-form input').val(''); $('#contact-form textarea').val(''); } $('#response').empty().html(response.html); } }); grecaptcha.reset();// to reset their widget for any other tries } </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script> // this block can be defined anywhere $(function() { $("#contact-submit").on('click',function() { // call grecaptcha.execute, which causes recaptcha to // do its thing and then calls onSubmit with the token grecaptcha.execute();// does not return anything directly return false; }); }); </script>