Laravel 8 Google Recaptcha Tutorial Example

343 views 8 months ago Laravel

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_SECRET=6jkdscsgAAcsmkSc6s8SDjsdU78aJqa8sJWe
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.

http://127.0.0.1:8000/form

Thank you for giving time in reading article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]