Laravel 5.7 - Google Recaptcha Code with Validation

By Hardik Savani | October 13, 2018 | | 3132 Viewer | Category : PHP Laravel


In this article, we will implement Recaptcha in forms in Laravel 5.7. i write step by step tutorial of how to use google captcha using 'anhskohbo/no-captcha' package in laravel 5.7 application. you can simple use google re-captcha code in your registration form too.

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 5.7 app.

Step 1 : Download Laravel 5.7

first of all we need to get fresh Laravel 5.7 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 5.7 - 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....




***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: