In this article, you'll learn how to set up Google reCAPTCHA v3 in your Laravel project. This can be a bit tricky, so I'll help you simplify the process here.
What is reCaptcha?
reCaptcha is a Google service provided for free that helps you protect your websites from spam and malicious attacks.The new version, reCaptcha v3, has many improvements over previous versions thanks to the new captcha challenges. It returns a score and analytics you can use to take appropriate action for your website.
What you'll learn this article ?
By the end of this article, you'll have learned the following:
- How to integrate the reCaptcha v3 into your Laravel project
- How to setup a Google reCaptcha admin dashboard
- How to view your website reCaptcha scores and analytics to help you make better security decisions
How to setup google reCaptcha in a laravel project ?
Install this laravel project if you haven't done so yet
Now, let's create a validation rule that you can check only the google reCaptcha of ReCaptcha in Form:
Laravel generates a file app/Rules/ReCaptcha.php:
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
class OlympicYear implements Rule
{
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
//
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return 'The validation error message.';
}
}
As I said, it's similar to Requests classes for validation. We fill in the methods. passes() should return true/false depending on $value condition, which is this in our case:
public function passes($attribute, $value)
{
$response = Http::get("https://www.google.com/recaptcha/api/siteverify",[
'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
'response' => $value
]);
return $response->json()["success"];
}
Next, we fill in the error message to be this:
public function message()
{
return 'The google recaptcha is required.';
}
Finally, how we use this class? In controller's Validator() method we have this code:
return Validator::make($data, [
'user_name' => ['required', 'string', 'max:255'],
'user_email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'user_password' => ['required', 'string', 'min:8'],
'g-recaptcha-response' => ['required', new ReCaptcha]
]);
Next, we add the form html
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="row justify-content-md-center mb-10">
<div class="col-md-12 col-lg-12 col-sm-12 col-sx-12">
<label class="form-label" for="ReCaptcha">ReCaptcha</label>
<div class="g-recaptcha" id="no-captcha-here" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}"></div>
@error('g-recaptcha-response')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
</div>
Visit this link to create a reCaptcha admin account for yourself.
To create the reCaptcha admin, you can do the following:
- Add your site name to the label – localhost or examplesite.com
- Select v3 as the reCaptcha type
- Include domains in the domain section (localhost or examplesite.com)
- Add the owner's email address to the owner's section
- Check the "accept terms and service" box
Just a note – the localhost is for the sole purpose of developing locally. As such, it should be updated before moving to a production environment.
Add the reCaptcha to your site
- Click the submit button and save your secret keys.
- Add the site keys to the .env file of your project:
GOOGLE_RECAPTCHA_KEY="6LeGFT4kAAAAAOTy1FpsEKEdqOGC_WgfS-xxxxxxx"
GOOGLE_RECAPTCHA_SECRET="6LeGFT4kAAAAAHQTXgQ57JGCWKvjd-xxxxxxx"
Note: Submit Form without tick Recaptcha
Conclusion
At the end of this article, I hope you'll find it easier to set up reCaptcha and that you'll have a better understanding of what it's all about. Now you should be able to set up the most recent version within your Laravel project.