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.

Remove static resources query strings

List of errors

Query strings are unnecessary for static files like JS and CSS because they do not process the parameters passed to them. WordPress put them there so that when you update WordPress version the old file will not be cached and you immediately get the updated version.

To find out if your site is suffering from unnecessary query strings from static resources. Go have your site test out at pingdom. From the test, my default WordPress theme is having a bad score of “E”.

remove static resources query strings
A list of static resources query strings errors.

 Remove static resources query strings

There is WordPress plugin to fix this but I dislike the fact that there are so many badly written plugins that will damage my WordPress site. Therefore I prefer to fix it the PHP way.

To fix it, go to the functions.php file within the folder of your theme and add the following codes at the end of the file. What the codes do is that it is splitting the URL using “?” as the delimiter and then choose the first part of it.

function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Successfully fixed

Once fixed, have your site retested again. It should now have a score of “A”.

remove static resources query strings
Reran the test after fixing it.

Ubuntu install WordPress

Install Apache

I assume you had already installed Apache into your Ubuntu elastic compute cloud ( EC2 ) instance. If you had not, then read my test Cloudflare DNS blog post, I had written about installing Apache. The entire guide below is using Ubuntu 16.04.

Configure Rewrite Module

This step is optional if you do not mind seeing “index.php” with query strings suffix after it. To remove it, you’ll need to configure the rewrite module in Apache. Go to /etc/apache2/sites-available/ and edit the file 000-default.conf and add the following codes in between the “VirtualHost” tag. After that type in the following commands to enable rewrite module.

<Directory /var/www/html>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Require all granted
</Directory>
sudo a2enmod rewrite
sudo service apache2 restart
ubuntu install wordpress
A sample rewrite module configuration.

Install MySQL server

To install MySQL server, type in the following commands in your Ubuntu terminal. During installation, it will prompt you for the root password. Type in your desired root password and repeat the same password in the next screen.

Next type in mysql_secure_installation. You will be prompted with a series of questions, you can answer accordingly as per my example. Create a database for WordPress use with the commands below. In my example, my database root user password is “password”. Replace the password with the password you entered earlier when you install MySQL server.

sudo apt-get update
sudo apt-get install mysql-server -y
ubuntu install wordpress
MySQL server installation prompting for “root” password.
ubuntu install wordpress
MySQL server installation prompting for root password confirmation.
mysql_secure_installation

Would you like to setup VALIDATE PASSWORD plugin? : n
Change the password for root ? : n
Remove anonymous users? : y
Disallow root login remotely? : y
Remove test database and access to it? : y
Reload privilege tables now? : y

mysql -uroot -ppassword -e 'create database wordpress'

Creating a database for WordPress by executing the MySQL statement with your password reveal in plain text will cause a warning. To suppress Bash MySQL warning you will need to store the password in the encrypted “.mylogin.cnf” file.

ubuntu install wordpress
A series of questions asked during mysql_secure_installation

Install PHP

To install PHP, type in the following commands. Once completed, to test if you had successfully installed PHP, open your web browser and go to “http://54.236.21.17/info.php”. Your IP address will be different from mine, replace the IP address with yours.

If you are unsure of your IP address, you can type in the curl command below to check. Make sure that you configure security group to allow inbound HTTP traffic.

sudo apt-get install php php-mysql libapache2-mod-php php-curl -y
echo '<?php phpinfo(); ?>' | sudo tee -a /var/www/html/info.php
curl checkip.amazonaws.com

ubuntu install wordpress

Ubuntu Install WordPress

To install WordPress, type in the following commands. Once completed, go to “http://54.236.21.17/index.php”. Your IP address will be different from mine, replace the IP address with yours. You should see the WordPress setup config page. Follow through the setup wizard to complete the WordPress setup.

cd /tmp/
wget https://wordpress.org/latest.tar.gz
tar -xzvf latest.tar.gz
cd /tmp/wordpress/
sudo mv * /var/www/html/
sudo chown -R www-data:www-data /var/www/html/
sudo chmod -R 755 /var/www/html/

ubuntu install wordpress
Choose your WordPress language.

ubuntu install wordpress

ubuntu install wordpress
In my example, my username is “root” and my password is “password”

ubuntu install wordpress

ubuntu install wordpress

ubuntu install wordpress

ubuntu install wordpress

ubuntu install wordpress
You have successfully completed WordPress setup once you see this WordPress admin dashboard.