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

Posted 2023-03-14

【中文标题】如何使用带有 Recaptcha 的 AJAX 发送表单？ [拉拉维尔]

【英文标题】：How to Send form using AJAX with Recaptcha? [Laravel]

【发布时间】：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 库，那么不需要后端包

【参考方案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'