Beranda
»
Artikel
»
Implementasi Google reCaptcha Pada Halaman Website

Implementasi Google reCaptcha Pada Halaman Website

Google reCaptcha sebagai layanan keamanan yang dikeluarkan google merupakan pilihan yang saat ini banyak dipilih berbagai kalangan untuk mengamankan website mereka. Google reCaptcha berfungsi untuk membedakan mana pengguna sistem yang berasal dari script bot (robot) dan mana yang berasal dari manusia. Layanan ini dapat menghentikan script bot yang sedang mengakses halaman web ataupun pengguna biasa yang sengaja mengirimkan pesan spam kepada suatu halaman website.

Google reCaptcha selain memberikan layanan keamanan juga memberikan laporan analitik kepada pemilik website atau blog. Sehingga dapat diketahui tingkat keamanan saat website tersebut dihujani oleh serangan bot atau spam dari pihak-pihak yang tidak bertanggung jawab.

Implementasi Google reCaptcha Pada Website

Artikel kali ini merupakan artikel lanjutan dari Membuat Google reCaptcha. Google reCaptcha dapat diterapkan pada domain atau website secara langsung. Namun jika anda membutuhkan untuk pengujian pada server lokal (localhost), Google reCaptcha juga dapat berjalan dengan baik. Jika sudah diterapkan pada halaman web yang sudah disisipi kode yang berasal dari Google reCaptcha, nantinya akan muncul checkbox I'm not a robot pada halaman web tersebut sebagai antisipasi script bot atau spam dari pihak yang tidak bertanggung jawab.

Selanjutnya anda harus mendapatkan site key dan secret key yang dapat anda peroleh pada https://www.google.com/recaptcha/. Kedua key tersebut merupakan rangkaian kode acak unik sebagai sarana untuk membuat google reCaptcha yang masing-masing mempunyai peran yang berbeda. Site key digunakan pada halaman client (client side) sedangkan secret key digunakan pada sisi server (server side). Untuk mempercepat penjelasan, saya mengganggap bahwa anda sudah mempunyai site key dan secret key yang sudah siap digunakan untuk menerapkannya pada halaman website.

Berikut ini contoh site key dan secret key yang digunakan sebagai contoh tutorial kali ini :

Menerapkan Site Key Pada Sisi Client

Captcha secara umum diterapkan pada bagian halaman yang memiliki input data dan pengguna akan menekan tombol submit untuk mengirimkan data tersebut menuju server. Halaman tersebut seperti halaman login ataupun halaman yang berisi formulir seperti pendaftaran member, ataupun formulir komentar. Captcha juga dapat diterapkan saat anda mengetahui terdapat pengguna melakukan aktifitas yang sangat mencurigakan. Dan anda harus memblok akses website baginya dan menawarkan captcha I'm not a robot yang harus dichecklist sebagai bukti bahwa pengguna bukan berasal dari script bot.

Pada tutorial kali ini saya menggunakan bentuk formulir dalam file php, yang nantinya akan mengirimkan data nama dan alamat menuju server. Pada file index.php ini masih dalam bentuk normal belum disisipi script dan juga elemen HTML dari google reCaptcha.

Berikut isi file dari index.php :

PHP

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Implementasi Google reCaptcha</title>
6.     <link href="style.css" rel="stylesheet">
7.  </head>
8.  <body>
9.     <h1>Implementasi Google reCaptcha Pada Website</h1>
10.    <form method="post" action="lat_dua.php">
11.    <fieldset>
12.    <label for="nama">Nama : </label>
13.    <input type="text" name="nama" id="nama" placeholder="Nama Anda"><br>
14.    <label for="alamat">Alamat : </label>
15.    <input type="text" name="alamat" id="alamat" placeholder="Alamat"><br>
16.    <input type="submit" name="submit" id="btn_kirim" value="Kirim">
17.    </fieldset>
18.    </form>
19. </body>
20. </html>
21.

Untuk penataan elemen HTML (style.css) menggunakan :

CSS

1.  body,*{font-family: 'Roboto', sans-serif;}
2.     body {background:#fdffbc;}
3.     fieldset label {
4.       display: block;
5.       margin: 5px 0px;
6.     }
7.     fieldset input#nama,
8.     fieldset input#alamat{
9.       width: 220px;
10.      height: 33px;
11.      border: 1px solid #ddd;
12.      margin: 5px 0px;
13.      padding: 0px 5px;
14. 
15.    }
16.    #btn_kirim {
17.      margin-top:10px;
18.      background-color: #11698e;
19.      color: white;
20.      border-radius:3px;
21.      opacity: 0.8;
22.      padding: 10px 40px;
23.      border: none;
24.      outline: none;
25.      cursor: pointer;
26.    }
27.      #btn_kirim:hover{
28.      opacity: 1;
29.    }

Jika dijalankan akan menghasilkan tampilan :

