Laravel livewire google recaptcha validation problem

Question

I have a livewire component where i am trying to implement google recaptcha using a package https://github.com/anhskohbo/no-captcha. but getting validation error even when i complete the captcha validation process.

Below is my code livewire blade code.

<div class="col-md-6">
    <div wire:ignore>
            {!! NoCaptcha::renderJs() !!}
            {!! NoCaptcha::display() !!}
    </div>
</div>

<div class="form-inline justify-content-center text-center">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="far fa-envelope"></i></span>
        </div>
        <input type="email" class="form-control align-self-center" placeholder="Enter email" aria-label="newsletter_email" aria-describedby="basic-addon1" name="newsletter_email" wire:model.defer="newsletter_email">
    </div>
    <div class="form-group ml-3">
        <button class="btn" style="background-color: #fff!important; color: #000!important;" wire:click.defer="newsletterEmail">SUBSCRIBE</button>
    </div>
</div>


@error('recaptcha')
    <div style="color: #fff">{{ $message }}</div>
@enderror
@error('newsletter_email')
    <div style="color: #fff">{{ $message }}</div>
@enderror

@section('js')
    <script type="text/javascript">
        var onCallback = function () {
            @this.set('recaptcha', grecaptcha.getResponse());
        }
    </script>
@endsection

and below is my validation code in livewire controller.

    public $newsletter_email;
    public $hascaptcha = 0;
    public $captcha;

    protected $rules = [
        'newsletter_email' => 'required|email',
        'recaptcha' => 'required|captcha',
    ];

        protected $messages = [
        'newsletter_email.required' => 'The Email Address cannot be empty.',
        'newsletter_email.email' => 'The Email Address format is not valid.',
        'recaptcha.required' => 'Please verify that you are not a robot.',
        'recaptcha.captcha' => 'Captcha error! try again later or contact site admin.',
    ];

public function newsletterEmail()
    {
        $this->resetErrorBag();
        $this->validate();
        $current_date_time = Carbon::now()->toDateTimeString();

            DB::table('news_letter')->insert([
                'email' => $this->newsletter_email,
                'created_at' => $current_date_time,
            ]);

            $this->newsletter_email = "";
            session()->flash('newsletter_message', 'Great!! You have subscribed for newsletter.');
    }

Answer 1

No Package Needed... Incase one needs Laravel Livewire - G Recaptcha V2,

In Your Component :- <x-jet-form-section submit="submit(grecaptcha.getResponse(widgetId1))" method="POST">

<div class="col-span-6 sm:col-span-4"><div id="g-recaptcha"></div><x-jet-input-error for="g-recaptcha-response" class="mt-2" /></div>.

In Your Script :- @section('scripts') <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script> <script> var widgetId1; var onloadCallback = function() { widgetId1 = grecaptcha.render('g-recaptcha', { 'sitekey' : "{{ \Config::get('recaptcha.G_RECAPTCHA_SITE_KEY') }}", 'theme' : 'light' }); }; </script> @endsection

Your Component Class public function submit($recaptcha)

Rest Of The Verification Code :-

   `$url = 'https://www.google.com/recaptcha/api/siteverify';

    $parameters = [
        'secret' => \Config::get('recaptcha.G_RECAPTCHA_SITE_SECRET'),
        'response' => $recaptcha
    ];

    $qs = http_build_query($parameters);
    $curl_request = "{$url}?{$qs}";

    $curl = curl_init();
    curl_setopt_array($curl, array(CURLOPT_URL => $curl_request, CURLOPT_RETURNTRANSFER => 1));

    $response = curl_exec($curl);                
    $responseData = json_decode($response);

    curl_close($curl);

    if($responseData->success){  }else{ throw ValidationException::withMessages(['g-recaptcha-response' => 'ReCaptcha validation failed.']); }`