Hướng dẫn tích hợp reCaptcha của google cho web

Việc tính hợp reCaptcha cho form đăng ký, form liên hệ hoặc trên các ứng dụng di động rất quan trọng, giúp web chúng ta tránh:

Bị Spam đăng ký, nếu web của bạn không tích hợp reCaptcha một ngày đẹp trời nào đó, khi mở website thấy hàng tỷ liên hệ từ một IP lạ, hoặc hàng ngàn comment toàn những ký tự lạ....
Tránh bị tấn công ddos từ các form đăng ký...

Ngoài ưu điểm tốt cũng có nhược điểm như khiến người sử dụng (khách hàng) khó chịu khi sử dụng, phải nhìn text, hình ảnh để nhập, tích chọn cho đúng mới được submit gửi. Tuy nhiên, hiện nay người sử dụng đang dần quen với việc này nên nó cũng không phải là vấn đề đáng quan tâm nữa.

Điều kiện để tích hợp mã reCaptcha trong bài viết này:

Có một website do bạn code hoặc sử dụng CMS wordpress, Joomla, ...
Ứng dụng trên di dộng IOS, Android, ...
Bạn đã có một tài khoản gmail.

Bài viết này mình sử dụng mã nguồn CMS Wordpress để thực hành.

Các bước thực hiện đăng ký reCaptcha như sau:

Bước 1: truy cập Đăng ký google recaptcha ấn Get reCaptcha để bắt đầu đăng ký.

Lần đầu tiên vào đăng ký màn hình như bên dưới

Bước 2: Nhập thông tin.

Label: tên của reCaptcha để phân biết với những reCaptcha khác.

Domains: những domain nào được phép sử dụng reCaptcha này.

sau đó nhấp vào submit.

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

Site key: Key này xác định xem bạn sử dụng reCaptcha nào trong danh sách reCaptcha của bạn.
Secret key: Key này là key bảo mật để bạn kết nối với google đảm bảo cho kết nối không bị giả mạo, bạn hãy chắc chắn rằng nó sẽ không bao giờ lộ ra ngoài.

Đến đây là đã thành công tiếp theo là chèn vào Form của mình.

Bạn nhớ copy 2 mã trên vào một file để lưu lại trước khi tắt của sổ này nhé.

Hướng dẫn tích hợp reCaptcha vào website php

Chèn đoạn code sau vào trước thẻ đóng head.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Các bạn có thể vào theo link See client side integration để xem hướng dẫn cấu hình trên theme của bạn.

Có dạng:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Chèn đoạn:

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

vào file theme contact hoặc form của bạn trên website php.

Chú ý: Thay Your_site_key bằng Site key do google cung cấp ở bước đăng ký trên nhé!

Hướng dẫn tích hợp reCaptcha cho web wordpress
Đối với các bạn làm web bằng CMS wordpress hoặc CMS Joomla thì việc tích hợp này vô cùng dễ.

Trên CMS Wordpress bạn chỉ cần vào cài đặt Plugin mới nhập từ khóa reCaptcha vào có rất nhiều các plugin rất tốt sẵn sàng miễn phí cho bạn sử dụng giống như hình dưới.