How to Add Google reCAPTCHA on Register page and login page in Laravel

In this tutorial I’m going to learn how to add captcha features in on register blade and login page. Nowadays captcha is very useful because its very important for security reason.

There are several library to generate captcha image in Laravel. In this example I’m going to use Google reCaptcha for generate captcha using anhskohbo/no-captcha package. anhskohbo/no-captcha is very popular package.

Please follow some easy steps define below….

First let’s go to install laravel project

composer create-project laravel/laravel admin-dashboard "5.8.*"

Setup database with your installed laravel 8 project . 👇 Step 2 — Database Configuration

lets go to .env folder and put database name and connect to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=admin-dashboard
DB_USERNAME=root
DB_PASSWORD=

Now migrate the table

php artisan migrate

Now Create Auth

php artisan make:auth

Next step we have to install anhskohbo/no-captcha package for Google reCaptcha code, after install these package we able to generate captcha code in our register and login page. copy below code and paste in your terminal

composer require anhskohbo/no-captcha

Next add below code in provider path in config/app.php path

Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,

Next Set Google Site Key

Now go to set google secret key and google site key. if you are new user then you have to create from here. go through below link

Recaptcha Admin

After submit this form you’ll get site key and secret key

Now go to .env file and add this two variable

.env

#########Google Recaptcha
 NOCAPTCHA_SITEKEY=your site key
 NOCAPTCHA_SECRET=your secret key

Next go to Route/web.php and add Auth::routes();

Auth::routes();

Go to Route/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Next go to RegisterController.php and add this class

RegisterController.php

'g-recaptcha-response' => 'required|captcha',

Next go to App.blade.php and add below script

App.blade.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{!! NoCaptcha::renderJs() !!}

And last step of the go to register.blade.php file and add google captcha code before the register button

register.blade.php

<div class="form-group row {{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }} ">
<label for="captcha" class="col-md-4 col-form-label text-md-right">{{ __('captcha') }}</label>

<div class="col-md-3" style="">
{!! app('captcha')->display() !!}
@if ($errors->has('g-recaptcha-response'))
<span class="help-block">
<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
</span>
@endif
</div>
</div>

Now refresh your browser and you can see google captcha code successfully added in your register page.

http://127.0.0.1:8000

Successfully Login

I hope this tutorial is helpful for you… if you have any question comment now. 🙏🙏

Tagged : / / /