Việt Nam

Hướng dẫn tích hợp reCaptcha của google vào Form

Đăng bởi:

Sudo

Đăng ngày:

Feb 25, 2018

Đăng ở:

Thủ Thuật Thiết Kế

Chắc hẳn các bạn cũng không còn lạ lẫm gì với từ "CAPTCHA" nữa đúng không, nó là trợ thủ đắc lực, giúp cho những website có chức năng đăng ký, hoặc nhận dữ liệu người dùng từ Form, để tránh việc bị spam đăng ký và ddos làm ảnh hưởng xấu đến website. Nhưng mặt xấu của nó là làm người dùng cảm thấy khó chịu, khi phải nhập đi nhập lại đoạn text bị co kéo làm sao cho xấu nhất có thể, hoặc trả lời những câu hỏi rất là ngớ ngẩn ví dụ 1 + 1 = ?. reCaptcha ra đời để làm cho công việc gõ "CAPTCHA" trở nên đơn giản hơn rất nhiều.

animate-recaptcha

Hướng dẫn đăng ký reCaptcha.

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

dangky_google_recaptcha

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

man-hinh-dau-tien_1

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 Register.

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.

man-hinh-thu-ba-3

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

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

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

recaptcha-script

Hoặc nếu muốn cố định ngôn ngữ bạn thêm ?hl= vào như sau.

recaptcha-script-1

Google reCAPTCHA hỗ trợ hơn 70 ngôn ngữ khác nhau.

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 do google cung cấp cho bạn.

recaptcha-script-2

Bây giờ đến code php xử lý reCaptcha

Thay ==== Your Secret key === bằng Secret key của bạn.

recaptcha-php

See the Pen <a href="https://codepen.io/dinhphuong3412/pen/ddqgeK/">Demo reCaptcha</a> by dinhphuong3412 (<a href="https://codepen.io/dinhphuong3412">@dinhphuong3412</a>) on <a href="https://codepen.io">CodePen</a>.

Vậy là xong, hy vọng những gì mình chia sẻ có thể giúp ích cho các bạn.

Tác giả: Sudo

ADMIN

Bình luận