Thêm Google reCAPTCHA vào form Đăng nhập – Đăng ký mặc định của Wordpress

Ở bài viết trước mình đã hướng dẫn các bạn thêm google recaptcha vào form bình luận mặc định của wordpress. Và sau đó được nhiều bạn hỏi cách móc thêm vào form đăng nhập – đăng ký mặc định của wordpress.

Bước 1: dùng add_action() để thêm javascript của google vào trang đăng nhập – đăng ký

Việc đầu tiên là bạn thêm đoạn code dưới đây vào file functions.php (nhớ dùng child-theme để sau này update theme chính được nhé).
Code dưới đây sẽ  thêm script của google vào trang đăng nhập – đăng ký mặc định của wordpress.

add_action('login_enqueue_scripts', function() {
    wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js');
});

Bước 2: Tạo field mới để thêm vào form đăng nhập – đăng ký của wordpress

Các bạn tiếp tục thêm code như ảnh trên vào functions.php của theme với phần bôi đen trong ảnh là Site key mà các bạn có được từ lúc tạo site trên google ở bài trước mình có hướng dẫn. các bạn có thể xem lại tại đây.

Sau khi thêm đoạn trên xong chúng ta sẽ tiếp tục sử dụng hai add_action() để móc field vừa tạo này vào form đăng nhập – đăng ký. Nhưng hãy khoan làm việc này, công đoạn này sẽ được thực hiện sau cùng để cho gọn code nhất có thể.

Bước 3: Tạo function xử lý kết quả google recaptcha

function verify_recaptcha_on_login_register($user = null, $password = null) {
    $secretkey = "6xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxN";
    if (isset($_POST['g-recaptcha-response'])) {
		$response = wp_remote_get( 'https://www.google.com/recaptcha/api/siteverify?secret='.$secretkey.'&response=' . $_POST['g-recaptcha-response'] );

		$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.') );
    }
}

Ở đây mình sẽ không giải thích nhiều về function này. các bạn chỉ đơn giản là thêm vào functions.php của theme và thay thế Secret key của các bạn vào là được.

Bước 4: Móc field và function đã tạo ở bước 2 – bước 3 vào form đăng nhập – đăng ký

if (!is_user_logged_in()) {
	add_action( 'login_form', 'recaptcha_field_login_register' );
	add_filter( 'wp_authenticate_user', 'verify_recaptcha_on_login_register', 10,3 );
	add_action( 'register_form', 'recaptcha_field_login_register' );
	add_filter( 'registration_errors', 'verify_recaptcha_on_login_register', 10, 3 );
}

Tại đây bạn sẽ thấy mình sử dụng hai add_action() và hai add_filter()
Hai hàm này sẽ có nhiệm vụ thêm field check recaptcha vào form đăng nhập – đăng ký của wordpress đồng thời xử lý dữ liệu khi người dùng đăng nhập – đăng ký.
Và trên hết hàm if() để check là người dùng đã đăng nhập chưa. tránh trường hợp đã đăng nhập mà vẫn bắt nhập recaptcha.

Thành quả:

Leave a Reply

Your email address will not be published. Required fields are marked *