Menambahkan reCAPTCHA v2 pada Login Form

Sejak awal penulis belajar website, penulis sangat penasaran dengan penambahan captcha, atau angka/huruf/tahapan random yang berupa gambar, yang perlu diinputkan bersama data-data input lain dalam satu form.

Captcha ini awalnya berupa angka dan huruf, namun kemudian Google mengeluarkan versi mereka sendiri yang dinamakan reCAPTCHA, khususnya versi 2 (v2) yang akan penulis sedikit uraikan di sini.

Secara fungsi, penambahan captcha ini untuk menangkal aksi spamming atau abuse (penipuan).

Keterangan lebih lengkap mengenai reCAPTCHA dapat dibaca di sini.

Dikarenakan masalah keamanan, dan penulis sendiri sampai saat tulisan ini ditulis masih dalam tahap belajar, tidak berani untuk membuat kode sendiri, penulis lebih memilih untuk menambahkan reCAPTCHA menggunakan aplikasi pihak ketiga, seperti plugin Wordpress.

Sampai akhirnya, sebagaimana terlihat pada gambar di atas, penulis bereksperimen dan ternyata menambahkan reCAPTCHA v2 Google sangat mudah.

Perlu diperhatikan, percobaan disini langsung menggunakan hosting yang penulis sewa pertahun dan halaman website ditulis menggunakan PHP.

Sehingga, penulis tidak menggunakan localhost, tetapi langsung bereksperimen secara online.

Langkah pertama, domain website perlu di daftarkan dulu ke https://www.google.com/recaptcha/admin.

Dari alamat tersebut, pemilik website akan mendapatkan dua kode site key dan secret key.

Kedua, menyiapkan dan menambahkan site key ke login form, yang mana kurang lebih kodenya seperti berikut:

<form id="loginForm" name="loginForm" method="post" action="login.php"> 
 <center> 
 <input type="text" name="userid" placeholder="NIK"/><br/> 
 <input type="password" name="passid" placeholder="password"/><br/> 
 <div class="g-recaptcha" data-sitekey="--your site key--"></div> 
 <input type="submit" value="Login"/> 
 </center> 
 </form> 

Ketiga, menambahkan halaman respon yang dalam kasus ini halaman "login.php", dimana secret key perlu digunakan didalamnya.

Bagian untuk merespon hasil captcha dalam halaman "login.php" kurang lebih sebagaimana kode dibawah ini:

if(isset($_POST['g-recaptcha-response'])){ 
  $captcha=$_POST['g-recaptcha-response']; 
 } 
 if(!$captcha){ 
  $error="Please check the the captcha form."; 
 }else{ 
  $secretKey = "--your secret key--";          
        $url = "https://www.google.com/recaptcha/api/siteverify?secret=".urlencode($secretKey)."&response=". urlencode($captcha); 
        $response = file_get_contents($url); 
        $responseKeys = json_decode($response,true); 
        $passed=false; 
        if($responseKeys["success"]) { 
   $passed=true; 
        } else { 
   $error="Spammer detected!"; 
        } 
} 

Sedangkan untuk mengatur lebar dari widget reCAPTCHA, perlu ditambahkan style CSS berikut:

.g-recaptcha { 
    transform:scale(0.9); 
    transform-origin:0 0; 
 margin-bottom: 10px; 
}

Penulis hanya dapat memberikan kode dalam bentuk cuplikan saja, karena kode keseluruhan terkait dengan project yang sedang penulis kerjakan dan dirahasiakan.

Pertanyaan, saran, komentar kepada penulis dapat ditulis pada kolom komentar, atau dapat dilayangkan langsung ke penulis di uboiz@yahoo.com.

Referensi:

• Shahid. 2014. Google reCAPTCHA V2 tutorial with Example Demo in PHP. https://codeforgeek.com/google-recaptcha-tutorial/. Diakses tanggal 6 Desember 2019.
• Stacoverflow. 2014. Change New Google Recaptcha (v2) Width. https://stackoverflow.com/questions/27691411/change-new-google-recaptcha-v2-width/49175135. Diakses tanggal 6 Desember 2019.