Tạo captcha nâng cao có nghe âm thanh bằng PHP

Trong bài trước, mình có hướng dẫn các bạn làm sao để thêm captcha bảo mật cho form trong website một cách đơn giản nhất, sử dụng thư viện simple php captcha. Với thư viện này bạn có thể tùy biến rất dễ dàng như tạo mọi kích thước và fonts hình ảnh captcha, lẫn mầu sắc chữ. Tuy nhiên nhược điểm không hỗ trợ âm thanh kèm theo hình captcha.

Và cũng không có chế độ đổi ảnh khác, nhưng không phải là không hỗ trợ tất cả mọi thứ bạn phải code từ đầu. Nhưng bài hôm nay bạn có thêm một lựa chọn nữa, hỗ trợ đầy đủ hơn có nghe âm thanh và nút nạp lại hình ảnh captcha.

Chèn hình ảnh captcha vào form

Trước tiên bản tải thư viện phpcaptcha về máy tính và upload các files lên web server. Ví dụ dưới đây, mình giả sử Securimage được upload vào folder ‘securimage’.

Tiếp theo, chúng ta chèn hình ảnh captcha vào trong form bên cạnh text field cho người dùng gõ captcha vô.

<input type="text" name="captcha_code" size="10" maxlength="6" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>

Điều chỉnh là thuộc tính maxlength và size phù hợp với hình captcha. Chúng ta tạo link cho phép chuyển đổi hình ảnh nếu như user gặp hình ảnh khó đọc, thì có thêm lựa chọn đổi hình khác.

Sau khi đã thêm captcha vào form ở vị trí thích hợp, bước tiếp theo bạn sẽ tiến hành code PHP để kiểm tra captcha đã gõ đúng chưa và cũng là xác nhận là người hay lệnh hacker gửi dữ liệu từ form.

Mở file PHP sử lý form action. Chú ý: để bắt đầu sử dụng Securimage, file sử lý phải viết bằng PHP và đầu file bạn chèn thêm dòng khai báo SESSION như sau:

<?php session_start(); ?>

Chèn hàm trên trước mọi output HTML, nếu không việc kiểm tra captcha sẽ không bao giờ chính xác.

Chúng ta sử dụng class Securimage bạn include thư viện trước khi gọi hàm kiểm tra.

include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';

$securimage = new Securimage();

Kiểm tra mã captcha của người dùng nhập vào mvới phương thức check.

if ($securimage->check($_POST['captcha_code']) == false) {
  // the code was incorrect
  // you should handle the error so that the form processor doesn't continue

  // or you can use the following code if there is no validation or you do not know how
  echo "The security code entered was incorrect.<br /><br />";
  echo "Please go <a href='javascript:history.go(-1)'>back</a> and try again.";
  exit;
}

Nếu sai ký tự hàm sẽ trả về false, bạn xuất thông báo lỗi kèm link quay trở lại trang chứa form và dừng sử lý lệnh.
Nên nhớ hãy đảm bảo rằng bản chỉ lưu dữ liệu một khi captcha được nhập đúng.

Tùy biến Securimage

Hiển thị đầy đủ captcha gồm hình, nút refresh và play sound. Thay vì tạo img trực tiếp với file securimage_show.php, chúng ta sẽ sử dụng code PHP để tạo nội dung captcha bởi phương thức getCaptchaHtml. Ví dụ:

<?php
      // show captcha HTML using Securimage::getCaptchaHtml()
      require_once 'securimage.php';
      $options = array();
      $options['input_name'] = 'ct_captcha'; // change name of input element for form post

      if (!empty($_SESSION['ctform']['captcha_error'])) {
        // error html to show in captcha output
        $options['error_html'] = $_SESSION['ctform']['captcha_error'];
      }

      echo Securimage::getCaptchaHtml($options);
    ?>

Xem thêm các phương thức khác tại đây:
http://phpcaptcha.org/Securimage_Docs/classes/Securimage.html

Để đổi mầu chữ, hình nền, kích thước thức ký tư captcha ..bạn tham khảo hướng dẫn tùy biến securimage chi tiết tại: https://www.phpcaptcha.org/documentation/customizing-securimage/

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook