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.

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

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 almost 5 years ago
let me post the whole code on github so that you can download
Codeword almost 5 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 almost 5 years ago
Thank you randomhelprequested.
Codeword almost 5 years ago
View Timeline