Cách thêm reCAPTCHA vào form comment WordPress

6 tháng ago, WordPress Plugin, Views

Tại Sao Cần Thêm reCAPTCHA vào Form Comment WordPress?

Việc thêm reCAPTCHA vào form comment WordPress là một biện pháp quan trọng để bảo vệ trang web của bạn khỏi spam comment. Spam comment không chỉ gây khó chịu cho người dùng mà còn ảnh hưởng tiêu cực đến SEO và uy tín của website. Bot spam thường được lập trình để tự động gửi hàng loạt comment rác, chứa các liên kết độc hại hoặc nội dung quảng cáo không liên quan. reCAPTCHA giúp phân biệt giữa người dùng thật và bot, ngăn chặn bot spam gửi comment trên trang web của bạn.

Giảm thiểu spam comment, giữ cho phần bình luận sạch sẽ và hữu ích.
Cải thiện trải nghiệm người dùng bằng cách loại bỏ các comment rác.
Bảo vệ SEO bằng cách ngăn chặn bot đăng các liên kết độc hại.

Các Loại reCAPTCHA và Lựa Chọn Phù Hợp

Có nhiều loại reCAPTCHA khác nhau, mỗi loại có ưu và nhược điểm riêng. Hai loại phổ biến nhất là reCAPTCHA v2 (cả “Tôi không phải là robot” checkbox và Invisible reCAPTCHA) và reCAPTCHA v3.

reCAPTCHA v2

reCAPTCHA v2 là phiên bản cổ điển hơn, thường yêu cầu người dùng chọn hình ảnh phù hợp hoặc đánh dấu vào ô “Tôi không phải là robot”.

“Tôi không phải là robot” Checkbox: Yêu cầu người dùng nhấp vào ô để chứng minh rằng họ không phải là robot. Đôi khi, người dùng có thể phải giải thêm câu đố hình ảnh.

Invisible reCAPTCHA: Hoạt động ẩn dưới nền, không yêu cầu người dùng trực tiếp tương tác trừ khi hệ thống nghi ngờ họ là bot.

reCAPTCHA v3

reCAPTCHA v3 hoạt động hoàn toàn ẩn dưới nền, sử dụng điểm số để đánh giá mức độ tin cậy của người dùng. Bạn có thể tùy chỉnh ngưỡng điểm để quyết định hành động (ví dụ: cho phép gửi comment, yêu cầu xác minh thêm hoặc chặn hoàn toàn).

Lựa chọn phù hợp:

Nếu bạn muốn một phương pháp đơn giản và dễ cài đặt, reCAPTCHA v2 “Tôi không phải là robot” checkbox là một lựa chọn tốt.
Nếu bạn muốn trải nghiệm người dùng mượt mà hơn, Invisible reCAPTCHA hoặc reCAPTCHA v3 là những lựa chọn tốt hơn. reCAPTCHA v3 yêu cầu bạn xử lý điểm số và thực hiện các hành động dựa trên điểm số đó.

Hướng Dẫn Chi Tiết Cách Thêm reCAPTCHA v2 vào Form Comment WordPress

Hướng dẫn này sẽ tập trung vào việc thêm reCAPTCHA v2 (“Tôi không phải là robot” checkbox) vào form comment WordPress. Các bước thực hiện như sau:

Bước 1: Đăng Ký reCAPTCHA

Truy cập trang web Google reCAPTCHA: https://www.google.com/recaptcha/admin/create
Đăng nhập bằng tài khoản Google của bạn.
Điền thông tin chi tiết:
- Label: Nhập tên cho reCAPTCHA của bạn (ví dụ: “Website của tôi – Bình luận”).
- reCAPTCHA type: Chọn “reCAPTCHA v2” và “Tôi không phải là robot” Checkbox.
- Domains: Nhập tên miền website của bạn (ví dụ: example.com).
- Chấp nhận điều khoản và điều kiện.
- Nhấn nút “Submit”.
Bạn sẽ nhận được Site Key và Secret Key. Hãy lưu trữ chúng cẩn thận.

Bước 2: Cài Đặt Plugin reCAPTCHA

Có nhiều plugin WordPress hỗ trợ tích hợp reCAPTCHA. Một số plugin phổ biến bao gồm:

Advanced noCaptcha & invisible Captcha
Google Captcha (reCAPTCHA) by BestWebSoft
reCaptcha by BestWebSoft

Trong ví dụ này, chúng ta sẽ sử dụng plugin “Advanced noCaptcha & invisible Captcha”.

Đăng nhập vào trang quản trị WordPress của bạn.
Đi tới “Plugins” -> “Add New”.
Tìm kiếm plugin “Advanced noCaptcha & invisible Captcha”.
Cài đặt và kích hoạt plugin.

Bước 3: Cấu Hình Plugin reCAPTCHA

Sau khi kích hoạt plugin, đi tới “Settings” -> “Advanced noCaptcha”.
Trên tab “General settings”, nhập Site Key và Secret Key mà bạn đã nhận được từ trang web Google reCAPTCHA.
Trong “Enable reCaptcha on”, chọn “Comments form”.
Bạn có thể tùy chỉnh thêm các cài đặt khác như ngôn ngữ, theme (light hoặc dark).
Nhấn nút “Save Changes”.

