bởi Ondrej Svestka
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách dễ dàng và nhanh chóng thêm hình ảnh xác thực vào biểu mẫu Bootstrap của bạn để ngăn chặn thư rác. Chúng tôi sẽ sử dụng Google ReCaptcha, giải pháp Captcha phổ biến nhất hiện nay.
Là một cơ sở, tôi sẽ sử dụng một biểu mẫu liên hệ HTML với chương trình phụ trợ PHP từ một bài hướng dẫn trước đây của tôi. YBạn có thể sử dụng nó với bất kỳ biểu mẫu Bootstrap nào khác mà bạn có.
biểu mẫu của chúng tôi sẽ được sử dụng HTML5 cú pháp rắc một số Giàn giáo Bootstrap và một trình xác thực JavaScript.
Chúng tôi sẽ gửi nó qua AJAX (trang sẽ không tải lại), sau đó xử lý các giá trị biểu mẫu bằng PHP.
Và cuối cùng, chúng tôi sẽ gửi email bằng PHP và trả lại phản hồi cho trang gốc sẽ được hiển thị trong thông báo trạng thái phía trên biểu mẫu.
Như tôi đã đề cập trước đây, tôi sẽ chủ yếu tập trung vào làm việc với ReCaptcha hôm nay và không phải trên biểu mẫu Bootstrap quá nhiều. Vì vậy, trong trường hợp bạn đã bỏ lỡ nó, ít nhất hãy xem nhanh hướng dẫn về biểu mẫu Bootstrap của tôi.
Bản trình diễn & Liên kết
Ok, chúng ta hãy làm điều đó!
1. Đăng ký trang web của bạn
Để có thể sử dụng ReCaptcha, bạn cần phải đăng ký trang web của bạn trên trang web của ReCaptcha trước.
Sau khi đăng ký thành công, bạn sẽ nhận được một cặp chìa khóa để sử dụng với ReCaptcha của bạn. Để trang mở hoặc sao chép các khóa vào một tệp văn bản, chúng tôi sẽ sớm cần đến chúng.
2.HTML
Chúng tôi sẽ sử dụng mẫu của biểu mẫu liên hệ từ hướng dẫn trước + chúng tôi sẽ thêm phần tử reCAPTCHA và đầu vào ẩn bên cạnh phần tử đó để giúp chúng tôi xác thực JavaScript.
Hãy giải thích mã HTML một chút:
- chúng tôi có sẵn một biểu mẫu liên hệ HTML được viết bằng đánh dấu Bootstrap
- các tập lệnh và biểu định kiểu chính của bên thứ 3 sẽ được sử dụng là: jQuery, Bootstrap 4, CSS và JavaScript
Để thêm ReCaptcha vào biểu mẫu của bạn, bạn chỉ cần:
- bao gồm
<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S">
vào nơi bạn cần tôin biểu mẫu của bạn (thay thế khóa trang web bằng khóa riêng của bạn từ bước đầu tiên)
<script src="https://www.google.com/recaptcha/api.js"><;/tập lệnh>data-callback và data-expired-callback thuộc tính trên g-recaptcha div — đây là tùy chọn và tôi sẽ sử dụng chúng để làm cho ReCaptcha hợp tác với trình xác thựcĐây là mã đầy đủ của mẫu
3.PHP
Trong PHP, chúng tôi sẽ sử dụng thư viện ứng dụng khách của Google sẽ đảm nhận việc xác minh.
Bạn có thể sử dụng Trình soạn thảo để cài đặt nó trong dự án của mình, tải xuống từ GitHub hoặc chỉ cần sử dụng phiên bản tôi đã đưa vào gói Tải xuống.
Phần chính của mã cũng là từ hướng dẫn trước của tôi, vì vậy tôi sẽ cố gắng tóm tắt lại nó một cách ngắn gọn.
Hãy đặt tên cho tệp contact.php và xem chúng ta sẽ làm gì trong đó:
- ban đầu, chúng ta cần yêu cầu thư viện ReCaptcha PHP —
require('recaptcha-master/src/autoload.php'); - và thực hiện một số nội dung cấu hình, chẳng hạn như nhập Khóa bí mật của bạn —
$recaptchaSecret="YOUR_SECRET_KEY"; - Chúng tôi cũng đặt các biến bổ sung như email để gửi email đến, chủ đề và thông báo thành công/lỗi
- sau đó, bạn sẽ cần khởi tạo lớp bằng Khóa bí mật của mình –
$recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret); - gửi một cuộc gọi để xác thực ReCaptcha —
$response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); - ném một ngoại lệ nếu xác thực không thành công –
if (!$response->isSuccess()) {...} - sau đó, tập lệnh sẽ soạn thư email, gửi nó và trả về phản hồi JSON. (Biểu mẫu được gửi bởi AJAX theo mặc định.)
4. JavaScript
Tệp JavaScript của chúng tôi contact.js sẽ chăm sóc:
- xác thực đầu vào với trình xác thực Bootstrap
- xử lý Các cuộc gọi lại JS từ ReCaptcha (chúng tôi sẽ điền vào ẩn
input[data-recaptcha]dựa trên phản hồi của ReCaptcha. Nếu thành công, chúng tôi điền thông tin đầu vào này vào = trình xác thực sẽ coi biểu mẫu là hợp lệ.) - AJAX gửi biểu mẫu
- và cuối cùng, hiển thị thông báo thành công hoặc lỗi và cũng làm trống biểu mẫu.
Đây là mã:
5. Kết quả
Đây chính là nó!
Bạn nên có một biểu mẫu liên hệ Bootstrap liên hệ đang hoạt động với nền tảng ReCaptcha và PHP ngay bây giờ.
Cảm ơn vì 50 cái vỗ tay ? nếu bạn thích bài viết này! MộtNgoài ra, hãy xem các hướng dẫn Bootstrap khác hoặc các mẫu Bootstrap của tôi.
Được xuất bản lần đầu trên blog Bootstrapious.
Giới thiệu về tác giả
Ondrej Svestka là một người đam mê Bootstrap và front-end, đồng thời là người sáng lập Boostrapious.
