Laravel 9 - How to Integrate Google ReCaptcha in Laravel Application

Published on Sep 23, 2022

Hello Artisans, today I'll show you how to integrate google recaptcha in our Laravel Application. Google Recaptcha is a handy tool to prevent from robots or who kept busy your site by requesting the resource again and again until the server crash or doesn't respond anymore. So, let's see how we can easily integrate google recaptcha in our Laravel Application.

Note: Tested on Laravel 9.19.

  1. Create and Setup Controller
  2. Create and Setup Route
  3. Create and Setup View File
  4. Output

Create and Setup Controller

In the very first step, we'll create a controller and also we'll write our necessary codes/logics.

Now fire the below command in terminal

php artisan make:controller RecaptchaController

It'll create a file under app\Http\Controllers called RecaptchaController.php. Open the file and replace with below codes.

app/Http/Controllers/RecaptchaController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RecaptchaController extends Controller
{
    public function index()
    {
        return view('recaptcha');
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required',
            'stack' => 'required',
            'g-token' => 'required',
        ],
        [
            'g-token.required' => 'Please verify that you are not a robot.'
        ]);
        dd('Successfully validated');
    }
}

Create and Setup Route

Let's put the below route in web.php

routes/web.php
Route::resource('recaptcha', RecaptchaController::class)->only([
    'index', 'store'
]);

Create and Setup View File

Now we we'll create a blade file where we can setup our view where we can see tour form wiith google recaptcha protected. So let's create a view file called recaptcha.blade.php under resources/views. Now we need to setup so that user have to check google recaptcha. But hang on there. Before setup we need to enable google recaptcha API keys from the below link reCAPTCHA (google.com). Here you'll get the below form

Google Recaptcha From

Now fill up the form like in the below picture.

Google Recaptcha Complete Form

And click "Submit". After clicking to the submit you'll be redirected to next page. Where you'll get your API keys. Save them for now.

Now back to our application. Open the recaptcha.blade.php that we'll create earlier. Open the file paste the following code.

resources/views/recaptcha.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Google Recaptcha - shouts.dev</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h4>Google Recaptcha Form - shouts.dev</h4>
            <form action="{{ route('recaptcha.store') }}" method="post">@csrf
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" class="form-control">
                    <span class="text-danger">{{ $errors->first('name') }}</span>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" class="form-control">
                    <span class="text-danger">{{ $errors->first('name') }}</span>
                </div>
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="text" name="phone" id="phone" class="form-control">
                    <span class="text-danger">{{ $errors->first('name') }}</span>
                </div>
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <select class="form-control" id="sel1" name="stack">
                        <option value="">Select One</option>
                        <option value="php">PHP</option>
                        <option value="python">Python</option>
                        <option value="js">Javascript</option>
                        <option value="laravel">Laravel</option>
                    </select>
                    <span class="text-danger">{{ $errors->first('stack') }}</span>
                </div>
                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" name="address" id="address" class="form-control">
                </div>
                <input type="hidden" name="g-token" id="recaptchaToken">
                <div class="g-recaptcha"
                        data-sitekey="6LdgeOIUAAAAABcXEV3jTS1lxrE0LsdrHaL7WwlO"
                        data-callback='onSubmit'
                        data-action='submit'>Submit</div>

                <span class="text-danger">{{ $errors->first('g-token') }}</span>
                <div class="form-group">
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    function onSubmit(token) {
        document.getElementById("recaptchaToken").value = token;
    }
</script>
</body>
</html>

And that's it. Now modify a little bit with your site key. In the data-sitekey attribute replace it with your google recaptcha api key which you got it after submitting the google recaptcha form.


<div class="g-recaptcha"
                        data-sitekey="your_site_ket"
                        data-callback='onSubmit'
                        data-action='submit'>Submit</div>

Output

And finally we're ready with our setup. It's time to check our output. Now go to http://localhost:8000/recaptcha, If everything goes well (hope so) you can find a below output.

Validation error without Checking the Google Recaptcha
After completing the Google Recaptch
After Successfully Passing the Validation

That's it for today. Hope you'll enjoy through this tutorial. Catch me on comment section if anything goes wrong. You can also also download this tutorial from GitHub. Thanks for reading :)

Comments (0)