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

Google reCAPTCHA là tùy chọn dễ dàng nhất để thêm chức năng CAPTCHA vào trang web. Hầu hết, tính năng CAPTCHA được sử dụng trong biểu mẫu HTML để bảo vệ khỏi gửi thư rác. Trong reCAPTCHA v2, một tiện ích hộp kiểm được thêm vào biểu mẫu và người dùng cần kiểm tra nó để xử lý yêu cầu. Phản hồi của người dùng được xác thực bằng API reCAPTCHA và yêu cầu được xử lý thêm. Bạn có thể dễ dàng tích hợp hộp kiểm Google reCAPTCHA v2 với PHP ở dạng web

Có nhiều plugin khác nhau có sẵn để tích hợp hộp kiểm reCAPTCHA v2 trong WordPress. Nếu bạn muốn kiểm soát hoàn toàn trong tiện ích reCAPTCHA và thêm Google reCAPTCHA mà không cần sử dụng bất kỳ plugin nào, thì có thể thực hiện dễ dàng với tích hợp thủ công. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm Google reCAPTCHA vào mẫu nhận xét WordPress mà không cần plugin

Thực hiện theo các bước đơn giản dưới đây để tích hợp hộp kiểm reCAPTCHA v2 vào biểu mẫu nhận xét trong WordPress

Tạo khóa API reCAPTCHA v2

Trước khi bắt đầu, hãy đăng ký khóa reCAPTCHA v2 trên Bảng điều khiển dành cho quản trị viên reCAPTCHA của Google

Truy cập bảng điều khiển dành cho quản trị viên reCAPTCHA và đăng ký miền cho trang web của bạn

• 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

Khi gửi, Khóa trang web reCAPTCHA v2 và Khóa bí mật sẽ được tạo. Lưu ý các phím này sẽ được sử dụng sau này trong mã

Tải API JavaScript reCAPTCHA

chỉnh sửa đĩa đơn. php của thư mục chủ đề đang hoạt động và thêm đoạn mã sau vào sau get_header();

• Nếu chủ đề đang hoạt động của trang web WordPress của bạn là Hai mươi hai mươi hai, hãy chỉnh sửa tệp single.php từ thư mục wp-content/themes/twentytwentytwo

Thêm reCAPTCHA và xác minh phản hồi

Chỉnh sửa các chức năng. php của thư mục chủ đề đang hoạt động và thêm đoạn mã sau

• Trong hàm add_google_recaptcha(), chỉ định Khóa trang web trong thuộc tính data-sitekey
• Trong hàm is_valid_captcha_response(), chỉ định Khóa bí mật trong khóa secret của mảng $captcha_postdata

/**
 * Google reCAPTCHA: Add widget before the submit button
 */
function add_google_recaptcha($submit_field) {
    $submit_field['submit_field'] = '
'.$submit_field['submit_field'];
    return $submit_field;
}
if (!is_user_logged_in()) {
    add_filter('comment_form_defaults', 'add_google_recaptcha');
}
/**
 * Google reCAPTCHA: verify response and validate comment submission
 */
