Hướng dẫn đăng ký và chèn Google reCAPTCHA vào Form

Cập nhật lần cuối 11/03/2017 by trong HTML&CSS, PHP vào 08/05/2015 có 25918 Views

Hôm nay chúng ta sẽ tìm hiểu về Google reCAPTCHA và cách chèn vào form trong website.

newCaptchaAnchor

Nội dung bao gồm:

  1. Giới thiệu Google reCAPTCHA
  2. Đăng ký sử dụng Google reCAPTCHA
  3. Chèn vào Website

Google reCAPTCHA là gì?

Google reCAPTCHA là 1 dạng captcha mới và tiện dụng để chống spam, chống bot tự động đăng ký điền form và thực hiện trên form. Phiên bản mới của google recaptcha rất thân thiện với người dùng và độ bảo mật cao.

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

Video giới thiệu về Google reCAPTCHA

Hướng dẫn đăng ký Google reCAPTCHA

Bước 1: vào Đăng ký google recaptcha để đăng ký. Ấn vào Get reCAPTCHA để bắt đầu đăng ký

Khi lần đầu tiên vào đăng ký sẽ có màn hình như bên dưới

Bước 2: điền thông tin 

Ô Label để điều tiêu đề của captcha. Trong ví dụ là Demo levantoan.com

Ô Domains để điền những domain mà bạn sẽ đặt reCAPTCHA vào. Trong ví dụ là localhost và levantoan.freevnn.com

Sau đó ấn Register

Khi đăng ký thành công có 2 giá trị mà chúng ta cần quan tâm đó là

  • Site key
  • Secret key

Đến đây đăng ký đã thành công bước tiếp theo sẽ là chèn vào Form của mình.

Hướng dẫn chèn Google reCAPTCHA vào FORM

Chèn đoạn code sau vào trước thẻ </head>

<script src='https://www.google.com/recaptcha/api.js'></script>

Mặc đinh google sẽ tự nhận diện ngôn ngữ để hiển thị. Để cố định ngôn ngữ bạn thêm ?hl= vào như sau

<script src='https://www.google.com/recaptcha/api.js?hl=vi'></script>

Google reCAPTCHA hỗ trợ hơn 40 ngôn ngữ khác nhau. Xem thêm các ngôn ngữ khác tại đây

Tiếp theo chèn đoạn code sau vào trong <form> của bạn. Thay  === Your site key === bằng Site key của bạn


<div class="g-recaptcha" data-sitekey="=== Your site key ==="></div>

Tiếp theo chèn đoạn PHP lên đầu page để xác nhận. Thay  ===You Secret Key=== bằng Secret Key của bạn

<?php
if(isset($_POST['submit'])){
   $name;
   $captcha;
   if(isset($_POST['name'])){
      $name = $_POST['name'];
   }
   if(isset($_POST['g-recaptcha-response'])){
      $captcha = $_POST['g-recaptcha-response'];
   }
   if(!$captcha){
      echo '<h2>Hay xac nhan CAPTCHA</h2>';
   }else{
      $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LedT9wSAAAAAHRdSVndnSjeiDtkx6hKWQ-NuWQw&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
      if($response.success == false){
         echo '<h2>SPAM!</h2>';
      }else{
         echo '<h2>'.$name.' Khong phai robot :)</h2>';
      }
   }
}
?>

File demo hoàn thành

<?php
if(isset($_POST['submit'])){
   $name;
   $captcha;
   if(isset($_POST['name'])){
      $name = $_POST['name'];
   }
   if(isset($_POST['g-recaptcha-response'])){
      $captcha = $_POST['g-recaptcha-response'];
   }
   if(!$captcha){
      echo '<h2>Hay xac nhan CAPTCHA</h2>';
   }else{
      $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6LedT9wSAAAAAHRdSVndnSjeiDtkx6hKWQ-*****&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
      if($response.success == false){
         echo '<h2>SPAM!</h2>';
      }else{
         echo '<h2>'.$name.' Khong phai robot :)</h2>';
      }
   }
}
?>
<html>
   <head>
      <title>Google recapcha demo - LeVanToan</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script src='https://www.google.com/recaptcha/api.js'></script>
   </head>
   <body>
      <h1>Google reCAPTHA Demo</h1>
      <form id="comment_form" action="" method="post">
         <input type="text" placeholder="Tên của bạn" size="40" required name="name"><br><br>
         <input type="submit" name="submit" value="Gửi"><br><br>
         <div class="g-recaptcha" data-sitekey="6LedT9wSAAAAAJnR8DTfGReNvTgliYWy3MZDb7f3"></div>
      </form>
   </body>
</html>

Demo Google reCAPTCHA

Chúc các bạn thành công!

4.2/5 - (20 votes)
Từ khóa:
  • Bình luận
Sản phẩm nổi bật của Toản
x