Some text some message..
Some text some message..
Some text some message..
Some text some message..

Implementasi Google reCaptcha Pada Halaman Website

previous Previous Page

Google reCaptcha sebagai layanan keamanan yang dikeluarkan google merupakan pilihan yang saat 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 :

site key and secret key recaptcha

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

Penataan elemen HTML (style.css) menggunakan :

CSS

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
body {background:#fdffbc;}
fieldset label {
   display: block;
   margin: 5px 0px;
}
fieldset input#nama,fieldset input#alamat{
   width: 220px;
   height: 33px;
   border: 1px solid #ddd;
   margin: 5px 0px;
   padding: 0px 5px;
}
#btn_kirim {
   margin-top:10px;
   background-color: #11698e;
   color: white;
   border-radius:3px;
   opacity: 0.8;
   padding: 10px 40px;
   border: none;
   outline: none;
   cursor: pointer;
}
#btn_kirim:hover{
   opacity: 1;
}

Jika dijalankan akan menghasilkan tampilan :

google recaptcha client side

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 (baris 6 dan baris 16) :

PHP

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

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

google recaptcha client side

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
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
<!DOCTYPE html>
<html>
<head>
   <title>Implementasi Google reCaptcha</title>
   <style>
    body {background:#fdffbc;}
   </style>
</head>
<body>
<?php
$public_key = "6LcETFQaAAAAALh8CHj6dR"; /* or your site key */
$private_key = "6LcETFQaAAAAAGIT8EXnU"; /* or your secret key */
$url_verify = "https://www.google.com/recaptcha/api/siteverify";
$response_key = $_POST["g-recaptcha-response"];
$response = file_get_contents($url_verify."?secret=".$private_key."&response=".$response_key);
$response = json_decode($response);
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
if($response -> success == 1){
   echo "<p>Data anda valid</p>";
   echo "<p>Nama : $nama</p>";
   echo "<p>Alamat : $alamat</p>";
}else{
   echo "Anda robot, dan kami tidak suka dengan robot";
}
?>
</body>
</html>

Penjelasan :
Pada baris ke-15, 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 :

google recaptcha server side

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

google recaptcha response

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

google recaptcha response

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

google recaptcha response

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

   0   1.844

Kategori : tag iconhtml - tag iconcss - tag iconphp - tag icontech - tag iconsupport - tag iconsecurity

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

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

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


Visitor Live Chat

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

 admin (10 Mei 2022 at 09:44 pm)

Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.

 Abror (11 Jun 2022 at 09:08 am)

Said : Hallo min mau tanya kenapa script yang di konten teknik grabbing tidak bisa dibuka di laptop saya?

 admin (12 Jun 2022 at 12:11 am)

Said : #Abror stuck-nya dibagian mana bang? kalau localhost bisa aktifkan curl pada file php.ini dengan cara menghilangkan semicolon pada ;extension=php_curl.dll. Jika hosting online, dapat langsung dijalankan. cUrl dapat mengambil konten dan menampilkannya secara langsung pada halaman web.

 admin (12 Jun 2022 at 10:29 am)

Said : #Abror Silahkan akses artikel Menyalin konten suatu website teknik grabbing dengan native PHP, jika mengalami kesulitan dengan aktivasi cURL.. Terima kasih.

 SYAHRUL (23 Jun 2022 at 09:40 pm)

Said : oknull

 bang (26 Jun 2022 at 07:55 pm)

Said : bang caranya biar upload file dengan ekstensi tertentu di php gimana bang?

 admin (02 Jul 2022 at 11:34 am)

Said : #bang ??# Silahkan akses halaman Membatasi Upload File Dengan Format Tertentu Melalui Atribut HTML, Javascript Dan PHP. Pembatasan dapat dilakukan via HTML dengan menambahkan atribut accept, via javascipt dan juga via PHP script di sisi server.. have a nice day 😍😍 🤩..

 modas (04 Jul 2022 at 03:47 pm)

Said : halo

 Geoww (15 Agt 2022 at 11:45 pm)

Said : Tolong buat tutorial auto insert mysql, saat discaner kak, dan ditampilkan total yg m***k ke databasenya.

 Dita Sihombing (13 Sept 2022 at 02:12 pm)

Said : Dalam implementasi Digital Signature pada sistem untuk dapat signing and verify gimana caranya kak, tolong buat tutorial nya dong kak

 Xssddddd (20 Okt 2022 at 04:20 pm)

Said : <script>alert(123)</script>

 Xssddddd (20 Okt 2022 at 04:21 pm)

Said : <ScRiPt>aler("aa")</ScRiPt>

 aaaa (09 Nov 2022 at 12:07 am)

Said : <script>alert(\'wow\')</script>

 Opik (22 Nov 2022 at 04:50 pm)

Said : Maksih bang kontennya, sangat membantu

 "dude" (06 Des 2022 at 02:51 pm)

Said : asdasd

 Vendetta (14 Des 2022 at 03:56 pm)

Said : artikel yang cukup membantu. tks

 kontolodon (28 Des 2022 at 11:03 am)

Said : sangat membantu, trims

 admin (01 Jan 2023 at 08:24 am)

Said : #***odon Oke. Terimakasih m***kannya. Semoga blog ini dapat berkembang kedepannya walaupun di tengah keterbatasan sumber daya dan waktu.

 Yato (24 Jan 2023 at 08:12 am)

Said : Min, request tutorial buat template wordpress dong!

 diky (02 Feb 2023 at 09:20 pm)

Said : mau tanya cara cegah teknik grabbing itu bagaimana?

 Adhi (04 Feb 2023 at 04:30 pm)

Said : Bang,bisa dibantu bikin tutorial aplikasi stok opname?
1) inputan : kode, nama, posisi/nama rak, satuan,qty
2) stok opname : cuma ditampilkan 1 field buat scan barcode, setelah barcode barang di scan, data inputan tampil dan ada 1 field input fisik.

 Charles (16 Feb 2023 at 02:40 am)

Said : Thank you so much

 chad (16 Feb 2023 at 03:30 pm)

Said : can you help me

 dssd (12 Mar 2023 at 06:07 am)

Said : fceafew

 Haiii (12 Mar 2023 at 01:55 pm)

Said : Halo

 anonym (12 Mar 2023 at 07:13 pm)

Said : artikelnya membantu banget bang, worth it buat yang penegn belajar coding buat pemula. thanks bang

 Ila Boone (16 Mar 2023 at 07:54 am)

Said : Ea corrupti sed nostrud ducimus debitis earum lorem tempora est perferendis sed harum commodo ut ut velit voluptate quia aspernatur

 Kato Crane (16 Mar 2023 at 07:54 am)

Said : Minima earum quaerat expedita voluptatem Quisquam iste sunt sunt velit veritatis nihil duis Nam rerum dolor voluptates fugit

 Kato Crane (16 Mar 2023 at 07:55 am)

Said : Quibusdam molestias voluptatem facere voluptatibus voluptas provident modi molestiae quisquam excepturi deserunt voluptatem fugit

 Uda richard (01 Apr 2023 at 11:00 am)

Said : Bg kalo mau nambahin fitur ppob pake javascript kira2 bisa ga ya?

Visitor Name
Email

 I'm not a robot