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.

Ubuntu install Laravel

Ubuntu install Laravel

I assume you already installed Apache and PHP into your Ubuntu, if not please read my Ubuntu install WordPress blog post. Within the blog post, I mentioned how to install Apache and also install PHP.

Besides that, if you are using “t2.nano” EC2 instance, you will need to create swap memory space otherwise it will not work due to the low memory for that instance. To create swap memory space, read my Ubuntu enable swap blog post.

Install additional packages

You will need to install additional packages in your Ubuntu in order for Composer to pull the Laravel codes. To install the additional required packages, type in the following command.

sudo apt install unzip php-xml php-mbstring

Install Composer

To install Composer, type in the following command.

sudo apt install composer

Pull Laravel codes

To pull the codes from Laravel, you will need to run the following command and before you do, replace the word “contact” with your project name. In my example, I am using Laravel for my contact page. The reason why I used version 5.5.* is because of Ubuntu 16.04 default PHP version is 7.0.

cd /var/www/
sudo composer create-project --prefer-dist laravel/laravel contact "5.5.*"
ubuntu install laravel
Composer pulling codes from Laravel repository.

Configurations

First, you will need to make a copy the “.env” file. After that, you will need to change the owner and access rights to the folder you just pull from Laravel through Composer.

Next, you will need to configure the “000-default.conf” file located in “/etc/apache2/sites-available/”. Take note of the document root and directory path.

cd /var/www/contact/
sudo cp .env.example .env
cd /var/www/
sudo chown -R www-data:www-data contact
sudo chmod -R 755 contact

ubuntu install laravel

Generate key

Your Laravel requires a key in order to work. To generate a key for it, type in the following command.

cd /var/www/contact/
sudo php artisan key:generate

Ubuntu install Laravel completed

If you had successfully installed Laravel, you should see the following page when you browse it.

ubuntu install laravel
Successfully installed Laravel.