Xin chào các bạn, ở bài viết này mình sẽ giới thiệu về Google reCaptcha và cách chèn nó vào Form đăng nhập đăng ký của 1 website WordPress nhé. Với các site làm bằng mã nguồn khác, bạn cũng có thể tham khảo bài viết này để thực hiện. Nếu có gì khó khăn, hay liên hệ tôi sẵn sàng trợ giúp.
Google reCAPTCHA là gì?
Google reCAPTCHA là một dịch vụ Captcha miễn phí có khả năng chống spam, chống bot tự động thực hiện hành động trên form của website. Google reCAPTCHA với giao diện đơn giản, độ bảo mật cao và có thể dễ dàng tích hợp vào blog hoặc website của bạn.
Google reCAPTCHA đã trải qua 3 phiên bản chính thức:
- Bản reCAPTCHA v1: là các ký tự được bóp méo mó khó nhìn
- Bản reCAPTCHA v2: là những hình ảnh như biển báo, đèn giao thông, cửa hàng, … hoặc check box vào ô reCaptcha
- Bản reCAPTCHA v3: phiên bản mới nhất hiện tại cực kỳ thông mình, nó hoạt động ngầm và ngăn chặn gần như tuyệt đối các bot spam
Để tìm hiểu kỹ hơn về Google reCAPTCHA hãy truy cập https://www.google.com/recaptcha/intro/
Trước khi thực hiện việc chèn Google reCAPTCHA cho form, phải chắc chắn rằng bạn đã biết cách đăng ký. Tham khảo bài viết này của tôi nhé 🙂 Hướng dẫn cách đăng ký Google reCAPTCHA 2020
Chèn Google reCAPTCHA cho form
Thêm javascript của Google vào trang đăng nhập, đăng ký của wordpress
Ta sử dụng add_action() của wordpress để thêm bằng cách dán đoạn code sau vào file functions.php của theme đang sử dụng. Nên sử dụng Child-theme để có thể còn update theme chính được. Nên đọc: Cách tạo Child Theme WordPress
add_action('login_enqueue_scripts', function () {
wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js?hl=vi');
});Google sẽ tự nhận ngôn ngữ để hiển thị, nhưng bạn muốn cố định 1 ngôn ngữ nào đó có thể thêm ?hl= vào cuối như đoạn code mình viết ở trên. Google reCAPTCHA hỗ trợ hơn 40 ngôn ngữ khác nhau. Xem thêm các ngôn ngữ khác tại đây
Thêm field mới vào cho form đăng nhập, đăng ký
Sử dụng action hook “login_form” để thêm cho form đăng nhập và “register_form” để thêm cho form đăng ký. Thêm code như sau vào fle functions.php.
if (!is_user_logged_in()) {
add_action('login_form', 'hkt_recaptcha_field');
add_action('register_form', 'hkt_recaptcha_field');
}
function hkt_recaptcha_field()
{
$sitekey = '--Your site key--';
echo '<div class="g-recaptcha" data-sitekey="' . $sitekey . '"></div>';
}Thay –Your site key– bằng Site key của bạn.
Viết function và móc function này vào xử lý kết quả cho Form
Code như sau:
if (!is_user_logged_in()) {
add_filter('wp_authenticate_user', 'hkt_verify_recaptcha_on_login_register', 10, 3);
add_filter('registration_errors', 'hkt_verify_recaptcha_on_login_register', 10, 3);
}
function hkt_verify_recaptcha_on_login_register($user = null, $password = null)
{
$secretkey = "--Your secret key--";
if (isset($_POST['g-recaptcha-response'])) {
$response = wp_remote_get('https://www.google.com/recaptcha/api/siteverify?secret=' . $secretkey . '&response=' . $_POST['g-recaptcha-response'] . '&remoteip=' . $_SERVER['REMOTE_ADDR']);
$response = json_decode($response['body'], true);
if (true == $response['success']) {
return $user;
} else {
return new WP_Error('Captcha Invalid', __('ERROR: You are a bot'));
}
} else {
return new WP_Error('Captcha Invalid', __('ERROR: You are a bot. If not then enable JavaScript.'));
}
}Hãy thay –Your secret key– thành mã Secret của bạn nhé.
Giải thích:
- https://www.google.com/recaptcha/api/siteverify: đây chính là API Request của Google cho bạn.
- secret,response,remoteip: các tham số giúp google xác định được có đúng là người dùng hay không hay Boot.
- true == $response[‘success’] {}: Nếu xác định là người dùng trả về là đúng thì tiếp tục form xử lý đăng nhập, đăng ký.
- else{}: Nếu xác định là người dùng trả về là sai thì dừng xử lý form.
- add_action() và add_filter(): Các hook của wordpress
- if (!is_user_logged_in()): để kiểm tra xem người dùng đăng nhập chưa.
Kết quả đạt được:
Chúc các bạn thành công!