function is_valid_captcha_response($captcha) {
    $captcha_postdata = http_build_query(
        array(
            'secret' => 'Your_reCAPTCHA_Secret_Key',
            'response' => $captcha,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        )
    );
    $captcha_opts = array(
        'http' => array(
            'method'  => 'POST',
            'header'  => 'Content-type: application/x-www-form-urlencoded',
            'content' => $captcha_postdata
        )
    );
    $captcha_context  = stream_context_create($captcha_opts);
    $captcha_response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify", false, $captcha_context), true);
    if(!empty($captcha_response['success'])){
        return true;
    }else{
        return false;
    }
}
function verify_google_recaptcha() {
    $recaptcha = $_POST['g-recaptcha-response'];
    if(empty($recaptcha)){
        wp_die(__("ERROR: Please select captcha checkbox.
« Back
"));
    }elseif(!is_valid_captcha_response($recaptcha)){
        wp_die(__("Sorry, spam detected!"));
    }
}
if (!is_user_logged_in()) {
    add_action('pre_comment_on_post', 'verify_google_recaptcha');
}

Vậy là xong, tiện ích hộp kiểm reCAPTCHA sẽ được thêm vào biểu mẫu nhận xét trên toàn bộ trang web WordPress

Tích hợp hộp kiểm reCAPTCHA của Google với PHP

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?

Bạn có muốn sử dụng reCAPTCHA của Google để giúp ngăn spam trong biểu mẫu WordPress của mình không?

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách thiết lập và sử dụng tùy chọn reCAPTCHA trong WPForms

1. Tạo khóa reCAPTCHA trong Google

Để bắt đầu, bạn cần đăng nhập vào trang web WordPress của mình và truy cập WPForms » Cài đặt. Sau đó, nhấp vào tab CAPTCHA. Đảm bảo rằng tùy chọn reCAPTCHA đã được chọn

Sau đó, trong cài đặt xuất hiện, hãy tiếp tục và chọn Loại reCAPTCHA bạn muốn sử dụng

Ghi chú. Để biết tổng quan về từng loại reCAPTCHA, hãy nhớ xem hướng dẫn của chúng tôi về cách chọn CAPTCHA cho biểu mẫu của bạn. Mỗi loại reCAPTCHA yêu cầu một bộ khóa khác nhau, vì vậy nếu sau này bạn quyết định chuyển đổi loại, bạn sẽ cần tạo một bộ khóa mới

Tiếp theo, bạn sẽ cần thiết lập reCAPTCHA trong tài khoản Google của mình để tạo các khóa cần thiết. Để bắt đầu quá trình thiết lập này, bạn cần mở bảng điều khiển dành cho quản trị viên reCAPTCHA của Google

Tại đây, bạn sẽ được yêu cầu đăng nhập vào tài khoản Google của mình. Những gì bạn thấy khi đăng nhập sẽ phụ thuộc vào việc bạn đã thiết lập reCAPTCHA với tài khoản này trước đó hay chưa

Nếu trước đây bạn đã thiết lập reCAPTCHA với tài khoản này, bạn cần nhấp vào biểu tượng + (dấu cộng) để thêm trang web mới

Nếu bạn chưa từng thiết lập reCAPTCHA trước đây, thì bạn sẽ được chuyển thẳng đến biểu mẫu thiết lập reCAPTCHA

Dưới đây, bạn sẽ tìm thấy thêm chi tiết về cách điền vào từng trường trong biểu mẫu này

• Nhãn mác. Tên này chỉ hiển thị với bạn, vì vậy hãy nhập bất kỳ tên nào hợp lý (phổ biến nhất là tên trang web)
• loại reCAPTCHA. Chọn phiên bản reCAPTCHA mà bạn muốn sử dụng

Ghi chú. Nếu bạn chọn bật reCAPTCHA v3, thì sẽ không có huy hiệu reCAPTCHA nào được hiển thị ở giao diện người dùng của trang web của bạn khi được sử dụng với Biểu mẫu hội thoại

• tên miền. Nhập URL mà bạn sẽ sử dụng reCAPTCHA. Không bao gồm “http. //www” ở đầu (ví dụ: wpforms. com sẽ được chấp nhận, nhưng https. // wpforms. com hoặc www. wpforms. com sẽ không)
• Những chủ sở hữu. Trừ khi bạn biết một lý do cụ thể để điều chỉnh điều này, bạn có thể bỏ qua điều này
• Chấp nhận Điều khoản dịch vụ của reCAPTCHA. Bạn phải đánh dấu vào ô này để tiếp tục
• Gửi thông báo cho chủ sở hữu. Trừ khi bạn biết một lý do cụ thể để tắt tính năng này, bạn có thể bỏ chọn hộp này

Khi biểu mẫu hoàn tất, hãy tiếp tục và nhấp vào nút Gửi

Sau khi đăng ký, bạn sẽ thấy một trang có các khóa cho trang web của bạn

Bạn sẽ cần sao chép Khóa trang web và Khóa bí mật. Sau đó quay lại trang WordPress của bạn để dán các khóa này vào các trường tương ứng của chúng

Bây giờ bạn đã thêm các khóa reCAPTCHA của mình, bạn cũng có thể tùy ý điều chỉnh các cài đặt reCAPTCHA khác

• Thông báo lỗi. Lỗi này sẽ hiển thị cho bất kỳ người dùng nào không vượt qua bài kiểm tra xác minh của reCAPTCHA
• Ngưỡng điểm (chỉ dành cho reCAPTCHA v3). Đây là số điểm mà bạn muốn người dùng không xác minh được reCAPTCHA v3. Điểm có thể dao động từ 0. 0 (rất có thể là bot) đến 1. 0 (rất có thể là một tương tác tốt)
• Chế độ không xung đột. Nếu reCAPTCHA đang được tải nhiều lần trên trang web của bạn (ví dụ: bởi cả WPForms và chủ đề WordPress của bạn), điều này có thể ngăn reCAPTCHA hoạt động bình thường. Chế độ Không xung đột sẽ xóa mọi mã reCAPTCHA không được tải bởi WPForms. Tuy nhiên, chúng tôi thực sự khuyên bạn nên liên hệ với nhóm hỗ trợ của chúng tôi nếu bạn không chắc chắn có nên sử dụng tùy chọn này hay không

• Xem trước (chỉ dành cho Checkbox reCAPTCHA v2). Nếu reCAPTCHA được định cấu hình chính xác, bạn sẽ thấy bản xem trước giao diện của reCAPTCHA trên trang web của mình

Đảm bảo nhấp vào nút Lưu cài đặt ở cuối trang này để lưu các thay đổi cài đặt của bạn

Các bước bổ sung CHỈ dành cho người dùng AMP (chỉ dành cho reCAPTCHA v3)

Nếu bạn đang chạy Google AMP trên trang web WordPress của mình, thì bạn sẽ cần thực hiện một điều chỉnh bổ sung trong thiết lập reCAPTCHA của mình để đảm bảo khả năng tương thích với AMP

Ghi chú. Khi chạy Google AMP cùng với reCAPTCHA, huy hiệu reCAPTCHA sẽ không hiển thị trên giao diện người dùng của trang web của bạn

Bên dưới các khóa reCAPTCHA, hãy nhấp vào Chuyển đến Cài đặt

Thao tác này sẽ mở lại cài đặt reCAPTCHA của bạn, tuy nhiên, bây giờ bạn sẽ được hiển thị một cài đặt bổ sung đã bị ẩn trước đó

Ở cuối trang này, hãy chọn hộp mới có nhãn Cho phép khóa này hoạt động với các trang AMP. Sau đó, nhấp vào Lưu một lần nữa

2. Thêm reCAPTCHA vào Biểu mẫu

Bây giờ bạn đã thiết lập các khóa reCAPTCHA của mình, bạn sẽ có thể thêm reCAPTCHA vào bất kỳ WPForm nào của mình

Để thực hiện việc này, hãy tiếp tục và tạo biểu mẫu mới hoặc chỉnh sửa biểu mẫu hiện có

Sau khi bạn mở trình tạo biểu mẫu, hãy xem phần Trường tiêu chuẩn và nhấp vào trường reCAPTCHA

Ngoài ra, bạn luôn có thể bật reCAPTCHA bằng cách đi tới Cài đặt » Chống thư rác và bảo mật trong trình tạo biểu mẫu

Tiếp theo, cuộn xuống phần có nhãn CAPTCHA. Bạn sẽ cần chuyển nút Bật Google Invisible v2 reCAPTCHA sang vị trí bật

Ghi chú. Nhãn trên công tắc CAPTCHA tùy thuộc vào phiên bản reCAPTCHA bạn đã định cấu hình. Ví dụ: nếu bạn thiết lập reCAPTCHA v3, nhãn sẽ ghi “Bật Google v3 reCAPTCHA. ”

Để xác nhận rằng reCAPTCHA của bạn đã được bật, hãy tìm huy hiệu ở góc trên bên phải của trình tạo biểu mẫu

Ghi chú. Nếu không có huy hiệu nào xuất hiện trong trình tạo biểu mẫu của bạn, hãy đảm bảo rằng bạn đã nhập chính xác

3. Thử nghiệm reCAPTCHA

Bước cuối cùng là chạy thử nghiệm nhanh để đảm bảo rằng reCAPTCHA có giao diện và hoạt động như bạn mong đợi

Để kiểm tra điều này, bạn chỉ cần gửi một mục vào biểu mẫu của mình. Để biết thêm chi tiết về cách kiểm tra biểu mẫu của bạn, vui lòng xem danh sách kiểm tra đầy đủ của chúng tôi

Các câu hỏi thường gặp

Tôi có thể sử dụng reCAPTCHA nếu trang web của tôi sử dụng tên miền phụ không?

Google reCAPTCHA không hoạt động với tên miền phụ, tuy nhiên, reCAPTCHA sẽ không chấp nhận các trang web tên miền phụ có định dạng đường dẫn (e. g. ,

/**
 * Google reCAPTCHA: Add widget before the submit button
 */
function add_google_recaptcha($submit_field) {
    $submit_field['submit_field'] = '
'.$submit_field['submit_field'];
    return $submit_field;
}
if (!is_user_logged_in()) {
    add_filter('comment_form_defaults', 'add_google_recaptcha');
}
/**
 * Google reCAPTCHA: verify response and validate comment submission
 */
function is_valid_captcha_response($captcha) {
    $captcha_postdata = http_build_query(
        array(
            'secret' => 'Your_reCAPTCHA_Secret_Key',
            'response' => $captcha,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        )
    );
    $captcha_opts = array(
        'http' => array(
            'method'  => 'POST',
            'header'  => 'Content-type: application/x-www-form-urlencoded',
            'content' => $captcha_postdata
        )
    );
    $captcha_context  = stream_context_create($captcha_opts);
    $captcha_response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify", false, $captcha_context), true);
    if(!empty($captcha_response['success'])){
        return true;
    }else{
        return false;
    }
}
function verify_google_recaptcha() {
    $recaptcha = $_POST['g-recaptcha-response'];
    if(empty($recaptcha)){
        wp_die(__("ERROR: Please select captcha checkbox.
« Back
"));
    }elseif(!is_valid_captcha_response($recaptcha)){
        wp_die(__("Sorry, spam detected!"));
    }
}
if (!is_user_logged_in()) {
    add_action('pre_comment_on_post', 'verify_google_recaptcha');
}

/**
 * Google reCAPTCHA: Add widget before the submit button
 */
function add_google_recaptcha($submit_field) {
    $submit_field['submit_field'] = '
'.$submit_field['submit_field'];
    return $submit_field;
}
if (!is_user_logged_in()) {
    add_filter('comment_form_defaults', 'add_google_recaptcha');
}
/**
 * Google reCAPTCHA: verify response and validate comment submission
 */
function is_valid_captcha_response($captcha) {
    $captcha_postdata = http_build_query(
        array(
            'secret' => 'Your_reCAPTCHA_Secret_Key',
            'response' => $captcha,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        )
    );
    $captcha_opts = array(
        'http' => array(
            'method'  => 'POST',
            'header'  => 'Content-type: application/x-www-form-urlencoded',
            'content' => $captcha_postdata
        )
    );
    $captcha_context  = stream_context_create($captcha_opts);
    $captcha_response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify", false, $captcha_context), true);
    if(!empty($captcha_response['success'])){
        return true;
    }else{
        return false;
    }
}
function verify_google_recaptcha() {
    $recaptcha = $_POST['g-recaptcha-response'];
    if(empty($recaptcha)){
        wp_die(__("ERROR: Please select captcha checkbox.
« Back
"));
    }elseif(!is_valid_captcha_response($recaptcha)){
        wp_die(__("Sorry, spam detected!"));
    }
}
if (!is_user_logged_in()) {
    add_action('pre_comment_on_post', 'verify_google_recaptcha');
}

Tôi vẫn nhận được thư rác khi bật reCAPTCHA. Tôi có thể làm gì để ngăn chặn điều này?

Nếu bạn đang sử dụng reCAPTCHA v2, bạn có thể điều chỉnh cài đặt độ khó cho reCAPTCHA của mình từ bên trong tài khoản Google reCAPTCHA của mình

Để tăng độ khó cho reCAPTCHA của bạn, hãy điều hướng đến phần Tùy chọn bảo mật trong cài đặt reCAPTCHA của bạn. Từ đây, bạn có thể điều chỉnh thanh trượt để an toàn hơn

Đó là nó. Chúng tôi vừa chỉ cho bạn cách thêm reCAPTCHA của Google vào WPForms của bạn

Tiếp theo, bạn có muốn ghi lại các sự kiện xảy ra trong các biểu mẫu WordPress của mình không?

Tôi vẫn có thể sử dụng reCAPTCHA v2 chứ?

Sự khác biệt giữa reCAPTCHA v2 và v3 là gì?

Mẫu liên hệ 7 có hỗ trợ reCAPTCHA v2 không?

Plugin reCAPTCHA tốt nhất cho WordPress là gì?