如何使用Recaptcha，AJAX和Laravel通过联系表单发送邮件

Question

我正在尝试将Recaptcha用于我的表单，以防止机器人向我的电子邮件帐户发送垃圾邮件。我正在使用AJAX，因此表单提交而不重新加载页面，我使用PHP Laravel作为后端。在尝试将ReCaptcha实现到我的表单之前，表单工作正常。但是，在尝试发送表单时，我收到错误消息“请检查ReCaptcha框”。当我点击了ReCaptcha框时。

我的HTML表单代码：

<form class="wpcf7-form" id="form-id">
    {{ csrf_field() }}
    <div class="primary-form">
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="First Name" required /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name" required /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap email-766"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address" required/></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone Number" required /></span>
        </div>
        <div class="col-xs-12">
            <span class="wpcf7-form-control-wrap textarea-6"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message" required ></textarea></span>
        </div>

        <div class="pull-right" style="margin-right:10px;">
            <p class="clearfix"></p>
            <div class="g-recaptcha" data-sitekey="6LfDLkgUAAAAAJrw4K4X-lEkz0tOsUz6obeGCRv7"></div>
            <button type="submit" class="button button-simple btn-submit mt-30">SEND</button>
        </div>
    </div>
</form>

这是AJAX代码：

$("form.wpcf7-form").submit(function(e){
    e.preventDefault();
    var token = $("input[name=_token]").val(); // The CSRF token
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();
    var recaptcha_token = $("#g-recaptcha-response").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       dataType: 'json',
       data:{_token: token, first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage, recaptcha_token:recaptcha_token},
       success:function(data){
           $(".email-success-messge").append(data.success).fadeIn(999);
       }
    });
});

我的ContactController文件：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ContactController extends Controller
{
    public function postContact(Request $request){
        $this->validate($request, ['email' => 'required|email'] );

        $data = array(
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'email' => $request->email,
            'phone' => $request->phone,
            'bodyMessage' => $request->bodyMessage,
            'recaptcha_token' => $request->recaptcha_token
        );

        if ($data['recaptcha_token']){
            Mail::send('emails.contact', $data, function($message) use ($data){
                $message->from($data['email']);
                $message->to('jafar@**********.com');
                $message->subject('Contact Details');
            });
            return response()->json(['success' => 'Thank you for getting in touch!'], 200);
        }else{
            return response()->json(['success' => 'Please check the ReCaptcha box.'], 200);
        }
    }
}