Raj Technologies
Published in

Raj Technologies

How To Laravel Forms Adding Google reCAPTCHA v3

Google reCAPTCHA v3

Step follow

  • Add a hidden field in your form
  • Add the reCAPTCHA JavaScript to any views that will contain your form
  • Update the controller that handles your contact form
  • Add your Site and Secret key parameters to your config and set them in your .env file

So let’s start with the view containing the contact form. Within your <form> tags, add <input type="hidden" name="recaptcha" id="recaptcha">, then add the following to your page scripts:

<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.sitekey') }}"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('{{ config('services.recaptcha.sitekey') }}', {action: 'contact'}).then(function(token) {
if (token) {
document.getElementById('recaptcha').value = token;
}
});
});
</script>

Note the {action: 'contact'} part, you can specify different actions for different parts of your website and see the data in your admin console.

Also note the lines containing {{ config('services.recaptcha.sitekey') }}, you could simply paste your site key here, but it's better to set these in config and env files. So, in config/services.php in your Laravel project, add the following at the end of the file:

'recaptcha' => [
'sitekey' => env('RECAPTCHA_SITEKEY'),
'secret' => env('RECAPTCHA_SECRET'),
],

Then in your .env file, add the following:

RECAPTCHA_SECRET=YOUR_RECAPTCHA_SECRET_KEY
RECAPTCHA_SITEKEY=YOUR_RECAPTCHA_SITE_KEY

Replace YOUR_RECAPTCHA_SECRET_KEY and YOUR_RECAPTCHA_SITE_KEY with the keys from your reCAPTCHA admin panel that were generated earlier.

So in your controller that manages your contact form, within the method that sends your form data, (for example, the store() method in a ContactController), we need to add the following:

$url = 'https://www.google.com/recaptcha/api/siteverify';
$remoteip = $_SERVER['REMOTE_ADDR'];
$data = [
'secret' => config('services.recaptcha.secret'),
'response' => $request->get('recaptcha'),
'remoteip' => $remoteip
];
$options = [
'http' => [
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
]
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$resultJson = json_decode($result);
if ($resultJson->success != true) {
return back()->withErrors(['captcha' => 'ReCaptcha Error']);
}
if ($resultJson->score >= 0.3) {
//Validation was successful, add your form submission logic here
return back()->with('message', 'Thanks for your message!');
} else {
return back()->withErrors(['captcha' => 'ReCaptcha Error']);
}

If we were to dd($resultJson); in the example above, it would return something like:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bhargav Raviya

Bhargav Raviya

I am Laravel, Flutter, and Digital Marketing Expert and follow the blog on raviyatechnical.blogspot.com Github:-https://github.com/bhargavraviya