How To Implement Google reCAPTCHA On Your Web Using PHP

What Will I Learn?

You will learn how to implement reCAPTCHA on your web
You will learn how to make your web more secure
You will learn how to add button functions to your web pages

Requirements

you must understand the basic of PHP programing
you must understand CSS design
You must understand how to add an access link to another web

Difficulty

Intermediate

Tutorial Contents

reCAPTCHA is one way to secure the Form on the pages of your website so that can not be processed by the Bot or also called the robot, in other words, this reCAPTCHA serves to prove that the Form is in the manual content by humans. on this occasion I will share tutorials on how to implement or how to make Google reCAPTCHA on your website with PHP.

the first step you should do is to load a form that serves as a page to register emails from your web visitors.
type the script below in your text editor and save it with the name list.php

<?php
if(isset($_POST['submit'])){
    $email          = $_POST['email'];
    $captcha        = $_POST['g-recaptcha-response'];
    $secretKey      = "6Lf7WCUTAAAAAGJzZ-U_aPv5GiGLEOExXDFpI_PM";
    $ip             = $_SERVER['REMOTE_ADDR'];
    $response       = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
    $responseKeys   = json_decode($response,true);
    if(intval($responseKeys["success"]) !== 1) {
        echo '<h2>Helloo... Spam detected... :(</h2>';
    }else{
        echo '<h2>Oke! you are real human... :)</h2>';
    }
}
?>

okay I'll explain a bit about the parts of the script above.
this is the section for the variable declaration we want to include on our web page

$email          = $_POST['email'];
$captcha        = $_POST['g-recaptcha-response'];

then this is the condition of if </ i> which if one of the conditions is met then a notification will appear.

if(intval($responseKeys["success"]) !== 1) {
echo '<h2>Helloo... Spam detected... :(</h2>';
}else{echo '<h2>Oke! Anda benar-benar Manusia biasa... :)</h2>';

then this section is to create an action to the link that we write in our script.

$response       = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);

oke list form we have successfully created, then we will create an index file, then save it with the name index.php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TUTORIALWEB.NET | reCAPTCHA</title>
    (html comment removed:  Link untuk Bootstrap, jadi harus online ya :) )
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        .g-recaptcha {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>Daftar</h3>
                <hr>
                <form action="daftar.php" method="post" autocomplete="off">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" id="email" placeholder="[email protected]" required>
                    </div>              
                    (html comment removed:  Div di bawah ini untuk menampilkan reCAPTCHA nya. Pada gambar diatas masukkan yang ada di kotak biru )
                    <div class="g-recaptcha" data-sitekey="6Lf7WCUTAAAAANJ2ZMQ1Xvum9wXMo_6tGcl_rYej"></div>             
                    <input type="submit" name="submit" value="Daftar" class="btn btn-primary">
                </form>
            </div>
        </div>
    </div>
    (html comment removed:  Link javascript untuk api reCAPTCHA, pada gambar di atas masukkan pada kotak warna merah )
    <script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>

I will explain a bit about the script above
below is a section that works for the link bootstrap design that we have embedded the link, and make sure you in the online situation.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

and this is the section for to display its reCAPTCHA. In the script below enter the blue box.

<div class="g-recaptcha" data-sitekey="6Lf7WCUTAAAAANJ2ZMQ1Xvum9wXMo_6tGcl_rYej"></div>

then the link below serves to grant access to the reCAPTCHA api.

<script src='https://www.google.com/recaptcha/api.js'></script>

okay then we try to run our web page, is reCAPTCHA already successfully implemented ...?
the way is type the file name index.php that you created earlier in your browser search field as shown below.

if a page like this already appears it means the index page has succeeded

okay, then we enter the email on the form.

okay form for test already appear means we have succeeded in making reCAPTCHA
then press the verification button, it will show notification as below.

registration process is succesfully

Okay the tutorial is over, now it's your turn to try it.

SORRY WHETHER THERE IS LACK AND SENSE

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors