Using Google reCAPTCHA with Laravel 8 and Laravel-Livewire | coderflex.com

[utterances-bot]

Using Google reCAPTCHA with Laravel 8 and Laravel-Livewire - Coderflex

Google reCAPTCHA is a captcha like system. It assures that a computer user is a human. It is the best and most used captcha system available where users are only required to click on a checkbox and in some cases select some similar images.

https://coderflex.com/blog/using-google-recaptcha-with-laravel-8-and-laravel-livewire

[nocodelab]

Hi!
Nice tutorial but there are 2 bugs in your example:

• When you are validating the token in the updatedCaptcha method the .env key is wrong (CAPTCHA_SECRET_KEY instead of CAPTCHA_SITE_SECRET)
• You must wrap the button inside a wire:ignore div. Otherwise the handle() function will not be executed

Cheers!

[ousid]

Hey, @nocodelab.

Thanks for letting me know, I'll fix them as soon as I can.

[amrikarisma]

When I click the submit button, there is no response to the handle function. console.log doesn't print anything?

[ousid]

Hey, @amrikarisma

Did you try to print something inside the handle function?

Something like:

function handle()
{
  console.log('print..');
}

[m7vm7v]

Good tutorial, may I please suggest swapping all the "env" calls with the "config"?

env('CAPTCHA_SITE_KEY') to config('services.google.key').

It is highly recommended not to use env in production as Laravel uses optimisations that include cashing the configuration files and could bring some side effects in the long term.

[ousid]

Good tutorial, may I please suggest swapping all the "env" calls with the "config"?

env('CAPTCHA_SITE_KEY') to config('services.google.key').

It is highly recommended not to use env in production as Laravel uses optimisations that include cashing the configuration files and could bring some side effects in the long term.

Hey, @m7vm7v Thanks for your feedback.

It's been a while since I updated the post, and yea, you have a point on env helper, I'll update the post as soon as I can.

Thanks!

[HuyNguyen206]

hi @ousid, The function handle doesn't trigger when i click on submit button, not sure why
I try to put console.log(''123') in the handle function but it doesn't print in the console tab.
Could you check on this issue?

 function handle(e) {
                console.log('print..');
                alert('esdsd')
                e.preventDefault()
                grecaptcha.ready(function () {
                    grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
                        .then(function (token) {
                        @this.set('captcha', token);
                        });
                })
            }

Thanks in advance

[ousid]

Hey, @HuyNguyen206

Have you checked the captcha property in the backend, something like:

public function updatedCaptcha($value)
{
    dd($value);
}

[ousid]

Hi, @HuyNguyen206

I tested the code, and nothing wrong with it.

Make sure to add your project URL in thedomains settings, google reCAPTCHA console.

[HuyNguyen206]

hi @ousid , I try the updatedCaptcha function(doesn't print the $value when clicking on submit button) and checked the domain settings already. it is correct
Can I know exactly which laravel and livewire versions you are using in the tutorial?

I am using the following versions in my local:
Laravel: v9.41.0
Livewire: v2.10.7

[ousid]

@HuyNguyen206

I have tested it yesterday on Laravel 9.x, and livewire 2.x.

Could you show me the code, and your setup, to help you out?

[HuyNguyen206]

@ousid
Actually, I try to switch to captcha v2 and it already works fine for me
Thank you for your support

[ousid]

@HuyNguyen206
No problems!! Let me know if you have any questions, in v2 or v3.

[grobiwebdesign]

Hiya @ousid, are you still able to provide help with this? I've been struggling to implement recaptcha into my contact form for some time now and I'm just not sure what I've done wrong. Is it possible I could forward my code over to you to check? Would greatly appreciate the help.

[grobiwebdesign]

Update: I made the corrections suggested by @nocodelab, and the closest I've managed to get is for the form to display the 'unable to validate user/bot' message. Form still won't send emails