Google reCaptcha Code using anhskohbo/no-captcha in Laravel

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you Google reCaptcha Code by using anhskohbo/no-captcha in Laravel application. Most of we think we should use Google captcha code on our registration form, or contact form etc because captcha code prevent the spams or bots etc. We know most of the application we need to use the captcha verification because it is very important for the security reason. So there are several library to generate the captcha image in Laravel. Now in this example i will use Google reCaptcha for the generate captcha by using anhskohbo/no-captcha package. We know anhskohbo/no-captcha is a very popular package.

Now In this post i will give you a very simple example and it is from the scratch of generate Google reCaptcha code. So after the complete this example we can found a ui design as like we want.

Step 1: Installation

Now in the first step we will install anhskohbo/no-captcha package for the Google reCaptcha code. So this package through we can generate the captcha code for our project. Now at first fire the bellow command in our cmd or terminal:

composer require anhskohbo/no-captcha

Good,now we need to add the provider path and alias path in our config/app.php file. So need to open that file and add the bellow code.

config/app.php

return [
	......
	$provides => [
		......
		......,
		Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class
	],
	.....
]
Step 2: Set Google Site Key

So in this step we have to set google site key and also secret key. If we don’t have site key and secret key then we need to create from here. So you should click on this link : Recaptcha Admin

After the click we can see bellow view and we need register our site link this way:

Google reCaptcha Code in laravel

Ok good, after the successfully register we can get the site key and also secret key from as like the bellow preview.

Google reCaptcha Code in laravel

Now need to open .env file and add this two variable

.env

NOCAPTCHA_SECRET=[secret-key]
NOCAPTCHA_SITEKEY=[site-key]
Step 3: Add Route

Now in this step we will add the new two route for the creating a small example on that way we can understand this very well. So at first need to add the bellow route in our routes.php file.

app/Http/routes.php

Route::get('site-register', 'Auth\[email protected]');
Route::post('site-register', 'Auth\[email protected]');
Step 4: Add Controller Method

Okay in this step we will add the siteRegister() and also siteRegisterPost() method in our AuthController Controller file for our this example. If we want to copy whole controller file then also we need to just copy and paste.

app/Http/Controllers/Auth/AuthController.php

namespace App\Http\Controllers\Auth;


use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
use Auth;
use Illuminate\Http\Request;


class AuthController extends Controller
{


    use AuthenticatesAndRegistersUsers, ThrottlesLogins;


    protected $redirectTo = '/';


    /**
     * Create a new authentication controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }


    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
        ]);
    }


    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
        ]);
    }


    public function siteRegister()
    {
        return view('siteRegister');
    }


    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 5: Add Blade file

Hope we are in last step and we have to just create the new blade file as name siteRegister.blade.php and need to put the bellow code on that file.

resources/views/siteRegister.blade.php

@extends('layouts.app')


@section('content')
<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</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>
@endsection

if you are want to know more about google captcha then you can know more from here : anhskohbo/no-captcha.

Read Also: Generate Captcha code and Validation by using BotDetect package in laravel.

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →