Livewire/Laravel - Google recaptcha v3 - 提交按钮的“句柄”事件未触发

Question

我正在尝试使用来自 'localhost' 的 google recaptcha v3。我在 chrome 中遇到了这个问题：“通过指定其 SameSite 属性来指示是否在跨站点请求中发送 cookie”。这可能正在停止触发数据回调“句柄”并且我的表单没有提交。应用按钮根本不起作用或单击此按钮时没有任何反应。我已经为我的开发机器注册并拥有正在使用的“localhost”的密钥。我可以在我的开发系统中看到徽章，我猜这表明集成正在运行。

组件刀片

<div class="row edit-profile m-b30">
    <form wire:submit.prevent="store">
                <!-- Your Profile Views Chart -->
                <div class="col-lg-12 m-b30">
                    <div class="widget-box">
                        <div class="widget-inner">
                              <div class="row">
                                    <div class="col-12">
                                        <div class="heading-bx left">
                                            <h2 class="title-head">Online <span>Registration</span></h2>
                                        </div>

                                        <p>It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page</p>
                                    
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-12">
                                        <div class="ml-auto">
                                            <h3>Course Details</h3>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group col-6">
                                        <label class="col-form-label">Course</label>
                                        <div>
                                            <select required wire:model="course" class="form-control">
                                                <option value="0" selected>Select Course</option>
                                                @foreach($courses as $selectedcourse)
                                                    <option value="{{$selectedcourse->id}}">{{$selectedcourse->Name}}</option>
                                                @endforeach
                                            </select>
                                            @error('course')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            
                                            
                                        </div>
                                    </div>


                                    <div class="form-group col-4">
                                        <label class="col-form-label">Full Name</label>
                                        <div>
                                            <input required class="form-control has-error has-feedback" maxlength="100" type="text" placeholder="Your full name" id="student_name" name="student_name" value="{{ old('student_name') }}" wire:model="student_name">
                                            @error('student_name')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        
                                    <button type="submit" 
                                            class="g-recaptcha btn" 
                                            data-sitekey="{{env('CAPTCHA_SITE_KEY')}}"
                                            data-callback='handle'
                                            data-action='submit'
                                            name="submit">Apply
                                        </button>

                                        <button type="reset" class="btn-secondry">Cancel</button>
                                    </div>
                                </div>
                            
                            
                        </div>
                    </div>
                </div>
                <!-- Your Profile Views Chart END-->
            

</form>
</div>


<script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITE_KEY')}}" async defer></script>

<script>

function handle(e) {
    grecaptcha.ready(function () {

        console.log('inside grecaptcha');

        grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
            .then(function (token) {
                @this.set('captcha', token);
                console.log(token);
        });
    })
}

</script>


<script>

window.addEventListener('otpconfirm', async function() {
            
        
        const { value: otp } = await Swal.fire({
            title: 'OTP Confirmation',
            input: 'text',
            inputLabel: 'Please enter the OTP sent to your phone number',
            inputPlaceholder: 'One Time Password',
            showCancelButton: true,
            inputValidator: (value) => {
                if (!value) {
                    return 'You need to write something!'
                }
            }
        })

        if (otp) {
            Swal.fire('OTP Entered: '+otp)
            @this.call('matchotp',otp)
        } 

});


window.addEventListener('focusonerror', function(prop) {

    $('#prop').focus();

});






</script>

还有 Livewire 组件

public $captcha=0;

public function updatedCaptcha($token)
    {
        Log::info('in captcha function..');
        
        $response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret=' . env('CAPTCHA_SECRET_KEY') . '&response=' . $token);
        $this->captcha = $response->json()['score'];

        if (!$this->captcha > .3) {
            $this->store();
        } else {
            return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
            Log::info('Google thinks you are a bot, please refresh and try again');
        }

    }

Answer 1

在您检查 Loading reCAPTCHA 链接 <script async src="https://www.google.com/recaptcha/api.js"> 之前我遇到了同样的问题