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 https://m.dotdev.co/google-recaptcha-integration-with-laravel-ad0f30b52d7d.

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"
:data-sitekey="grecaptcha"
data-callback="onSubmit"
data-size="invisible">
</div>
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()
{
Validator::extend(
'recaptcha',
'App\Validators\ReCaptcha@validate'
);
}

This is the Recaptcha@validate function:

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

    $response = $client->post('https://www.google.com/recaptcha/api/siteverify',
        ['form_params' =>
            [
                'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
                'response' => $gRecaptchaResponse
            ]
        ]
    );
    $body = json_decode((string)$response->getBody());
    dd($body);
    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 https://bitbucket.org/danygiguere/nuvoweb

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 3 months ago
Kindly send me the project via email. at yogeshkurane123@gmail.com. Thank you.
SilverHood Apps 3 months ago
Hi, can you send me the project? martin78b@mail.ru Thank you
Martin78b 3 months 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 3 months 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 3 months ago
awarded to Codeword

Crowdsource coding tasks.

3 Solutions


Have you included this line?

<script src='https://www.google.com/recaptcha/api.js'>
</script>

Also try changing your boot() to this

public function boot()
{
Validator::extend(
'recaptcha',
'App\\Validators\\Recaptcha@validate'
);

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 3 months 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 3 months 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.

1.open 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',
            'g-recaptcha-response'=>'required|recaptcha'
        ];
    }

2 open Contact.vue and just above axios.post add

this.email.grecaptcha=grecaptcha.getResponse();

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 3 months ago
let me post the whole code on github so that you can download
Codeword 3 months ago
Hey randomhelprequested ,Atlast after a lot of debugging,I have solved the problem and have updated my solution, please check.Thank you
Codeword 3 months ago
Thank you randomhelprequested.
Codeword 3 months ago
View Timeline