Project 9 for CNIT 129S: reCAPTCHA (15 pts.)

What You Need

A Linux machine, virtual or real. I used Ubuntu 16.04 from osboxes.org.

Making a reCAPTCHA Account

Open a Web browser and go to

http://www.google.com/recaptcha/admin

A Google login page appears. Log in with a Gmail account.

Click the "Get reCAPTCHA!" button.

In the next page, enter these items:

Don't use the literal text "YOURNAME" -- use your own name.

Click Register.

On the next page, scroll down to the "Domains" section. Enter

localhost

as shown below. At the bottom of the page, click the "Save changes" button.

A page appears with keys and code snippets. The only thing we need is the two keys, as shown below.

Keep this page open. You will need to paste those two keys into the files you create below.

Testing Networking

On the Linux machine, in a Terminal window, execute this command:
ping samsclass.info

Make sure you are getting replies. If you are not, you need to correct your networking problems before proceeding.

Installing PHP

On the Linux machine, in a Terminal window, execute these commands:
sudo apt-get update

sudo apt-get install php libapache2-mod-php -y

Enter your password when you are prompted to.

Starting Apache

On the Linux machine, in a Terminal window, execute these commands:
sudo service apache2 restart

netstat -pant

You should see a local address on port 80 ":::80" in a State of LISTEN, with a Program Name of apache2, as shown below:

Testing PHP

On your Linux machine, in a Terminal window, execute this command:
sudo nano /var/www/html/test.php
In nano, type in the code shown below:
<?php phpinfo(); ?>

Your screen should look like this:

Press Ctrl+X, then press Y, then press the Enter key. This saves your file.

On the left side of the desktop, click the orange Firefox icon.

In the FireFox address bar, enter localhost/test.php and then press the Enter key. You should see a PHP configuration page, as shown below:

This verifies that Apache and PHP are running correctly.

Making a Form

On your Linux machine, in a Terminal window, execute this command:
sudo nano /var/www/html/YOURNAME-form.html

Replace the text "YOURNAME" with your own name, but don't use any spaces.

Enter this HTML code into the form, replacing YOURNAME with your name in two places, as highlighted in the image below:

<html>
<head><title>YOURNAME reCAPTCHA Form</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<h1>YOURNAME reCAPTCHA Form</h1>
<form method="post" action="captcha.php">
<div class="g-recaptcha" data-sitekey="9LDDpf0eVtMZY6kdJnGhsYYY-5ksd-W"></div>
<input type="submit" />
</form>
</body>
</html>

Replace the data-sitekey value with your site key you found at the start of this project, as highlighted in the image below.

Replace YOURNAME with your name in two places.

Save the file with Ctrl+X, Y, Enter.

Making the PHP Processor Script

On your Linux machine, in a Terminal window, execute this command:
sudo nano /var/www/html/captcha.php

Enter this PHP code into the file. 

<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
    //your site secret key
    $secret = '6LchiMoSAAAAACk_2af1Z5J_FsZLwSC1sOr6VXR0';
    //get verify response data
    $verifyResponse = file_get_contents(
        'https://www.google.com/recaptcha/api/siteverify?secret='.
        $secret.'&response='.$_POST['g-recaptcha-response']);
    $responseData = json_decode($verifyResponse);
    if($responseData->success):
        echo "<h1>YOURNAME reCAPTCHA Succeeded!</h1>";
    else:
        echo "<h1>Robot verification failed, please try again.</h1>";
    endif;
else:
   echo '<h1>Please click on the reCAPTCHA box.</h1>';
endif;
?>

Replace the $secret value with your secret key you found at the start of this project, as highlighted in the image below.

Replace YOURNAME with your name.

Save the file with Ctrl+X, Y, Enter.

Testing the PHP Script

On your Linux machine, in a Terminal window, execute this command:
php /var/www/html/captcha.php

You should see a message saying "Please click on the reCAPTCHA box", as shown below.

If you have errors in your PHP script, you will see error messages here that will guide you in fixing them.

Testing the Form

In a Web browser, go to localhost/YOURNAME-form.html page.

You should see a reCAPTCHA form, as shown below.

Saving the Screen Image

Make sure the reCAPTCHA box is visible, as shown above.

Save a screen capture with a filename of "Proj 9a from YOUR NAME".

Check the box.

A task appears, as shown below. Complete the task.

A green check box appears.

Click the Submit button.

You should see the message "YOURNAME reCAPTCHA Succeeded!", as shown below.

Saving the Screen Image

Make sure the "YOURNAME reCAPTCHA Succeeded!" message is visible, as shown above.

Save a screen capture with a filename of "Proj 9b from YOUR NAME".

Turning In Your Project

Email the images to cnit.129S@gmail.com with a subject of "Project 9 from YOUR NAME".

Sources

Using new Google reCAPTCHA with PHP

Last modified: 2-21-18