Laravel 11 Google Recaptcha V3 Validation
Hello, laravel web developers! In this article, we'll see how to add Google reCAPTCHA v3 in laravel 11. Here, we'll integrate Google reCAPTCHA v3 validation in laravel 11. We'll add Google reCAPTCHA in the Contact Us form for security.
reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website.
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a type of security measure known as challenge-response authentication.
CAPTCHA helps protect you from spam and password decryption by asking you to complete a simple test that proves you are human and not a computer trying to break into a password-protected account.
Laravel 11 Google reCAPTCHA V3 Validation
Step 1: Install Laravel 11 Application
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel example-app
Step 2: Add Google API Key
Then, we'll get the Google site key and secret key. Click here to get Google reCAPTCHA login
.env
GOOGLE_RECAPTCHA_KEY=xxxxxxxxx
GOOGLE_RECAPTCHA_SECRET=xxxxxxxxx
Step 3: Define a Routes
Then, we'll define routes into the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('contact-us', [UserController::class, 'index']);
Route::post('contact-us', [UserController::class, 'store'])->name('contact.us.store');
Step 4: Create a Validation Rule
Next, we'll create reCAPTCHA validation using the following command.
php artisan make:rule ReCaptcha
app/Rules/ReCaptcha.php
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
use Illuminate\Support\Facades\Http;
class ReCaptcha implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
$response = Http::get("https://www.google.com/recaptcha/api/siteverify",[
'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
'response' => $value
]);
if (!($response->json()["success"] ?? false)) {
return $response->json()["success"];
}
}
/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
return 'The google reCAPTCHA is required.';
}
}
Step 5: Create Controller
Next, we'll create a ContactUsController.php file and add the following code to that file.
app\Http\Controllers\ContactUsController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Rules\ReCaptcha;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class ContactUsController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(): View
{
return view('contact');
}
/**
* Write code on Method
*
* @return response()
*/
public function store(Request $request): RedirectResponse
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'phone' => 'required|digits:10|numeric',
'subject' => 'required',
'message' => 'required',
'g-recaptcha-response' => ['required', new ReCaptcha]
]);
$input = $request->all();
return redirect()->back()->with(['success' => 'Contact Form Submit Successfully']);
}
}
Step 6: Create View File
Then, we'll create a contact.blade.php file and add the Google Recaptcha.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Google ReCAPTCHA V3 - Techsolutionstuff</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render={{ env('GOOGLE_RECAPTCHA_KEY') }}"></script>
</head>
<body>
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-10 offset-1 mt-5">
<div class="card">
<div class="card-header bg-primary">
<h3 class="text-white">Laravel 11 Google ReCaptcha V3 Example - ItSolutionStuff.com</h3>
</div>
<div class="card-body">
<form method="POST" action="{{ route('contact.us.store') }}" id="contactUSForm">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Email:</strong>
<input type="text" name="email" class="form-control" placeholder="Email" value="{{ old('email') }}">
@if ($errors->has('email'))
<span class="text-danger">{{ $errors->first('email') }}</span>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Phone:</strong>
<input type="text" name="phone" class="form-control" placeholder="Phone" value="{{ old('phone') }}">
@if ($errors->has('phone'))
<span class="text-danger">{{ $errors->first('phone') }}</span>
@endif
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Subject:</strong>
<input type="text" name="subject" class="form-control" placeholder="Subject" value="{{ old('subject') }}">
@if ($errors->has('subject'))
<span class="text-danger">{{ $errors->first('subject') }}</span>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong>Message:</strong>
<textarea name="message" rows="3" class="form-control">{{ old('message') }}</textarea>
@if ($errors->has('message'))
<span class="text-danger">{{ $errors->first('message') }}</span>
@endif
@if ($errors->has('g-recaptcha-response'))
<span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
@endif
</div>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-success btn-submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('#contactUSForm').submit(function(event) {
event.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute("{{ env('GOOGLE_RECAPTCHA_KEY') }}", {action: 'subscribe_newsletter'}).then(function(token) {
$('#contactUSForm').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$('#contactUSForm').unbind('submit').submit();
});;
});
});
</script>
</html>
Step 7: Run the Laravel 11 Application
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: How to Export CSV File using Queue in Laravel 11
- Read Also: Laravel 10 CRUD Operation using Google Firebase
- Read Also: Laravel 10 Socialite Login With Google Account
- Read Also: Google Autocomplete Address In Laravel 8
