如何使用带有 Recaptcha 的 AJAX 发送表单？ [拉拉维尔]答案

【问题标题】：How to Send form using AJAX with Recaptcha? [Laravel]如何使用带有 Recaptcha 的 AJAX 发送表单？ [拉拉维尔]
【发布时间】：2021-12-14 13:24:42
【问题描述】：

如何使用 AJAX 和 recaptcha 发送我的表单？我目前正在使用来自 anhskohbo/no-captcha 的包。

SignupController.php

  public function customRegister(Request $request) {

    $validator = Validator::make($request->all(), [
        'name' => ['required', 'max:52'],
        'phone_number' => ['required', 'unique:users', 'min:11', 'max:11'],
        'password' => ['required', 'confirmed', 
        Password::min(8)
        ->mixedCase()
        ->symbols()
        ->numbers()
        ],
        'g-recaptcha-response' => ['required', 'captcha'],
    ]);

    if(!$validator->passes()) {
        return response()->json(['status' => 0, 'error'=> $validator->errors()->toArray()]);
    } else {

        User::create([
        'name' => $request->input('name'),
        'phone_number' => $request->input('phone_number'),
        'password' => Hash::make($request->input('password')),
        'is_verified' => 0,

        ]);
}

Form.blade

        <form action="/register" id="registerForm" method="POST">
        @csrf
        ... form inputs here
<div class="form-group fxt-transformY-50 fxt-transition-delay-5">
                                    <div class="{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }} recaptcha-div">
                                        {!! NoCaptcha::display() !!}
                                        <span class="text-danger error-text g-recaptcha-response_error"></span>
                                    </div>                        
                                </div>
        </form>

我的 Ajax 函数

    $(function(){
              
    $("#registerForm").on('submit', function(e){       
        e.preventDefault(); 
        var token = grecaptcha.getResponse();
        $.ajax({
            url:$(this).attr('action'),
            method:$(this).attr('method'),
            data: new FormData(this),
            processData:false,
            dataType:'json',
            contentType:false,
            beforeSend:function(){
                $(document).find('span.error-text').text('');
                FormData.append('recaptcha', token);
            },
            success:function(data){
                if(data.status == 0){                            
                    $.each(data.error, function(prefix, val){
                        $('span.'+prefix+'_error').text(val[0]);
                    });
                }else{
                    $('#registerForm')[0].reset();
                    alert(data.msg);
                }
            }
        });
    });
});

我总是收到以下错误“需要验证码”。似乎 formData 没有得到 recaptcha 值。谁能给我建议？谢谢！

【问题讨论】：

你用什么来展示你的recaptcha
你好@bhucho 我正在使用 Anshkobo/no-captcha 包。我更新了上面的代码。非常感谢
为什么要通过ajax发送，不显示recaptcha？
如果你实际上是通过 js 提交表单，那为什么不直接使用 google recaptcha 库，那么不需要后端包

标签： php ajax laravel laravel-8

【解决方案1】：

它对我有什么作用

形式

<div class="g-recaptcha" data-sitekey="{{config('services.recaptcha.key')}}"></div>

脚本回顾

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Ajax 函数

$("#registerForm").on('submit', function(e){       
    e.preventDefault(); 
    var gtoken = grecaptcha.getResponse();
    $.ajax({
        ...
        data: {
                g_recaptcha_response: gtoken,
            },

在验证请求中

'g_recaptcha_response' => 'required|recaptcha'

【讨论】：