Membuat Google Recaptcha Dengan PHP

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang cara Membuat Google Recaptcha Dengan PHP. Sebelumnya teman teman boleh klik link https://www.google.com/recaptcha/admin ini untuk mendapatkan Google reCaptcha API Key . Jika sudah maka tahap selanjutnya teman-teman buat struktur html yang berisikan form input. Dan teman-teman jangan lupa untuk mencantumkan https://www.google.com/recaptcha/api.js didalam tag head html seperti berikut ini.

<?php
if(empty($_POST['g-recaptcha-response'])){
  $captcha_error = 'Captcha is required';
 }else{
  $secret_key = '6Ldv2bcUAAAAAFXUKdLW_qljFd9FpxNguf06DHhp';
  $response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response']);
  $response_data = json_decode($response);
  if(!$response_data->success){
   $captcha_error = 'Captcha verification failed';
  }
 }
?>
<html>  
    <head>  
        <title>Membuat Google Recaptcha Dengan PHP</title>  
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    </head>  
    <body>  
    <div class="container" style="width: 600px">
   <h3 align="center">Membuat Google Recaptcha Dengan PHP</a></h3>
   <div class="panel panel-default">
      <div class="panel-heading">Register Form</div>
    <div class="panel-body">
     <form metod="post" id="captcha_form">
      <div class="form-group">
       <label>Email Address <span class="text-danger">*</span></label>
       <input type="text" name="email" id="email" class="form-control" />
       <span id="email_error" class="text-danger"></span>
      </div>
      <div class="form-group">
       <label>Password <span class="text-danger">*</span></label>
       <input type="password" name="password" id="password" class="form-control" />
       <span id="password_error" class="text-danger"></span>
      </div>
      <div class="form-group">
       <div class="g-recaptcha" data-sitekey="6Ldv2bcUAAAAAFeYuQAQWH7I_BVv2_2_vvmn2Fpp"></div>
       <span id="captcha_error" class="text-danger"></span>
      </div>
      <div class="form-group">
       <input type="submit" name="register" id="register" class="btn btn-info" value="Register" />
      </div>
     </form>
     
    </div>
   </div>
  </div>
    </body>  
</html>

<script>
$(document).ready(function(){

 $('#captcha_form').on('submit', function(event){
  event.preventDefault();
  $.ajax({
   url:"process_data.php",
   method:"POST",
   data:$(this).serialize(),
   dataType:"json",
   beforeSend:function(){
    $('#register').attr('disabled','disabled');
   },
   success:function(data){
    $('#register').attr('disabled', false);
    if(data.success){
     $('#captcha_form')[0].reset();
     $('#email_error').text('');
     $('#password_error').text('');
     $('#captcha_error').text('');
     grecaptcha.reset();
     alert('Form Successfully validated');
    }else{
     $('#email_error').text(data.email_error);
     $('#password_error').text(data.password_error);
     $('#captcha_error').text(data.captcha_error);
    }
   }
  })
 });

});
</script>

Lalu langkah selanjutnya teman-teman buat file baru dengan nama process_data.php untuk mengecek data ketika disubmit.

<?php
if(isset($_POST["email"])){
 $email = '';
 $password = '';

 $email_error = '';
 $password_error = '';
 $captcha_error = '';

 if(empty($_POST["email"])){
  $email_error = 'Email is required';
 }else{
  if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)){
   $email_error = 'Invalid Email';}
  else{
   $email = $_POST["email"];
  }
 }

 if(empty($_POST["password"])){
  $password_error = 'Password is required';
 }else{
  $password = $_POST["password"];
 }

 if(empty($_POST['g-recaptcha-response'])){
  $captcha_error = 'Captcha is required';
 }else{
  $secret_key = '6Ldv2bcUAAAAAFXUKdLW_qljFd9FpxNguf06DHhp';
  $response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response']);
  $response_data = json_decode($response);
  if(!$response_data->success){
   $captcha_error = 'Captcha verification failed';
  }
 }

 if($email_error == '' && $password_error == '' && $captcha_error == ''){
  $data = array(
   'success'  => true
  );
 }else{
  $data = array(
   'email_error'  => $email_error,
   'password_error' => $password_error,
   'captcha_error'  => $captcha_error
  );
 }
 echo json_encode($data);
}

?>

Maka jika ditampilkan dihalaman browser akan tampil seperti pada gambar di bawah ini.

Membuat Google Recaptcha Dengan PHP

Demikian artikel tentang Membuat Google Recaptcha Dengan PHP. Semoga dapat bermanfaat dan selamat mencoba.

20 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat