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.

Setelah sobat melakukan registrasi sobat akan mendapatkan site_key dan secret_keydari API Google reCaptcha tersebut.

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<?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

1

<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.

1

2

3

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?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.

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

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

Bisa Code

Menggunakan Google RECAPTCHA

You May Also Like

No comments:

Recent Posts

Blog Archive

Popular Posts

Categories

Artikel Pilihan

Random Posts

Tags

Recent Posts