Làm cách nào để sử dụng reCAPTCHA v2 trong HTML?

Google đã phát hành tiện ích hộp kiểm reCAPTCHA v2 mới. Sử dụng tiện ích reCAPTCHA, người dùng có thể chứng minh rằng họ là con người mà không cần giải câu hỏi CAPTCHA. Chỉ cần một cú nhấp chuột để xác nhận họ không phải là người máy. Hộp kiểm Google reCAPTCHA bảo vệ trang web của bạn khỏi thư rác với trải nghiệm người dùng tốt hơn. Nói chung, chức năng Google reCAPTCHA được sử dụng trong biểu mẫu web để bảo vệ khỏi thư rác. Ngoài ra, Google reCAPTCHA cũng có thể được sử dụng để bảo vệ các trang web khỏi các yêu cầu spam. reCAPTCHA giúp xác thực bất kỳ phản hồi nào đến từ trang web hữu ích cho việc bảo vệ khỏi bot

Google reCAPTCHA API cung cấp một cách dễ dàng và hiệu quả để bảo vệ biểu mẫu web hoặc trang web của bạn khỏi bị spam. Google reCAPTCHA có thể dễ dàng tích hợp vào trang web bằng PHP. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tích hợp hộp kiểm Google reCAPTCHA với PHP trong biểu mẫu web

Trong mã ví dụ, chức năng sau sẽ được triển khai để chứng minh tích hợp Google reCAPTCHA với PHP

• Tạo biểu mẫu HTML để gửi yêu cầu liên hệ
• Thêm tiện ích hộp kiểm reCAPTCHA vào biểu mẫu
• Xác minh phản hồi bằng Google reCAPTCHA API
• Truy xuất dữ liệu biểu mẫu và gửi email bằng PHP

Tạo khóa API reCAPTCHA

Cần có khóa reCAPTCHA để gọi Google reCAPTCHA API. Trước khi thêm hộp kiểm reCAPTCHA v2 vào trang web của mình, bạn cần đăng ký trang web của mình và nhận khóa API reCAPTCHA

đăng ký trang web
Đăng ký tên miền trang web của bạn tại Bảng điều khiển dành cho quản trị viên reCAPTCHA của Google

• Nhãn – Nó giúp xác định trang web đã đăng ký của bạn trong tương lai
• loại reCAPTCHA – Chọn reCAPTCHA v2 » Tôi không phải là người máy Hộp kiểm
• Tên miền – Chỉ định tên miền của trang web của bạn

Nhận khóa trang web và khóa bí mật
Sau khi gửi, trang web của bạn sẽ được thêm vào và các khóa reCAPTCHA sẽ được tạo. Khóa trang web và Khóa bí mật cần được chỉ định trong tập lệnh tại thời điểm gọi Google reCAPTCHA API

• Khóa trang web – Khóa này được sử dụng trong mã HTML của tiện ích reCAPTCHA
• Khóa bí mật – Khóa này giúp ủy quyền giao tiếp giữa trang web của bạn và máy chủ reCAPTCHA

Sao chép Khóa trang web và Khóa bí mật để sử dụng sau này trong mã tích hợp Google reCAPTCHA

Thêm tiện ích reCAPTCHA vào biểu mẫu HTML

Đầu tiên, bao gồm thư viện JavaScript của reCAPTCHA API

Thêm phần tử thẻ g-recaptcha vào biểu mẫu HTML nơi bạn muốn hiển thị tiện ích hộp kiểm reCAPTCHA

• Phần tử g-recaptcha DIV có một lớp (được đặt tên là “g-recaptcha”) và thuộc tính data-sitekey
• Khóa trang web của API reCAPTCHA sẽ được chỉ định trong thuộc tính data-sitekey

Xác minh Phản hồi API reCAPTCHA (Xác thực phía máy chủ)

Sau khi gửi biểu mẫu, dữ liệu đầu vào sẽ được gửi tới tập lệnh phía máy chủ để xác minh phản hồi của người dùng và xử lý yêu cầu liên hệ

