reCAPTCHA là một dịch vụ miễn phí của Google giúp bảo vệ trang web của bạn khỏi thư rác và các loại lạm dụng tự động khác. Nó sử dụng các kỹ thuật phân tích rủi ro nâng cao để phân biệt con người và bot
Hướng dẫn này dành cho những người đã quen thuộc với các biểu mẫu PHP và HTML cơ bản. Mã nguồn của hướng dẫn này có sẵn ở đây
Đăng ký khóa API của bạn Khóa API reCAPTCHA
Để bắt đầu sử dụng reCAPTCHA, bạn cần đăng ký trang web của mình để nhận cặp khóa API reCAPTCHA từ Google. Cặp khóa bao gồm khóa trang web và khóa bí mật. Khóa trang web được sử dụng để gọi hoặc gọi dịch vụ reCAPTCHA trên trang web của bạn. Khóa bí mật cho phép giao tiếp giữa phụ trợ ứng dụng của bạn và máy chủ reCAPTCHA để xác minh phản hồi của người dùng. Khóa bí mật cần được giữ an toàn vì mục đích bảo mật
Điền vào biểu mẫu và chọn reCAPTCHA v2 và trong đó chọn tùy chọn hộp kiểm “Tôi không phải là người máy”
Sau khi gửi, Google sẽ cung cấp cho bạn khóa trang web và khóa bí mật của bạn
Sau khi bạn đã đăng ký khóa API, bên dưới là hướng dẫn cơ bản để cài đặt reCAPTCHA trên trang web của bạn. Chúng tôi sẽ sử dụng một biểu mẫu đơn giản làm ví dụ
Thêm tiện ích reCAPTCHA
Để thêm reCAPTCHA vào trang web của bạn, trước tiên bạn cần thêm thư viện JavaScript reCAPTCHA vào HTML của mình
Bây giờ chúng tôi sẽ thêm mã HTML bên dưới vào biểu mẫu nơi chúng tôi muốn tiện ích reCAPTCHA xuất hiện
Thay thế site_key bằng khóa trang web thực do google cung cấp
Đối với hướng dẫn này, chúng tôi sẽ tạo một biểu mẫu đơn giản để kiểm tra reCAPTCHA bằng PHP. Khi bạn đã hoàn tất, hãy làm mới trang của mình và bạn sẽ thấy tiện ích reCAPTCHA trên trang web của mình
Xác thực phản hồi của người dùng
Bạn cần xác thực phản hồi khi người dùng nhấp vào tiện ích reCAPTCHA. Để xác minh, bạn cần viết một số mã PHP như bên dưới
Thay thế google_secret_key bằng khóa bí mật do google cung cấp
Khi biểu mẫu được gửi, nó sẽ gửi 'g-recaptcha-response' dưới dạng dữ liệu POST. Bạn cần verify để xem người dùng đã check reCAPTCHA hay chưa. Sau đó, chúng tôi gửi dữ liệu reCAPTCHA tới google để xác minh
Nếu $response->success là đúng thì thử thách hình ảnh xác thực đã được hoàn thành chính xác và bạn nên tiếp tục xử lý biểu mẫu
Nếu $response->success là sai thì người dùng không cung cấp đúng hình ảnh xác thực, bạn nên hiển thị lại biểu mẫu để cho phép họ thử lần khác
Lưu ý rằng mã này đang yêu cầu khóa bí mật, không nên nhầm lẫn với khóa trang web. Bạn lấy nó từ cùng một trang với khóa trang web
Biểu mẫu liên hệ với mã Google reCAPTCHA sẽ là cách hiệu quả và hiệu quả để xác thực người dùng chống lại bot. Như chúng ta đã biết, hình ảnh xác thực là một khái niệm đặc biệt để xác thực người dùng thực sự chống lại bot
Nên tích hợp Google reCAPTCHA so với tích hợp mã captcha tùy chỉnh. Trong hướng dẫn trước, chúng ta đã thấy cách thêm mã captcha vào biểu mẫu bằng PHP
Trong hướng dẫn này, chúng tôi sẽ tích hợp Google reCAPTCHA trong biểu mẫu liên hệ PHP. Bằng cách sử dụng mã Google reCAPTCHA này, chúng tôi có thể xác thực người dùng là con người và bảo vệ việc gửi biểu mẫu khỏi bot
Trong ví dụ này, tôi đã tự động tải các phần phụ thuộc của thư viện mã reCAPTCHA của Google. Để sử dụng thư viện này, chúng tôi cần lấy các khóa API bằng cách đăng ký trang web của chúng tôi. Nếu bạn muốn biết cách lấy khóa API reCaptcha, thì các bước mà chúng tôi đã thảo luận trong bài viết trước sẽ hữu ích
Sau khi nhận được các khóa API, tôi đã cấu hình các khóa này để tích hợp mã reCAPTCHA của Google. Trong biểu mẫu liên hệ, mã captcha được hiển thị và trên biểu mẫu gửi mã này được xác thực
Xem bản trình diễn
Mã này được sử dụng để hiển thị biểu mẫu liên hệ cho người dùng bằng mã Google reCAPTCHA. Trong mã này, tôi đã bao gồm tệp tài nguyên Javascript bắt buộc và hiển thị tiện ích reCAPTCHA bằng cách sử dụng phần tử DIV được gắn thẻ g-recaptcha
Trong thẻ này, tôi đã chỉ định khóa trang web API bằng cách sử dụng thuộc tính dữ liệu HTML5 data-site-key
Ảnh chụp màn hình sau đây hiển thị tiện ích Google reCAPTCHA được hiển thị với biểu mẫu liên hệ PHP
Khi người dùng giải quyết mã reCAPTCHA, thì mã thông báo phản hồi sẽ được trả lại. Phần tử HTML mới g-recaptcha-response sẽ được tạo động để lưu trữ mã thông báo phản hồi của người dùng
Mã thông báo này sau đó sẽ được đăng lên mã PHP trong khi gửi biểu mẫu liên hệ
Name:
Email:
Phone Number:
Comments:
Send Message
Yêu cầu Google API từ mã PHP để xác thực reCAPTCHA
Mã PHP này đọc mã thông báo phản hồi reCAPTCHA của google được đăng qua biểu mẫu liên hệ. Sau đó, nó sẽ gửi yêu cầu tới API bằng mã thông báo phản hồi này và khóa bí mật của API. Sau khi xác thực mã thông báo này, API sẽ trả về phản hồi JSON