Cara Menggunakan Google reCAPTCHA

Halo sobat….

Dalam postingan artikel kali ini, kita akan membahas cara menggunakan Google reCaptcha.

Captcha sendiri ada banyak jenisnya, tapi sebenarnya fungsinya  hampir sama yaitu untuk memvalidasi dan membedakan apakah pengguna tersebut manusia atau sebuah robot/bot sehingga dapat menghindari terjadinya spamming.

Nah, untuk kali ini kita akan membahas produk captcha milik google yaitu Google reCaptcha.

Versi-versi sebelumnya reCaptca memiliki teknik validasi dengan cara mengetikkan kembali teks acak yang muncul dan untuk versi terbaru saat ini lebih simple, untuk memvalidasi apakah user tersebut adalah manusia atau bot maka tinggal mnengklik/mencentang tulisan “Saya Bukan Robot” atau “I’m not a robot” maka validasi akan dilakukan.





Oke, langsung saja.

Step 1 : Sobat harus mendaftarkan website yang sobat miliki untuk mendapatkan API Key Google reCaptcha, silahkan melakukan pendaftaran lewat link ini https://www.google.com/recaptcha/admin.

Untuk label terserah sobat mau mengisinya apa, dan untuk domain saya cukup mengisi localhost karena untuk percobaan ini saya menggunakan localhost tapi jika sobat ingin menggunakannya di website yang sobat miliki silahkan sobat mengisi nama domain dengan domain milik sobat.

menggunakangooglerecaptcha1Setelah sobat melakukan registrasi sobat akan mendapatkan site_key dan secret_key dari API Google reCaptcha tersebut.

menggunakangooglerecaptcha6

 

Step 2 : Silahkan sobat buat 2 buah file dan beri nama googlerecaptcha.php dan proses.php

buka file googlerecaptcha.php dan pastekan script dibawah ini.

<?php 
    
    include "proses.php";

?>


<!doctype html>
<html>
<head>
<title>Cara Menggunakan Google reCaptcha</title>
    <!-- Bootstrap CSS Core --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="container" style="margin-top: 50px;">
    <div class="col-xs-6 col-xs-offset-3">
        <div class="panel panel-default">
        <div class="panel-body">


            <?php if (isset($success)) {
                if ($success==true) { ?>
                <div class="alert alert-success"><?php echo "Terima Kasih, komentar anda akan muncul setelah mendapatkan persetujuan dari Admin"; ?></div>
            <? } else { ?>
            <div class="alert alert-danger"><?php echo "Gagal!, Mohon lengkapi form dan Captcha yang tersedia"; ?></div>
            <?php } } ?>


            <form action="?" method="post" name="form-komentar" >
                <div class="form-group">
                    <textarea name="komentar" placeholder="Tambahkan komentar anda" class="form-control" rows="5" required></textarea>
                </div>
                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
                </div>
                <div class="form-group">
                    <input type="submit" name="submit" value="Kirim Komentar" class="btn btn-danger">
                </div>
            </form>
        </div>
        </div>
    </div>
    </div>

    <!-- Memuat API Google reCaptcha -->
    <script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>

Yang harus diperhatikan adalah, jangan lupa untuk menambahkan/memanggil librari javascript Google reCaptcha

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

Dan jangan lupa juga menambahkan tag div g-recaptcha di dalam form, gunanya untuk menampilkan widget Google reCaptcha.

<div class="form-group">
      <div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
</div>

Untuk $site_key sobat bisa langsung mengisinya dengan site_key yang telah sobat dapatkan tadi, tapi untuk kali ini saya menaruh site_key di dalam file proses.php.

 

Step 3: Sobat buka juga file proses.php kemudian pastekan script dibawah ini, nah disini yang nantinya akan melakukan proses validasi form komentar.

Jangan lupa $site_key dan $secret_key silahkan diisi sesuai dengan yang sobat miliki

<?php
    $site_key = 'xxxxxxxxxxx'; // Diisi dengan site_key API Google reCapthca yang sobat miliki
    $secret_key = 'xxxxxxxxxxx'; // Diisi dengan secret_key API Google reCapthca yang sobat miliki

    if (isset($_POST['submit']))
    {
        if(isset($_POST['g-recaptcha-response']))
        {
            $api_url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response='.$_POST['g-recaptcha-response'];
            $response = @file_get_contents($api_url);
            $data = json_decode($response, true);

            if($data['success'])
            {
                $comment = $_POST['komentar'];
                // proses penyimpananan dan lain-lain disini
                $success = true;
            }
            else
            {
                $success = false;
            }
        }
        else
        {
            $success = false;
        }
    }
?>

 

Setelah sobat melakukan semua step-step diatas, silahkan sobat menjalankan atau memanggil googlerecaptcha.php di browser sobat.

Jika sobat hanya mengisi form tanpa melakukan centang recaptcha kemudian mengklik tombol maka akan muncul peringatan.

menggunakangooglerecaptcha2

 

 

Tapi ketika sobat melengkapi form dan melakukan centang di recaptcha maka akan muncul konfirmasi sukses.

menggunakangooglerecaptcha7

 

Demikian untuk tutorial kali ini, semoga bisa berguna buat sobat.

Jika sobat memiliki kritik, saran maupun masukkan silahkan sobat sampaikan kepada kami lewat kolom komentar dibawah atau bisa langsung menghubungi kami lewat halaman kontak.





Add a Comment

Your email address will not be published. Required fields are marked *