Google Recaptcha in Laravel 8
Google Recaptcha is Captcha service by Google that prevents automated bot from accessing website. It uses advanced analysis tool to check it was human or bot. The general use of captcha on Signup, Signin or Comment form.
In this article, we will implement Google Recaptcha in Laravel using anhskohbo/no-captcha package. So let's start from fresh Laravel application.
Step 1: Create Laravel application
The first step we create new Laravel application using composer. So Open Terminal and run the command to create Laravel application
composer create-project laravel/laravel captcha
Step 2: Install package
Now in the Terminal, install pcakage using below command.
composer require anhskohbo/no-captcha
Step 3: configure package
Publish config file with publish command.
php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"
You will need to Signup in Google to get captcha keys. Go to Google Captcha admin console and fill the form. After form submit, you will get captcha keys.
In .env file, add these captcha keys.
NOCAPTCHA_SITEKEY=6jkdscsgAAcsmkSc6s8SDjsdU78aJqa8sJWe
Step 4: Create controller file
In this step we create controller class using below command.
php artisan make:controller CaptchaController
In the controller we will create two methods, one method for view and second method for validating form.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class aptchaController extends Controller
{
public function form()
{
return view('form');
}
public function submit(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required|min:6',
'g-recaptcha-response' => 'required|captcha'
]);
dd("Form submitted successfully.");
}
}
Step 5: Create routes
In routes/web.php file, add these two routes
<?php
use App\Http\Controllers\CaptchaController;
// captcha routes
Route::get('form', [CaptchaController::class, 'form'])->name('form');
Route::post('form-submit', [CaptchaController::class, 'submit'])->name('submit');
Step 6: Create blade file
Create form.blade.php blade file in resource/views folder for view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google Recaptcha</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="container">
<h1>reCAPTCHA Code in Laravel</h1>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="post" action="{{ route('submit') }}">
@csrf
<div class="row">
<div class="form-group col-md-4">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="name">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="Email">Email:</label>
<input type="text" class="form-control" name="email">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="Password">Password:</label>
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="ReCaptcha">Recaptcha:</label>
{!! NoCaptcha::renderJs() !!}
{!! NoCaptcha::display() !!}
</div>
</div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Now everything is ready. Run the artisan command to start Laravel application server.
php artisan serve
Open the below url in your web browser.
Thank you for giving time in reading article.
Copyright 2024 ErrorGram