Hello Geek, I’ll show you how to use Google reCAPTCHA v3 with Laravel 9. I’d like to demonstrate a Google reCAPTCHA example in Laravel 9. In this tutorial, you’ll learn how to use Google reCAPTCHA v3 in Laravel 9. In Laravel 9, you’ll learn about recaptcha v3. Consider the following example: Google recaptcha Laravel 9. Google reCAPTCHA V3 is a captcha-like system that protects against hackers as well as sticks and curl requests. It guarantees that a computer user is human. It is the best and most widely used captcha system available, requiring users to simply click a checkbox and, in some cases, select some similar images related to the captcha question.
In this example, we’ll make a simple registration form and use Google Captcha. We will install the “josiasmontag/laravel-recaptchav3” composer package for google captcha before using it. Just a few steps and you’ll have a Google re-captcha code in your Laravel 9 app.
Step 1: Install Laravel 9
composer create-project laravel/laravel example-appStep 2: Install josiasmontag/laravel-recaptchav3 Package
composer require josiasmontag/laravel-recaptchav3After successfully installing the package, we must publish the configuration file using the following command:
php artisan vendor:publish --provider="Lunaweb\RecaptchaV3\Providers\RecaptchaV3ServiceProvider"Step 3: Update Google API Key
In this step, we will create a Google Site Key and a Secret Key. If you do not already have a site key and a secret key, you can generate them from this page. First, go to this website: Recaptcha AdministratorYou must now generate a new key for Google ReCaptchav3, as shown in the screenshot below:
RECAPTCHAV3_SITEKEY=[site-key]RECAPTCHAV3_SECRET=[secret-key]Step 4: Make a RegisterController.
In this step, we must create a new controller called RegisterController and add two methods to it called index() and store(), as shown below:
app/Http/Controllers/RegisterController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class RegisterController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function index()
{
return view('register');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required|same:password_confirmation',
'password_confirmation' => 'required',
'g-recaptcha-response' => 'required|recaptchav3:register,0.5'
]);
dd('done');
}
}Step 5: Create Route
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\RegisterController;
/*
|--------------------------------------------------------------------------
| 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::controller(RegisterController::class)->group(function(){
Route::get('register', 'index');
Route::post('register', 'store');
});Step 6: Create View File
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 - Google Recaptcha V3 Code with Validation - aboutthenerd.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{!! RecaptchaV3::initJs() !!}
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="card card-primary">
<div class="card-header">Laravel 9 - Google Recaptcha V3 Example- aboutthenerd.com</div>
<div class="card-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation">
@if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
<div class="col-md-6">
{!! RecaptchaV3::field('register') !!}
@if ($errors->has('g-recaptcha-response'))
<span class="help-block">
<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<br/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-user"></i>Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serveNow, Go to your web browser, type the given URL and view the app output:
All the best nerd!
Find more post about authentication here