Google Recaptcha using Laravel 5.8 with validation.

recaptcha_feature

Google Recaptcha using Laravel Application is the topic, we will discuss today. The reCaptcha is an open service that defends your site from spam and abuse. It uses advanced risk analysis techniques to show humans and bots apart. Using reCaptcha, you must sign up for the API key pair for your website. The key pair consists of the site key and secret key.

In this example, we can use anhskohbo/no-captcha package for creating reCaptcha.So, Open your terminal and put the below code.

composer require anhskohbo/no-captcha

Step 1: Publish Config File

So, Open your terminal and put the below code.

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Step 2: Set Google Site Key and Secret Key

In this step, you have to open your .env file and put the below code.

NOCAPTCHA_SECRET= 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
NOCAPTCHA_SITEKEY= 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

This is testing key provide by google for testing purpose. You can get these keys on this URL Google testing key. or you can create your own keys on to in this sites Google reCAPTCHA.


Create Page of reCAPTCHA


After click on the submit button, you got two key SITE key and SECRET Key


Now open the .env file and add these two keys.

NOCAPTCHA_SECRET= //Enter your secret Key
NOCAPTCHA_SITEKEY= //Enter your site key

Step 3: Create a Controller

In this step, we have to create a controller file in your local directory. open your terminal and put below code.

php artisan make:controller GoogleCaptchaController

So we have to create two methods in Our Controller googlecaptchaRegister & googlecaptchaRegisterPost.

  • googlecaptchaRegister => This method to show the google captcha register
  • googlecaptchaRegisterPost => This method used with the validation & show success message.

So open your Controller file GoogleCaptchaController.php and put the below code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class GoogleCaptchaController extends Controller{
    public function googlecaptchaRegister(){
        return view('googleCaptcha');
    }
    public function googlecaptchaRegisterPost(Request $request){
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'g-recaptcha-response' => 'required|captcha'
        ]);
        return "Successfully check google reCAPTCHA";
    }
}

Step 4: Create routes

Now open your routes file routes/web.php and put the below code.

//Google captcha
Route::get('googleCaptcha', 'GoogleCaptchaController@googlecaptchaRegister');
Route::post('googleCaptcha', 'GoogleCaptchaController@googlecaptchaRegisterPost');

Step 5: Create a blade file

In this part, we have to create a blade file where it will use to upload an image and save it googleCaptcha.blade.php, so create a file and put the below code.

<html lang="en">
<head>
    <title>reCAPTCHA Code in Laravel</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <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">
      <h2>reCAPTCHA Code in Laravel</h2><br/>
      @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div><br />
      @endif
      <form method="post" action="{{url('googleCaptcha')}}">
        @csrf
        <div class="row">
          <div class="col-md-4"></div>
          <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="col-md-4"></div>
            <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="col-md-4"></div>
            <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="col-md-4"></div>
          <div class="form-group col-md-4">
          <label for="ReCaptcha">Recaptcha:</label>
          {!! NoCaptcha::renderJs() !!}
          {!! NoCaptcha::display() !!}
            </div>
        </div>
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <button type="submit" class="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    </div>
</body>
</script>
</html>

Output with reCAPTCHA



Laravel Validation



reCAPTCHA success message


Now you have to open your browser & check this thing and put below URL:

http://127.0.0.1:8000/googleCaptcha

About Dhaval Shah

My name is Dhaval Shah. I'm a Laravel developer. I live in India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Java-script, JQuery, Laravel, WordPress, and Bootstrap.
Follow me on Github / Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!