Hi Dev,
Today, we will learn how to use google recaptcha in laravel 8/7/6. you can simply add google recaptcha in laravel 8/7/6. we will add laravel 7/6 google recaptcha code with form validation using anhskohbo/no-captcha composer package.
Google ReCaptcha is a captcha like system, that provide security against hackers and sticks or curl requests. It assures that a computer user is a human. It is the best and most used captcha system available where users are only required to click on a checkbox and in some cases select some similar images related to conman question.
In this example, we will create simple registration form and implement google captcha code. before use google captcha code we will install “anhskohbo/no-captcha” composer package for google captcha. You have to just follow few step and you will get google re-captcha code in your laravel 6 app.
Step 1 : Download Laravel 6
first of all we need to get fresh Laravel 6 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Install anhskohbo/no-captcha Package
In this step we need to install anhskohbo/no-captcha via the Composer package manager, so one your terminal and fire bellow command:
composer require anhskohbo/no-captcha
After successfully install package, we require to add aliases and service provider.
config/app.php
<?php
return [
.....
'providers' => [
.....
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
],
'aliases' => [
.....
'NoCaptcha' => Anhskohbo\NoCaptcha\Facades\NoCaptcha::class,
]
]
Step 3: Update Google API Key
In this step we need to set google site key and secret key. If you don’t have site key and secret key then you can create from here. First click on this link : Recaptcha Admin
After click you can see bello view and you need register your site link this way:
Ok, after sucessfully register you can get site key and secret key from like bellow preview.
Now open .env file and add this two variable
.env
NOCAPTCHA_SITEKEY=[site-key]
NOCAPTCHA_SECRET=[secret-key]
Step 4: Add Route
In this is step we need to create routes for display view and ajax method. so open your “routes/web.php” file and add following route.
routes/web.php
Route::get('site-register', 'SiteAuthController@siteRegister');
Route::post('site-register', 'SiteAuthController@siteRegisterPost');
Step 5: Create SiteAuthController
In this step, we have to create new controller as SiteAuthController and we have also need to add two methods siteRegister() and siteRegisterPost() on that controller like as you can see bellow:
app/Http/Controllers/SiteAuthController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SiteAuthController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function siteRegister()
{
return view('siteRegister');
}
/**
* Create a new controller instance.
*
* @return void
*/
public function siteRegisterPost(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required|same:password_confirmation',
'password_confirmation' => 'required',
'g-recaptcha-response' => 'required|captcha',
]);
print('done');
}
}
Step 6: Create View File
In Last step, let’s create siteRegister.blade.php(resources/views/siteRegister.blade.php) for layout and lists all items code here and put following code:
resources/views/siteRegister.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 - Google Recaptcha Code with Validation - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{!! NoCaptcha::renderJs() !!}
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">Register - ItSolutionStuff.com</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/site-register') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input 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('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation">
@if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</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">
{!! 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">
<br/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-user"></i>Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now you can simply run and check…
I hope it can help you….
