This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Use reCAPTCHA in Laravel 8.x Forms for Validation

November 16, 2021

4 Min Read
laravel recaptcha

Forms are the main source of spam on any website. Whether it is the traditional contact forms or custom forms for user feedback, abusing the forms to (intentionally or unintentionally) overwhelm the server is a common attack on a website.

Google ReCaptcha V3 is a captcha-like framework that provides security against hackers and sticks or twist requests. It assures that the computer user is a human.

reCAPTCHA is an industry-standard for preventing spam by greatly enhancing form validation capabilities. It is a combination of knowledge and image recognition-based interpretive response based on answer selection. The methodology relies on machine learning from Google’s large data sets of human interaction with the web, which is slightly different and random when compared to a bot.

In this article, I will demonstrate how to use Google reCAPTCHA for form validation in Laravel 8.x

Prerequisites

This one requires only two things:

  • You must have some knowledge about Laravel 8.x.
  • You must have a launched Laravel app on Cloudways. Signup for a free account and follow this GIF for launching the app within minutes.

DO installation

Setting up reCAPTCHA in Laravel 8

Let’s get the necessary classes we will require to make things possible. I’ll be using Composer to bring down the packages:

$ composer requireanhskohbo/no-captcha

Set up Configurations

We are going to edit the app.php file.

Insert these lines in “providers” array:

 Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,

Now, let’s setup our secret keys. Go to this link, and enter your domain address, like I have shown in image below, to grab your “secret key” and “site key”.

key setting laravel recaptcha

Make changes to your “.env” file:

Insert these lines:

NOCAPTCHA_SECRET= PUT YOUR SECRET KEY HERE

NOCAPTCHA_SITEKEY= PUT YOUR SITE KEY HERE

Set up Routes

These are our entry points of our app, let’s make some changes.

app/Http/routes.php

Paste the code below:

<?php

Route::get('/',function() {
return view('files.captchaform');
});

Route::get('contactus', '[email protected]');
Route::post('contactus', '[email protected]')->name('contactus');

?>

Save and exit. As you see, our routes are accessing a FileController which has two functions to get and post captcha form.

Make the Controller

Let’s make our controller.

php artisan make:controller ContactUsController
app/Http/Controller/ContactUsController.php

Copy and paste the code below:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use Validator;
use Redirect;

class ContactUsController extends Controller
{ 
public function getContactus()
{
return view('contactus');
}

public function postContactus(Request $request)
{
$this->validate($request, [
'fullname' => 'required',
'email' => 'required',
'description' => 'required',
'g-recaptcha-response' => 'required|captcha',
]);

// Write here your database logic

\Session::put('success', 'Youe Request Submited Successfully..!!');
return redirect()->back();
}
}?>

Save and exit.

Stop Wasting Time on Servers

Cloudways handle server management for you so you can focus on creating great apps and keeping your clients happy.

Make the Views

Let’s make our UI which will make us use of the reCAPTCHA service.

resources/views/files/contactus.blade.php

And, paste this code below.

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Register</div>

<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('contactus') }}">
{{ csrf_field() }}

<div class="form-group{{ $errors->has('fullname') ? ' has-error' : '' }}">
<label for="fullname" class="col-md-4 control-label">Full Name</label>

<div class="col-md-6">
<input id="fullname" type="text" class="form-control" name="fullname" value="{{ old('fullname') }}" autofocus>
@if ($errors->has('fullname'))
<span class="help-block">
<strong>{{ $errors->first('fullname') }}</strong>
</span>
@endif
</div>
</div>

<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>

<div class="col-md-6">
<input id="email" 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('description') ? ' has-error' : '' }}">
<label for="description" class="col-md-4 control-label">description</label>

<div class="col-md-6">
<textarea id="description" class="form-control" name="description"></textarea>
@if ($errors->has('description'))
<span class="help-block">
<strong>{{ $errors->first('description') }}</strong>
</span>
@endif
</div>
</div>

<div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Captcha</label>

<div class="col-md-6 pull-center">
{!! app('captcha')->display() !!}

@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">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection

Let’s save and exit

Let’s Test the Form

Go to your application and see if you can find the reCAPTCHA.:

recaptcha

Conclusion

This article is a simple example of how you can secure your web application by adding reCAPTCHA. reCAPTCHA in Laravel is the leading and most used captcha framework, where clients are only required to tap on a checkbox and in a few cases select a few comparative pictures related to the conman address. This adds an extra layer of security, eluding spam and improving your form validation capability.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Cloudways hosting has one of the best customer service and hosting speed”

Sanjit C [Website Developer]

Inshal Ali

Inshal is a Content Marketer at Cloudways. With background in computer science, skill of content and a whole lot of creativity, he helps business reach the sky and go beyond through content that speaks the language of their customers. Apart from work, you will see him mostly in some online games or on a football field.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!