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

[ousid]

@grobiwebdesign, sorry to hear that you are experiencing the issue with the article.

I'll upload an updated version, tomorrow, which I get it working with the new captcha mechanism, and I'll mention you in it.

Cheers!

[grobiwebdesign]

Hi, thank you for responding. It’s great to hear you’re keeping the contact form up to date.

With what I was able to go on, I’ve managed to get it working up to the point where the user receives the validation message about bots but I still can’t get it to send emails.

Is it okay if I forward you my code so to cross reference it?

Many thanks

Graeme

On Wed, 19 Jul 2023 at 22:55, Oussama @.***> wrote:

@grobiwebdesign https://github.com/grobiwebdesign, sorry to hear that you are experiencing the issue with the article.

I'll upload an updated version, tomorrow, which I get it working with the new captcha mechanism, and I'll mention you in it.

Cheers!

— Reply to this email directly, view it on GitHub https://github.com/coderflexx/blog/issues/2#issuecomment-1642809915, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADZMK3IPK36MYXHAXW7FQTTXRBJWRANCNFSM5MYKPD7Q . You are receiving this because you were mentioned.Message ID: @.***>

[ousid]

@grobiwebdesign

No problems, create a gist for your example, and share it. I'll review it later today, once I have time.

[grobiwebdesign]

Hi again, sorry I needed to delete that comment. I thought we were speaking privately from Gmail I didn't realise these were visible publicly. Do you have a private email I can forward the code to?

[ousid]

@grobiwebdesign

I have updated the article, with a new one. Take a look, and let me know if you have any questions: https://coderflex.com/blog/enhancing-security-and-user-experience-leveraging-recaptcha-with-laravel-and-livewire

Cheers!