This is a quick tutorial with the aim of getting a store owner registration form on your foodomaa protected with reCAPTCHA v3. Follow these steps,
First, you need to go to the reCAPTCHA admin page and add your site and its relevant details, make sure the reCAPTCHA type is set to reCAPTCHA v3. You will be provided with two keys, a Site Key and a Secret Key, we’ll need these.
Copy these keys in your .env file as below.
RECAPTCHA_SITEKEY=**YOUR_SITE_KEY**
RECAPTCHA_SECRET=**YOUR_SECRET_KEY**
- Put below code in config/services.php
'recaptcha' => [
'sitekey' => env('RECAPTCHA_SITEKEY'),
'secret' => env('RECAPTCHA_SECRET'),
],
- Put belowcode in resources/views/admin/layouts/master.blade.php
<script src='https://www.google.com/recaptcha/api.js'></script>
- Put following code in resources/views/auth/storeRegistration.blade.php
a. put below line before submit button inside form tag
<input type="hidden" name="recaptcha" id="recaptcha">
b. put below code after '</form>' closing tag and before '@endsection'
<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: 'submit'}).then(function(token) {
if (token) {
document.getElementById('recaptcha').value = token;
}
});
});
</script>
- IMPORTANT STEP open app/Http/Controllers/RegisterController.php
there is a TRY-CATCH block for user creation after validator code. Put that enter block inside the code shown below. So our reCAPCHA code wraps that TRY - CATCH block.
$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) {
PUT YOUR ENTIRE TRY CATCH BLOCK HERE
} else {
return back()->withErrors(['captcha' => 'ReCaptcha Error']);
}
Note the “score” line, in the controller code above we’ve currently set the score threshold quite low, at 0.3, but you can adjust this to your liking, and also based on the data in your reCAPTCHA admin dashboard, which gives a breakdown of scores.
- Remove following lines of code from app/Http/Controllers/RegisterController.php
'captcha' => ['required', 'captcha'],
'captcha.required' => 'Captcha is a required field.',
'captcha.captcha' => 'Invalid Captcha',
- Remove following lines of code from resources/views/auth/storeRegistration.blade.php
.captcha-code > img {
border-radius: 4px;
}
<div class="captcha-code mb-2">
{!! captcha_img('flat') !!}
</div>
<div class="form-group form-group-feedback form-group-feedback-left">
<input type="text" class="form-control" placeholder="Enter Captcha" name="captcha" required="required">
<div class="form-control-feedback">
<i class="icon-font-size text-muted"></i>
</div>
{!! $errors->first('captcha', '<p class="text-danger small">:message</p>') !!}
</div>
DONE ! Now you have google reCTAPTCHA v3 security to your site.
