need help implementing google recaptcha in Laravel app/w vue.js
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm trying to implement google recaptcha in a Laravel app. I basically followed these instructions

My form is sent through Ajax/vue.js (in a component) so in my blade file, I pass my recaptcha public key to my component, like this: <contact :lang="'{{ app()->getLocale() }}'" :grecaptcha="'{{ env('GOOGLE_RECAPTCHA_KEY') }}'"></contact> and I catch it as a prop in my vue component. Then I have these lines in my component: <div class="g-recaptcha"
which submits to my EmailController@emailAdmin where I have an EmailRequest. In that EmailRequest I have this under rules: 'g-recaptcha-response'=>'required|recaptcha' which call a method I have registered in AppServiceProvider: public function boot()

This is the Recaptcha@validate function:

`public function validate()
$client = new Client();
$gRecaptchaResponse = Input::get('g-recaptcha-response');

    $response = $client->post('',
        ['form_params' =>
                'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
                'response' => $gRecaptchaResponse
    $body = json_decode((string)$response->getBody());
    return $body->success;

Somehow the dd($body) returns me {#232
+"success": false
+"error-codes": array:1 [
0 => "invalid-input-response"

I can't figure out why I have an invalid-input-response.

You can find the project here

You will have to run npm install, composer install, copy the .env, run php artisan key:generate and add your own recaptcha keys.

Let me know if you think you can help. I'm willing to tip extras.

can you send me the project on github.Thank you
Codeword over 2 years ago
Kindly send me the project via email. at Thank you.
SilverHood Apps over 2 years ago
Hi, can you send me the project? Thank you
Martin78b over 2 years ago
I can see what the problem is now. In my vue component a text area with the name g-recaptcha-response <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea> is created. I need to find how to console.log the value of the g-recaptcha-response from my vue component and then I'll be able to pass it to my controller.
randomhelprequested over 2 years ago
Exactly, That's what I was telling you, g-recaptcha-response is not being able to pass to the controller and so is the error.I have not posted my code on github, beacuse I realized that I was actually using get method to achieve the result.I am working on it and soon wiil come with a solution.Don't woory. Thanks
Codeword over 2 years ago
awarded to Codeword

Crowdsource coding tasks.

3 Solutions

Have you included this line?

<script src=''>

Also try changing your boot() to this

public function boot()

Kindly take a backup before making changes.

Hope it helps.

Hi there. I do have those in my project already. Thanks for the help anywayz !
randomhelprequested over 2 years ago
Tried changing 'App\Validators\Recaptcha@validate' to 'App\Validators\Recaptcha@validate' in boot() ?
Ps: went through some forms found out if you try validate captcha from same page you may get that error for the second time onwards..
SilverHood Apps over 2 years ago

Hi, can you try this:

Create a new config value for recaptcha_secret_key and recaptcha_site_key in config/app.php or another custom config file.

And in the boot() like this:

Validator::extend('recaptcha', function ($attribute, $value, $parameters, $validator) {

$recaptcha = new ReCaptcha(config('app.recaptcha_secret_key'));

$resp = $recaptcha->verify($value, request()->ip());

return $resp->isSuccess();


Try if in that way it works.

100% working tested

Hey, this is a quick fix to your problem. I have tested this code and it worked. you EmailRequest.php and set your rules(uncomment g-recaptcha-response line) to

public function rules()
        return [
            'name' => 'required|max:100',
            'email' => 'required|email|max:100',
            'phone' => 'max:15',
            'message' => 'required|max:1500',

2 open Contact.vue and just above add;

That's it.
Hope it helps and a tip would be appreciated.Thank you.

Hi Codeword. I get Undefined index: g-recaptcha-response. You may have something else in there
randomhelprequested over 2 years ago
let me post the whole code on github so that you can download
Codeword over 2 years ago
Hey randomhelprequested ,Atlast after a lot of debugging,I have solved the problem and have updated my solution, please check.Thank you
Codeword over 2 years ago
Thank you randomhelprequested.
Codeword over 2 years ago
View Timeline