隐形reCaptcha AJAX通话 [英] Invisible reCaptcha AJAX Call

问题描述

我正在尝试将隐式reCaptcha实施到网站上.但是我无法正常工作.这是我在做什么:

I'm trying to implement the invisible reCaptcha onto a website. But I can not get it working. Here is what I'm doing:

标题

  <!-- 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

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

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字段和测试中)时，它始终为空.当我在表单上显示Recaptcha并将其填写时，g-recapcha-response不为空，并且一切正常. 我知道我必须在某个地方调用grecaptcha.execute()，但是即使我这样做了，该变量也是空的.如何以编程方式调用此代码?

The backend (contact.php) is working fine, if g-recaptcha-response is not null. However my Problem is that g-recaptcha-response (in var fields and test) is always empty when I try to do it. When I show the recaptcha on the form and fill it out, the g-recapcha-response is not empty and everything works fine. I know that I must invoke the grecaptcha.execute() somewhere, but even if I do, the variable is empty. How do programmaticaly call the this?

我非常感谢您的帮助！预先谢谢你！

I appreciate every help! Thank you in advance!

推荐答案

您缺少onSubmit()回调函数.

要重新排列您的js以利用该功能，这将是您的新js块:

To rearrange your js to utilize the function, this would be your new js block:

<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>

这篇关于隐形reCaptcha AJAX通话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！