Google đã phát hành reCAPTCHA phiên bản 3 gần đây và phiên bản 2 cũng ở đó để bảo vệ chống lại các bot xấu. Để nâng cao năng suất của biểu mẫu Liên hệ, chúng tôi phải triển khai mã reCAPTCHA trong trang web của mình. Nó xác thực biểu mẫu liên hệ chỉ bằng một cú nhấp chuột và nó ngăn bot gửi thư rác
Việc triển khai mã reCaptcha của Google trong biểu mẫu liên hệ PHP rất hữu ích từ góc độ UX. Công cụ này được thiết kế đặc biệt để kiểm tra người dùng thực sự chống lại các chương trình xấu. Người dùng phải nhấp vào hộp kiểm để xác nhận danh tính của mình. Đơn giản phải không
Thông thường, Google reCAPTCHA được sử dụng để bảo vệ khỏi bot; . Chúng tôi đã xuất bản hướng dẫn trước về cách tạo CAPTCHA tùy chỉnh bằng PHP
Quy trình tích hợp Google reCAPTCHA
- Tạo khóa API bảo mật & trang web reCAPTCHA
- Tạo biểu mẫu HTML bằng Bootstrap
- Tích hợp reCAPTCHA dưới dạng PHP
- Xác thực phản hồi bằng Google reCAPTCHA
- Gửi email để đăng dữ liệu biểu mẫu trong PHP
Tạo khóa API bảo mật & trang web reCAPTCHA
Chúng tôi phải có Trang web Google reCaptcha và Khóa bí mật và nó yêu cầu bạn đăng ký tên miền cần được bảo vệ khỏi thư rác
Truy cập trang web reCAPTCHA và đăng ký ứng dụng của bạn
Nhập tên nhãn. Nó giúp bạn nhận ra tên miền đã đăng ký của mình
Chúng ta có thể thấy reCAPTCHA phiên bản 3 và 2, chọn reCAPTCHA v2 > tùy chọn Tôi không phải người máy bằng cách chọn nút radio
Nhập tên miền của bạn, yêu cầu bảo vệ khỏi bot
Click vào nút “Save”, bạn sẽ được chuyển đến một trang mới
Sao chép Khóa trang web reCAPTCHA và Khóa bí mật của bạn, chúng tôi sẽ cần các khóa API này trong bước tiếp theo
Tích hợp Google reCAPTCHA trong PHP Contact Form
Để thêm Google reCAPTCHA Widget ở dạng HTML, chúng tôi yêu cầu đặt tệp JavaScript reCAPTCHA ở cuối trang web. Chỉ cần dán liên kết sau trước khi đóng thẻ body
<script src="//www.google.com/recaptcha/api.js" async defer></script>Tiếp theo, bao gồm thẻ HTML g-recaptcha bên trong phần tử Biểu mẫu HTML, đặt nó chính xác ở nơi bạn muốn hiển thị công cụ reCAPTHCA
Tiện ích g-recaptcha đi kèm với thuộc tính khóa data-site. Chúng tôi cần dán khóa trang web mà chúng tôi đã tạo ở bước trước
<div class="g-recaptcha" data-sitekey="Your_Site_Key"></div>Chỉ định thuộc tính tên trong các trường đầu vào tương tác với API PHP, Xác định hộp cảnh báo để hiển thị thông báo lỗi và thành công
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP Contact Form with Captcha</title> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <div class="container mt-5"> <h2>Implement Google reCAPTCHA in PHP Contact Form</h2> <?php include('scripts/form.php'); ?> <!-- Error messages --> <?php if(!empty($response)) {?> <div class="form-group col-12 text-center"> <div class="alert text-center <?php echo $response['status']; ?>"> <?php echo $response['message']; ?> </div> </div> <?php }?> <!-- Contact form --> <form action="" name="contactForm" id="contactForm" method="post" enctype="multipart/form-data" novalidate> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" name="name" id="name"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" name="email" id="email"> </div> <div class="form-group"> <label>Subject</label> <input type="text" class="form-control" name="subject" id="subject"> </div> <div class="form-group"> <label>Message</label> <textarea class="form-control" rows="4" name="message" id="message"></textarea> </div> <div class="form-group"> <!-- Google reCAPTCHA block --> <div class="g-recaptcha" data-sitekey="6LfZ4AAVAAAAAFP6tyNYWgycDvXHIfjZg9shDZ05"></div> </div> <div class="form-group"> <input type="submit" name="send" value="Send" class="btn btn-dark btn-block"> </div> </form> </div> <!-- Google reCaptcha --> <script src="//www.google.com/recaptcha/api.js" async defer></script> </body> </html>Xác thực reCAPTCHA của Google trước khi gửi biểu mẫu bằng PHP
Xác thực trường biểu mẫu đảm bảo người dùng đã nhập các giá trị được yêu cầu hay chưa. Phản hồi reCAPTCHA của Google được kích hoạt dựa trên yêu cầu bài đăng PHP. Lệnh gọi API xác thực mã thông báo và trả về phản hồi JSON thông qua API reCAPTCHA và Khóa bí mật
Người dùng chọn hộp kiểm reCAPTCHA để hoàn thành thử thách reCaptcha. Nếu phản hồi reCAPTCHA thành công, biểu mẫu sẽ được gửi và thông báo sẽ được hiển thị cho người dùng
<?php if(isset($_POST["send"])) { $name = $_POST["name"]; $email = $_POST["email"]; $subject = $_POST["subject"]; $message = $_POST["message"]; // Form validation if(!empty($name) && !empty($email) && !empty($subject) && !empty($message)){ // reCAPTCHA validation if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) { // Google secret API $secretAPIkey = '6LfZ4AAVAAAAAF722GPGWyJ_lf1F2hMSWzPHmuYc'; // reCAPTCHA response verification $verifyResponse = file_get_contents('//www.google.com/recaptcha/api/siteverify?secret='.$secretAPIkey.'&response='.$_POST['g-recaptcha-response']); // Decode JSON data $response = json_decode($verifyResponse); if($response->success){ $toMail = "johndoe@gmail.com"; $header = "From: " . $name . "<". $email .">\r\n"; mail($toMail, $subject, $message, $header); $response = array( "status" => "alert-success", "message" => "Your mail have been sent." ); } else { $response = array( "status" => "alert-danger", "message" => "Robot verification failed, please try again." ); } } else{ $response = array( "status" => "alert-danger", "message" => "Plese check on the reCAPTCHA box." ); } } else{ $response = array( "status" => "alert-danger", "message" => "All the fields are required." ); } } ?>Google reCAPTCHA trong PHP Ví dụ về biểu mẫu liên hệ
Đây là ảnh chụp màn hình mô tả tiện ích hộp kiểm Google reCAPTCHA mà chúng tôi đã thêm vào biểu mẫu liên hệ PHP
Phần kết luận
Chúng ta đã hoàn thành hướng dẫn PHP Google reCAPTCHA. Chúng ta đã học được cách tích hợp Google reCAPTCHA vào PHP Form một cách dễ dàng. Ngoài ra, hãy tìm hiểu cách triển khai xác thực phía máy chủ cho Google reCAPTCHA phiên bản 2
Bạn cũng có thể xem phân tích CAPTCHA để tìm hiểu luồng yêu cầu
Nhận mã hoàn chỉnh của hướng dẫn này trên GitHub
máy đào
Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel
Twitter GitHubBài viết đề xuất
Xây dựng hệ thống xếp hạng 5 sao PHP MySQL bằng jQuery AJAXPHP 8 Tìm kiếm dữ liệu trực tiếp AJAX với MySQL Hướng dẫn PHP 8 Select2 Đa lựa chọn với jQuery AJAX Hướng dẫn PHP 8 Ví dụ mã hóa và giải mã dữ liệu JSON Ví dụ hướng dẫn xác thực biểu mẫu phía máy chủ PHP 8Cách tạo Captcha trong biểu mẫu liên hệ PHPTạo biểu mẫu liên hệ trong . Lấy giá trị đã chọn và thêm kiểu Cách lấy các giá trị đã chọn từ tùy chọn được chọn trong PHP 8Nhận nhiều giá trị của các hộp kiểm đã chọn trong PHP 8Tạo phân trang trong PHP 8 với MySQL và BootstrapBuild Biểu mẫu đăng ký (đăng ký) người dùng PHP 8 với MySQL