Implementasi google reCaptcha pada sisi client dilakukan dengan menyertakan script (javascript) yang berasal API google reCaptcha. Kemudian langkah selanjutnya adalah menyisipkan elemen HTML berupa div dengan class "g-recaptcha" dan data-sitekey pada formulir halaman website.

Berikut file index.php yang sudah disisipi script dan juga elemen HTML dari google reCaptcha (perhatikan pada baris ke-7 dan ke-17) :

PHP

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Implementasi Google reCaptcha</title>
6.     <link href="style.css" rel="stylesheet">
7.     <script src="https://www.google.com/recaptcha/api.js"></script>
8.  </head>
9.  <body>
10.    <h1>Implementasi Google reCaptcha Pada Website</h1>
11.    <form method="post" action="lat_dua.php">
12.    <fieldset>
13.    <label for="nama">Nama : </label>
14.    <input type="text" name="nama" id="nama" placeholder="Nama Anda"><br>
15.    <label for="alamat">Alamat : </label>
16.    <input type="text" name="alamat" id="alamat" placeholder="Alamat"><br>
17.    <div class="g-recaptcha" data-sitekey="6LcETFQaAAAAALh8CHj6dR"></div>
18.    <input type="submit" name="submit" id="btn_kirim" value="Kirim">
19.    </fieldset>
20.    </form>
21. </body>
22. </html>

Jika dijalankan menghasilkan tampilan (perhatikan tampilan checkbox I'm not a robot yang sudah berhasil dimunculkan) :

Menerapkan Secret Key Pada Sisi Server

Tampilan checkbox I'm not a robot yang sudah berhasil dimunculkan pada halaman index.php. Hal selanjutnya yang harus dilakukan adalah mendapatkan response dari google reCaptcha. Metodenya adalah mengirimkan secret key lengkap dengan input data yang berasal dari elemen HTML class g-recaptcha tempat google reCaptcha berada menuju URL verifier.

Berikut file pemroses data (lat_dua.php) dari halaman index.php :

PHP

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Implementasi Google reCaptcha</title>
6.     <style>
7.       body,*{font-family: 'Roboto', sans-serif;}
8.       body {background:#fdffbc;}
9.     </style>
10. </head>
11. <body>
12. 
13. <?php
14. $public_key = "6LcETFQaAAAAALh8CHj6dR"; /* or your site key */
15. $private_key = "6LcETFQaAAAAAGIT8EXnU"; /* or your secret key */
16. $url_verify = "https://www.google.com/recaptcha/api/siteverify";
17. 
18. $response_key = $_POST["g-recaptcha-response"];
19. $response = file_get_contents($url_verify."?secret=".$private_key."&response=".$response_key);
20. $response = json_decode($response);
21. $nama = $_POST["nama"];
22. $alamat = $_POST["alamat"];
23. if($response -> success == 1){
24.    echo "<p>Data anda valid</p>";
25.    echo "<p>Nama : $nama</p>";
26.    echo "<p>Alamat : $alamat</p>";
27. }else{
28.    echo "Anda robot, dan kami tidak suka dengan robot";
29. }
30. ?>
31. </body>
32. </html>

Penjelasan :
Perhatikan baris ke-19, response didapatkan dari file_get_contents pada URL verifier dengan mengirimkan data berupa private_key (secret key) dan juga hasil dari g-recaptcha-response (response_key) dari halaman index.php. Hasil dari variable response masih berupa json murni sehingga harus dilakukan decoding (json_decode).

Jika hasil response adalah success => 1 merupakan indikasi pengguna adalah manusia. Sedangkan jika hasilnya adalah success => error code mengindikasikan bahwa pengguna berasal dari bot otomatis (spam).

Saat pengguna mengakses halaman index.php dan mengetikkan input data :

Jika pengguna melakukan checklist pada I'm not a robot akan menghasilkan :

Jika pengguna tidak melakukan checklist pada I'm not a robot akan menghasilkan :

Demikian artikel pembahasan implementasi google reCaptcha pada halaman website, semoga artikel ini bermanfaat.

04 Mar 2021 0 920

Kategori : html - css - php - tech - support - security

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Membuat Custom Google Translate Dengan Bahasa Tertentu Pada Website artikel
	Membuat Google Translate Button Pada Website artikel
	Cara Mudah Membuat Google reCaptcha V3 artikel
	Membuat Google reCaptcha artikel
	Membuat Captcha Dengan Validasi Via Ajax Pada PHP artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Daftar Kode ASCII 14.222
	Mendownload File Dengan Menggunakan PHP 10.816
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 9.170
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 8.495
	Cara Mudah Membuat QR Code Generator Dengan PHP 5.620
	Membuat Barcode Generator Dengan PHP 5.329
	Daftar Karakter Unicode 4.764
	Merubah Warna Latar Text Editor Notepad++ 4.628
	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 4.559
	Membuat Inventory Dilengkapi Barcode Generator Dengan PHP dan Mysql 4.098

Visitor Name
Email