Bước 4: Kiểm Tra reCAPTCHA trên Form Comment

Truy cập một bài viết trên trang web của bạn và kiểm tra form comment. Bạn sẽ thấy reCAPTCHA “Tôi không phải là robot” checkbox xuất hiện.

Cách Thêm reCAPTCHA v3 vào Form Comment WordPress

Việc tích hợp reCAPTCHA v3 phức tạp hơn một chút so với v2 vì bạn cần phải xử lý điểm số và thực hiện các hành động dựa trên điểm số đó.

Bước 1: Đăng Ký reCAPTCHA v3

Truy cập trang web Google reCAPTCHA: https://www.google.com/recaptcha/admin/create
Đăng nhập bằng tài khoản Google của bạn.
Điền thông tin chi tiết:
- Label: Nhập tên cho reCAPTCHA của bạn (ví dụ: “Website của tôi – Bình luận v3”).
- reCAPTCHA type: Chọn “reCAPTCHA v3”.
- Domains: Nhập tên miền website của bạn (ví dụ: example.com).
- Chấp nhận điều khoản và điều kiện.
- Nhấn nút “Submit”.
Bạn sẽ nhận được Site Key và Secret Key. Hãy lưu trữ chúng cẩn thận.

Bước 2: Sử Dụng Plugin hoặc Thêm Code Thủ Công

Bạn có thể sử dụng một plugin hỗ trợ reCAPTCHA v3 hoặc thêm code trực tiếp vào theme của bạn.

Sử dụng Plugin: Một số plugin như “Invisible reCaptcha” hoặc plugin chuyên dụng cho reCAPTCHA v3 sẽ hỗ trợ bạn tích hợp dễ dàng hơn. Hãy làm theo hướng dẫn của plugin.

Thêm Code Thủ Công: Cách này yêu cầu bạn chỉnh sửa theme của bạn, do đó cần cẩn thận và có kiến thức về code.

Thêm Script reCAPTCHA vào Header: Thêm đoạn code sau vào file `header.php` của theme (trước thẻ “):
```
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
```
Thay thế `YOUR_SITE_KEY` bằng Site Key của bạn.

Lấy Token reCAPTCHA khi Form được Submit: Trong file `comments.php` hoặc file chứa form comment của bạn, thêm đoạn code JavaScript sau vào form:


        <script>
        document.getElementById('commentform').addEventListener('submit', function(event) {
            event.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute('YOUR_SITE_KEY', {action: 'comment'}).then(function(token) {
                    document.getElementById('recaptchaResponse').value = token;
                    document.getElementById('commentform').submit();
                });
            });
        });
        </script>

Thay thế `YOUR_SITE_KEY` bằng Site Key của bạn.
Đoạn code này sẽ lấy token reCAPTCHA khi form được submit và thêm nó vào một input hidden.

Thêm Input Hidden vào Form: Thêm input hidden sau vào form comment:

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

Xử Lý Token ở Backend: Trong file `functions.php` của theme, thêm code để xác minh token reCAPTCHA khi comment được gửi:


        function verify_recaptcha_comment($commentdata) {
            if ( ! isset( $_POST['recaptcha_response'] ) ) {
                wp_die( 'reCAPTCHA verification failed.' );
            }

            $recaptcha_secret = 'YOUR_SECRET_KEY';
            $recaptcha_response = $_POST['recaptcha_response'];

            $response = wp_remote_post(
                'https://www.google.com/recaptcha/api/siteverify',
                array(
                    'body' => array(
                        'secret' => $recaptcha_secret,
                        'response' => $recaptcha_response,
                        'remoteip' => $_SERVER['REMOTE_ADDR'],
                    ),
                )
            );

            $body = wp_remote_retrieve_body( $response );
            $json = json_decode( $body );

            if ( ! $json->success || $json->score < 0.5 ) {
                wp_die( 'reCAPTCHA verification failed.' );
            }

            return $commentdata;
        }
        add_filter( 'preprocess_comment', 'verify_recaptcha_comment' );

Thay thế `YOUR_SECRET_KEY` bằng Secret Key của bạn.
Điều chỉnh ngưỡng điểm `0.5` theo nhu cầu. Nếu điểm thấp hơn ngưỡng, comment sẽ bị từ chối.

Lời Khuyên và Lưu Ý

Luôn cập nhật plugin: Để đảm bảo tính bảo mật và tương thích, hãy luôn cập nhật plugin reCAPTCHA lên phiên bản mới nhất.
Kiểm tra kỹ sau khi cài đặt: Sau khi cài đặt và cấu hình reCAPTCHA, hãy kiểm tra kỹ form comment để đảm bảo rằng nó hoạt động chính xác và không gây ra lỗi.
Monitor và điều chỉnh: Theo dõi hiệu quả của reCAPTCHA và điều chỉnh cài đặt nếu cần thiết để đạt được sự cân bằng tốt nhất giữa bảo mật và trải nghiệm người dùng.

Việc thêm reCAPTCHA vào form comment WordPress là một bước quan trọng để bảo vệ trang web của bạn khỏi spam và cải thiện trải nghiệm người dùng. Bằng cách làm theo các hướng dẫn trên, bạn có thể dễ dàng tích hợp reCAPTCHA vào website của mình.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa