Integrasikan CAPTCHA Centang dengan hCaptcha menggunakan PHP

CAPTCHA adalah proses verifikasi untuk menentukan apakah pengguna adalah manusia atau bukan. Secara umum, CAPTCHA digunakan dalam formulir web untuk mencegah pengiriman spam. Tanpa CAPTCHA, bot dapat mengirimkan informasi spam dengan pengiriman formulir otomatis yang mengisi situs Anda dengan data yang adil. Menambahkan CAPTCHA ke situs web, selalu merupakan ide bagus untuk mencegah spam di formulir web.

Berbagai jenis Captcha dapat digunakan untuk proses verifikasi, seperti pertanyaan, perhitungan angka, kotak centang, dll. Sebelum pengiriman formulir, pengguna harus menyelesaikan CAPTCHA dan membuktikan bahwa mereka bukan robot. Anda dapat dengan mudah mengintegrasikan fungsionalitas CAPTCHA dalam formulir web menggunakan PHP. Jika Anda ingin memberikan cara yang ramah pengguna, centang kotak Captcha adalah pilihan terbaik.

Untuk membuat proses integrasi CAPTCHA sederhana dan aman, Anda dapat menggunakan API pihak ketiga. HCaptcha menyediakan cara cepat dan mudah untuk menambahkan CAPTCHA ke formulir web menggunakan PHP. HCaptcha adalah alternatif terbaik dari Google reCAPTCHA. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mengintegrasikan fungsionalitas CAPTCHA dengan hCaptcha menggunakan PHP.

Buat API hCaptcha

secret key diperlukan untuk menggunakan API hCaptcha. Sebelum menambahkan kotak centang CAPTCHA ke situs Anda, Anda harus mendaftarkan situs Anda dan mendapatkan kunci API.

  • Kunjungi website hCaptcha dan daftarkan akun Anda.
  • Masuk ke akun Anda dan klik tombol + Situs Baru.
    • Nama - Bantuan untuk mengidentifikasi situs terdaftar Anda di masa depan.
    • Nama host - Tentukan domain situs web Anda.
  • Click Save to register your site.
  • Situs yang ditambahkan akan terdaftar di bawah tab Sites. Anda akan melihat Sitekey dengan mengklik tombol Pengaturan.
  • Under the Settings tab, you will see the Secret key.
  • Copy the Site Key and Secret Key for later use in the PHP CAPTCHA integration code.

Add hCaptcha Widget to HTML Form

Pertama, tambahkan JavaScript API hCaptcha.

Tambahkan elemen tag h-captcha dalam bentuk HTML tempat Anda ingin menampilkan widget kotak centang hCaptcha.

  • The h-captcha DIV element has a class named h-captcha and data-sitekey attributes.
  • The Site Key of the hCaptcha API will be specified in the data-sitekey attribute.

<form action="" method="post">
    <div class="input-group">
        <input type="text" name="name" value="" placeholder="Your name" required="" />
    div>
    <div class="input-group">	
        <input type="email" name="email" value="" placeholder="Your email" required="" />
    div>
    <div class="input-group">
        <textarea name="message" placeholder="Type message...">textarea>
    div>
		
    
    <div class="h-captcha" data-sitekey="Your_hCAPTCHA_Site_Key">div>
	
    
    <input type="submit" name="submit" value="SUBMIT">
form>

Verify hCaptcha Response (Server-side Validation)

Setelah pengiriman formulir, data input akan dikirimkan ke skrip sisi server untuk memverifikasi respons pengguna dan memproses permintaan pengiriman formulir.

  • Validate form fields to check whether the user fills the required input fields.
  • Use the h-captcha-response POST parameter to check whether the user selects the CAPTCHA checkbox.
  • Verify the CAPTCHA challenge using hCaptcha and PHP.
    • Initialize PHP cURL request and POST required params to hCaptcha API.
      • secret – Secret Key
      • response – The user’s response received by $_POST['h-captcha-response'].
      • remoteip – The user’s IP address.
  • Parse JSON from hCaptcha response and check for status.
  • If the hCaptcha response is valid and successful,
    • The form is submitted.
    • The status message is shown to the user.
// hCAPTCHA API key configuration 
$secretKey 'Insert_hCaptcha_Secret_Key'; 
 
// If the form is submitted 
$statusMsg ''; 
if(isset($_POST['submit'])){ 
     
    // Validate form fields 
    if(!empty($_POST['name']) && !empty($_POST['email'])){ 
         
        // Validate hCAPTCHA checkbox 
        if(!empty($_POST['h-captcha-response'])){ 
            // Verify API URL 
            $verifyURL 'https://hcaptcha.com/siteverify'; 
             
            // Retrieve token from post data with key 'h-captcha-response' 
            $token $_POST['h-captcha-response']; 
             
            // Build payload with secret key and token 
            $data = array( 
                'secret' => $secretKey, 
                'response' => $token, 
                'remoteip' => $_SERVER['REMOTE_ADDR'] 
            ); 
             
            // Initialize cURL request 
            // Make POST request with data payload to hCaptcha API endpoint 
            $curlConfig = array( 
                CURLOPT_URL => $verifyURL, 
                CURLOPT_POST => true, 
                CURLOPT_RETURNTRANSFER => true, 
                CURLOPT_POSTFIELDS => $data 
            ); 
            $ch curl_init(); 
            curl_setopt_array($ch$curlConfig); 
            $response curl_exec($ch); 
            curl_close($ch); 
             
            // Parse JSON from response. Check for success or error codes 
            $responseData json_decode($response); 
             
            // If reCAPTCHA response is valid 
            if($responseData->success){ 
                // Posted form data 
                $name = !empty($_POST['name'])?$_POST['name']:''; 
                $email = !empty($_POST['email'])?$_POST['email']:''; 
                $message = !empty($_POST['message'])?$_POST['message']:''; 
                 
                // Code to process the form data goes here... 
                 
                 
                $statusMsg 'Your contact request has submitted successfully.'; 
            }else{ 
                $statusMsg 'Robot verification failed, please try again.'; 
            } 
        }else{ 
            $statusMsg 'Please check on the CAPTCHA box.'; 
        } 
    }else{ 
        $statusMsg 'Please fill all the mandatory fields.'; 
    } 
} 
 
echo $statusMsg; 
 
?>