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.

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.