[Solved] Using Google Captcha with Laravel livewire

#1

I’m trying to use a google captcha validation in a form and I notice the value of the response won’t send with the request

Here is my Captcha Rule:

    public function passes($attribute, $value)
    {
        $captcha = new ReCaptcha(env('CAPTCHA_SECRET_KEY'));
        $response = $captcha->verify($value, $_SERVER['REMOTE_ADDR']);

        return $response->isSuccess();
    }

The view

      <div class="flex items-center justify-center mt-10">
          <div>
              <div class="g-recaptcha"  data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
               @if ($errors->has('g-recaptcha-response'))
                     <span class="block text-orange-700 mt-5">
                           <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                      </span>
                @endif
         </div>
      </div>

The $request->all() output

array:6 [▼
  "id" => "X501DDfFUiLy8CTmEYhc"
  "data" => array:1 [▼
    "demo" => null
  ]
  "name" => "landing.demo"
  "checksum" => "4b5c299935b0bfd844d49277dda19706da1812008cb763b973406163eef7e08a"
  "children" => []
  "actionQueue" => array:1 [▼
    0 => array:2 [▼
      "type" => "callMethod"
      "payload" => array:2 [▼
        "method" => "submitDemo"
        "params" => []
      ]
    ]
  ]
]

Any Ideas?

#2

I Solved the issue by doing the following with Captcha V3

in the view

       <button type="submit"
              data-sitekey="{{env('CAPTCHA_SITE_KEY')}}"
              data-callback='handle'
              data-action='submit'
               class="g-recaptcha some-button-style">
               Submit
      </button>

    <script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITE_KEY')}}"></script>
    <script>
        function handle(e) {
            grecaptcha.ready(function () {
                grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
                    .then(function (token) {
                        @this.set('captcha', token);
                    });
            })
        }
    </script>

in the Controller

...
    public $captcha = 0;

    public function updatedCaptcha($token)
    {
        $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->submit();
        } else {
            return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
        }
    }

for more info, you can check reCAPTCHA v3 manual

5 Likes
How to implement reCAPTCHA v2
#3

as i know the recaptcha scoring is:

All possible values are from 0.9 to 0.1 .
Where0.9 — probably a human, 0.1 — bot.
Values 0.3 and below are considered as very suspicious activity, these users are interpreted as bots.

is your code check if not greater than 0.3 it will submited?

#4

Hi!
Thanks It looks to work, but I don’t see any extra field to fill in. Only a capcha logo at left bottom.
Is it OK? If I have noe enough score, then I have to choose from picturees?
Thanks
Gergely

#5

Hey, @faxunil.

Yeah, no need to, because this is captcha V3.

I wrote a blog on it, take a look here for more info: