7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Form Design

Cách tích hợp "No CAPTCHA reCAPTCHA" vào Trang web của bạn

Scroll to top
Read Time: 8 mins

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

<

Các input CAPTCHA có lẽ là phổ biến nhất trong số tất cả các trải nghiệm phiền phức trên web. Chúng làm tốn công đối với đa số người dùng, hãy để một mình người khiếm thị hay bất cứ ai dựa trên công nghệ hỗ trợ như trình đọc màn hình để truy cập web. Tuy vậy, thật đáng buồn, CAPTCHA tuyệt đối quan trọng trong cuộc chiến chống thư rác.

A necessary evil thanks spammersA necessary evil thanks spammersA necessary evil thanks spammers
Một tội ác cần thiết (cám ơn những người gửi thư rác)

Trớ trêu thay, mặc dù các CAPCHA "văn bản méo" thường thấy gây khó khăn cho việc đọc của người dùng, nhưng công nghệ trí tuệ nhân tạo hiện đại lại không mấy khó khăn để giải quyết chúng. Google thậm chí còn sử dụng công nghệ tương tự để đọc số nhà, tín hiệu đường để xác nhận các địa điểm Google Street View!

Những chú robot của Google có thể đọc chính xác những điều này

Đó chỉ là suy luận do đó mà các nhà phát triển của Google đã đưa ra các giải pháp CAPTCHA tốt nhất cho đến lúc này, vào cuối năm 2014. No CAPTCHA reCAPTCHA không đòi hỏi gì hơn ngoài một hành động chạm ngón tay, một cú nhấp chuột, hoặc tập trung input với bàn phím của bạn và nhấn phím cách.

Trường hợp nào cũng đều đơn giản cả, nhưng nếu phân tích rủi ro của Google vẫn chưa thể đảm bảo rằng bạn là con người, một dấu nhắc thứ hai sẽ xuất hiện.

Bạn có thể nhìn thấy ví dụ thực tế của nó trên web, ví dụ như trên trang submit của @materialup.

Lấy No CAPTCHA reCAPTCHA

Chúng ta hãy đi thẳng vào vấn đề và bắt đầu với No CAPTCHA.

Bước 1

Đầu tiên, chúng ta cần một khóa API, vì vậy hãy truy cập vào https://www.google.com/recaptcha/admin. Để truy cập vào trang này, bạn sẽ cần phải đăng nhập vào một tài khoản Google. Bạn sẽ được yêu cầu đăng ký trang web của bạn, do đó hãy cung cấp cho nó một cái tên thích hợp, sau đó liệt kê tên miền (ví dụ tutsplus.com) nơi mà reCAPTCHA cụ thể này sẽ được sử dụng. Những tên miền phụ (như webdesign.tutsplus.com và code.tutsplus.com) được tự động tính toán.

Bước 2

Khi thực hiện điều đó xong, bạn sẽ được cấp một khóa trang web (Site key) và khoá bí mật (Secret key) của nó:

Bước 3

Bên dưới các khoá bạn sẽ thấy một số đoạn để bao gồm reCAPTCHA trên trang web của bạn. Đầu tiên đó là JavaScript:

Bạn cũng có thể định nghĩa một trong 40 ngôn ngữ được hỗ trợ mà bạn đang sử dụng bằng cách thêm một tham số vào chuỗi. Ở đây chúng ta đang thêm es, nó sẽ cung cấp cho chúng ta một reCAPTCHA ngôn ngữ Tây Ban Nha:

Đặt thẻ script này vào cuối trang (hoặc ngay bên dưới form nơi reCAPTCHA sẽ xuất hiện, tùy thuộc vào cách bạn ưu tiên tải nội dung của bạn).

Bước 4

Tiếp theo là phần mẫu cái mà bạn sẽ cần phải thêm vào markup của form bất cứ nơi nào bạn muốn reCAPTCHA xuất hiện:

Lưu ý: thuộc tính data-sitekey sẽ giữ giá trị của khoá của bạn, không phải ví dụ mẫu này.

Có các thuộc tính khác mà bạn có thể thêm vào để tùy biến giao diện và chức năng của reCAPTCHA tại thời điểm này. Ví dụ: thêm data-theme="dark" vào div này sẽ cung cấp cho bạn một phiên bản tối, có thể phù hợp hơn với giao diện người dùng của bạn:

Để biết thêm thông tin chi tiết về cấu hình reCAPTCHA của bạn hãy tìm hiểu tại developers.google.com.

Kết hợp lại với nhau

Bây giờ chúng ta đã có các thành phần ban đầu, đến lúc để đưa chúng vào môi trường làm việc.

Bước 1

Chúng ta hãy đặt thẻ script và phần mẫu của chúng ta vào một form đơn giản:

Ở đây, chúng ta đã sử dụng một cấu trúc trang với một form có chứa một input name, một input email và một nút submit. Không có phong cách gì ở đây cả, vì nó không thực sự cần thiết cho hướng dẫn này.

our captcha formour captcha formour captcha form
Bạn sẽ có một cái gì đó giống như thế này

Để minh hoạ thử nghiệm reCAPTCHA đó đã vượt qua, chúng ta sẽ cần chạy một số kiểm tra bên phía máy chủ. Trong trường hợp này, chúng ta sẽ làm điều đó với PHP, do đó, hãy lưu tập tin này trong một dự án mới thành index.php.

Bước 2

Bạn sẽ thấy rằng phương thức của form là post, vì vậy khi chúng ta submit dữ liệu form sẽ được trả về cho trang này trong một mảng các biến. Chúng ta có thể xuất các biến đó bằng cách lặp qua chúng, do đó hãy thêm các thứ sau đây vào đâu đó trong trang của bạn:

Điều này lấy mỗi cặp khóa/giá trị có mặt trong mảng $_POST của chúng ta và xuất chúng với một ít định dạng. Bây giờ khi bạn submit form bạn nhìn thấy một cái gì đó như sau:

Bạn sẽ thấy giá trị trả về không chỉ nameemail, mà còn một giá trị g-recaptcha-response. Nếu bạn không hoàn thành bài kiểm tra CAPTCHA thì giá trị này sẽ được để trống, nhưng nếu bạn đã tích chọn hộp "I’m not a robot" bạn sẽ thấy một chuỗi rất lớn gồm các ký tự.

Đó là giá trị mà chúng ta cần gửi cho Google để nó có thể được xác nhận, vì vậy hãy làm điều đó tiếp theo.

Bước 3

Thật hạnh phúc, nhóm phát triển của Google đã làm được những công việc khó khăn cho chúng ta ở đây, vì vậy hãy tìm đến dự án ReCAPTCHA trên Github và lấy một bản sao của thư viện recaptchalib.php. Đặt nó trong thư mục gốc của dự án và sau đó tham chiếu đến nó ở đầu tập tin index.php của bạn:

Bước 4

Thư viện này có chứa một tập hợp các hàm gửi g-rerecaptcha-response (cùng với khóa bí mật của chúng ta) đến Google thông qua một yêu cầu HTTP. Sau đó, chúng thu thập các phản hồi, kiểm tra xem CAPTCHA có thành công hay không. Để sử dụng cái này, đầu tiên chúng ta cần thiết lập một vài biến, trước thẻ đóng PHP:

ReCaptcha() kiểm tra xem khóa bí mật của chúng ta có hiện diện không. Nếu không nó tắt tiến trình và tư vấn cho chúng ta đi đến và nhận một cái. Sau đó chúng ta chạy các chi tiết của chúng ta thông qua những thứ sau đây:

Bước 5

Giả sử tất cả đều ổn với form được submit của chúng ta, biến $response sẽ báo cáo trở lại với "success" và chúng ta có thể tiếp tục xử lý dữ liệu form. Nó có thể trông như thế này: loại bỏ các bit nơi chúng ta lặp qua dữ liệu form, sau đó thêm kiểm tra sau đây bên trên form:

Cuối cùng, thêm một thẻ đóng PHP sau form:

Điều này sẽ hiển thị form, trừ khi nó đã được submit thành công, trong trường hợp đó nó sẽ hiển thị một thông điệp cảm ơn nhỏ. Dưới đây là bản demo sau cùng.

Tóm tắt

Đây là một cài đặt PHP rất thô sơ và dễ dàng của No CAPTCHA reCAPTCHA. Nó mở ra cho những cải tiến, nhưng hy vọng nó sẽ giúp cho bạn nắm bắt được những điều cơ bản. Thư viện thuộc về nhóm phát triển của Google và tôi cũng gởi lời cảm ơn đến Matt Aussaguel đã chỉ cho tôi biết.

Các tài nguyên Hữu ích

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.