Laravel add reCAPTCHA

Laravel add reCAPTCHA

I assume you had already set up Laravel prior to reading this. If you have not please read my how to set up Laravel blog post to set up Laravel in Ubuntu 16.04

Make auth

Create a scaffold of the authentication system using the command below so that we can add reCAPTCHA to the registration, login and change password page. Once you run the commands, you will see login and register on the top right corner and it is fully functional.

sudo php artisan make:auth
sudo php artisan migrate
laravel add recaptcha
Top right corner with login and register link after deploying authentication scaffold.

Add validation rule

You will need to run the artisan to create a validation rule class for your reCAPTCHA. Once you run the command below, you will notice that in your Laravel app/Rules/ folder will contain a Recaptcha.php file. Edit the file so that it looks like my example.

sudo php artisan make:rule Recaptcha
laravel add recaptcha
Codes within the Recaptcha.php file.

Add GuzzleHttp

Edit the composer.json file and add the line “guzzlehttp/guzzle”: “6.*”, within “require-dev”. After that update composer by calling the line below.

sudo composer update

laravel add recaptcha

Obtain reCAPTCHA keys

Go to Google reCAPTCHA and request for a set of keys with your domain for your website use.

laravel add recaptcha
Request for a set of key for your domain use.
laravel add recaptcha
Google will supply you a site key and secret key.

Edit environment variables

Edit the .env file in Laravel and add two variables into the file. These two variables are the values for the keys you obtained from Google reCAPTCHA.

laravel add recaptcha

Add client site integration code

Go to resources/views/auth/ and edit the file register.blade.php. Add the codes given to you when you request for Google reCAPTCHA keys. As for the site key, I had it replaced with the environment variables we added earlier.

<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="6LeSB2YUAAAAAJnevyfLs4hlqnsfFgaGwH7Xtl8M"></div>
laravel add recaptcha
Add reCAPTCHA javascript codes at the top.
laravel add recaptcha
Add the reCAPTCHA div into the form.

Implement validation rules

To use the rule implemented earlier, you will need to edit the file RegistersUsers.php located at “vendor/laravel/framework/src/Illuminate/Foundation/Auth”. Add “use App\Rules\Recaptcha;” at the top to include the rule created earlier. In the register function, you will need to get the IP of the incoming request and submit it to reCAPTCHA for validation.

laravel add recaptcha
Partial content of RegistersUser.php file.