• Xác thực các trường biểu mẫu để kiểm tra xem người dùng có điền vào các trường nhập không
• Sử dụng tham số g-recaptcha-response POST để kiểm tra xem người dùng có chọn hộp kiểm reCAPTCHA hay không
• Xác minh thử thách reCAPTCHA bằng reCAPTCHA API và PHP
  • Gọi Google reCAPTCHA API và chuyển Khóa bí mật của trang web (secret) & phản hồi của người dùng (_______7_______). Kiểm tra phản hồi API reCAPTCHA
• Nếu phản hồi reCAPTCHA hợp lệ và thành công,
  • Yêu cầu liên hệ sẽ được xử lý thêm và một email sẽ được gửi đến quản trị viên trang với dữ liệu biểu mẫu liên hệ bằng PHP
  • Thông báo trạng thái được hiển thị cho người dùng

// Google reCAPTCHA API keys settings
$secretKey  = 'Your_reCaptcha_Secret_Key';
// Email settings
$recipientEmail = '[email protected]';
// If the form is submitted
$postData = $statusMsg = '';
$status = 'error';
if(isset($_POST['submit'])){
    $postData = $_POST;
    // Validate form input fields
    if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message'])){
        // Validate reCAPTCHA checkbox
        if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
            // Verify the reCAPTCHA API response
            $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['g-recaptcha-response']);



            // Decode JSON data of API response
            $responseData = json_decode($verifyResponse);
            // If the reCAPTCHA API response is valid
            if($responseData->success){
                // Retrieve value from the form input fields
                $name = !empty($_POST['name'])?$_POST['name']:'';
                $email = !empty($_POST['email'])?$_POST['email']:'';
                $message = !empty($_POST['message'])?$_POST['message']:'';
                // Send email notification to the site admin
                $to = $recipientEmail;
                $subject = 'New Contact Request Submitted';
                $htmlContent = "
                    
Contact request details
 
Name: ".$name."
 
Email: ".$email."
 
Message: ".$message."

                ";
                // Always set content-type when sending HTML email
                $headers = "MIME-Version: 1.0" . "\r\n";
                $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
                // More headers
                $headers .= 'From:'.$name.' <'.$email.'>' . "\r\n";
                // Send email
                mail($to, $subject, $htmlContent, $headers);



                $status = 'success';
                $statusMsg = 'Thank you! Your contact request has been submitted successfully.';
                $postData = '';
            }else{
                $statusMsg = 'Robot verification failed, please try again.';
            }
        }else{
            $statusMsg = 'Please check the reCAPTCHA checkbox.';
        }
    }else{
        $statusMsg = 'Please fill all the mandatory fields.';
    }
}
?>

Sử dụng đoạn mã sau để hiển thị thông báo trạng thái gửi biểu mẫu trong phần biểu mẫu HTML

Google reCAPTCHA ẩn với PHP

Phần kết luận

Có nhiều tùy chọn có sẵn để thêm chức năng CAPTCHA vào trang web. Google reCAPTCHA là tùy chọn dễ dàng nhất để thêm thử thách CAPTCHA vào biểu mẫu trên trang web. Bạn cũng có thể xem báo cáo phân tích của Yêu cầu CAPTCHA trong bảng quản trị reCAPTCHA. Trong mã ví dụ, chúng tôi đã chỉ ra cách bạn có thể thêm hộp kiểm Google reCAPTCHA vào biểu mẫu liên hệ. Không chỉ biểu mẫu liên hệ mà bạn còn có thể sử dụng mã của chúng tôi để tích hợp Google reCAPTCHA vào bất kỳ loại biểu mẫu nào trong ứng dụng web

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?

Làm cách nào để chèn mã Captcha vào HTML?

Làm cách nào để sử dụng Google Captcha trong HTML?

Làm cách nào để sử dụng reCAPTCHA v3 trong HTML?

Làm cách nào để tích hợp reCAPTCHA v2 trong PHP?