Memasang Google Captcha pada Ajax

Setelah beberapa hari lalu kita telah mempelajari bagaimana memasang Google reCaptcha pada menu form login, kali ini kita akan membuat bagaimana jika form login tersebut menggunakan ajax? Pada dasarnya sama saja. Namun sedikit menggunakan trik pada pemasangannya. Langsung saja kita coba membuatnya.

Saya anggap Anda sudah mendapatkan Secret Key dan Secret Site untuk web yang Anda pasang. Apabila Anda masih belum mengerti cara mendapatkannya, bisa Anda kunjungi di PHP Google Captcha bagaimana cara mendapatkannya. Ok Kita lanjutkan kembali.

Seperti biasa kita membuat file index.php dan kemudian tuliskan coding seperti di bawah ini.

 
<script src="https://www.google.com/recaptcha/api.js"></script>
    <form class='proses' method="POST" autocomplete="off">
      <div class="form-group">
        <label for="username" class="sr-only">Username</label>
        <input type="text" name="username" id="username" class="form-control" placeholder="Username">
      </div>
      <div class="form-group mb-4">
        <label for="password" class="sr-only">Password</label>
        <input type="password" name="password" id="password" class="form-control" placeholder="***********">
      </div>
      <div class="g-recaptcha" data-sitekey="code_site_key" ></div>
      <button type="submit" class="btn btn-block login-btn mb-4">Login</button>
    </form>

Yang paling penting pada coding di atas adalah site key yang sudah Anda dapatkan anda tuliskan dan jangan lupa juga baris untuk memanggil recaptcha API google.

Kemudian pada bagian bawah file index.php kita tuliskan codingan ajax seperti di bawah ini.

 <script type="text/javascript">
  $('.proses').on('submit', function(event){
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
      url: "proses.php",
      method:"POST",
      data: {username : username,password:password,gresponse: grecaptcha.getResponse()},
      dataType: "json",
      success:function(data){
      	if(data.status=='success'){
      		alert("sukses");
      	}else{
      		alert("gagal");
      	}
      },error:function(){
        alert("gagal memanggil file proses")
      }
    });
  });        
</script>

Pada codingan di atas, yang perlu dilihat adalah nama parameter yang dilempar, terutama parameter gresponse. Untuk penmaan bebas, namun pad file proses.php jangan sampai salah panggil nama parameter google tersebut.

Setelah itu, kita buat file proses.php sebagai lemparan dari ajax pada file index.php. Berikut codingnya.

 
if(isset($_POST['gresponse']) && !empty($_POST['gresponse'])):
    //secret key Anda
    $secret = 'secret key anda';

    //response data
    $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['gresponse']);
    
    $responseData = json_decode($verifyResponse);
    if($responseData->success):
    	$result['status'] = "success";
    else:
    	$result['status'] = "failed";
    endif;
else:
    	$result['status'] = "failed";
endif;
echo json_encode($result);

Untuk codingan di atas, sekali lagi yang perlu diperhatikan adalah file secret key yang sudah Anda dapatkan. Jangan sampai salah penulisan.

Nah, cukup mudah bukan? Sekarang giliran Anda mencobanya. Selamat mencoba 🙂