Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

Thêm reCAPTCHA vào form đăng nhập đăng ký Wordpress không cần dùng Plugin bảo vệ website an toàn hơn, giúp bạn nâng cao kiến thức lập trình về Wordpress

Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress
3 (60.94%) 127 votes
Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

Sau khi mình làm 3 bài viết hướng dẫn tạo trang Đăng nhập, Đăng ký, Đăng bài cho wordpress không cần dùng plugin, có khá nhiều bình luận hỏi cách tích hợp thêm reCAPTCHA vào để chống Spam. Vậy nên bài này mình sẽ giúp các bạn giải quyết được vấn đề trên.

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin

Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress

– Đầu tiên các bạn truy cập trang web này:
https://www.google.com/recaptcha/admin

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin1
– Nhập Label và Domain bạn cần thêm reCAPTCHA rồi chọn Register

– Sau khi chọn Register Google sẽ cho bạn các thông tin sau:
them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin2

Link Script

<script src='https://www.google.com/recaptcha/api.js'></script>

Đoạn script trên chèn vào giữa cặp thẻ

<head> </head>

nằm trong file header.php ở thư mục theme bạn đang dùng

Đoạn HTML

<div class="g-recaptcha" data-sitekey="6Le8DSETAAAAAK6JTk-zJyah8ZH-ujGzeYbbbyDL"></div>

Đoạn HTML này chèn vào trong form bạn cần thêm reCAPTCHA

Site key

6Le8DSETAAAAAK6JTk-zJyah8ZH-ujGzeYbbbyDL

Đoạn này chính là data-sitekey ở đoạn HTML bên trên

Secret key
6Le8DSETAAAAAPz2a2H9bewOu-UtaqZ1x5eePU73
Đoạn mã này rất quan trọng nó để check tham số Secret xem có trùng đoạn mã bên trên hay không

Bây giờ bạn mở file đăng ký đăng nhập hoặc đăng bài của bạn cần thêm reCAPTCHA
Phần xử lý form bạn cần thêm các đoạn code này :

if(isset($_POST['g-recaptcha-response'])){
  $vnkings_tut_captcha=$_POST['g-recaptcha-response'];
}
if(!$vnkings_tut_captcha){
  echo 'Bạn chưa xác thực reCAPTCHA!.</h2>';
  exit;
}
$kiemtra=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Ma_Secret_Cua_Ban&response=".$vnkings_tut_captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($kiemtra.success==false) {
  echo 'Bạn đang làm gì vậy ?';
  exit;
}else{
// code xử lý đăng ký
}

Hãy thay Ma_Secret_Cua_Ban thành mã Secret bên trên của bạn

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
  • if($kiemtra.success==false){}: Nếu xác định là người dùng trả về là sai thì dừng xử lý form đăng ký
  • else{}: tiếp tục form xử lý đăng nhập, đăng ký, hoặc đăng bài…

Cuối cùng: đây là ví dụ tổng quan cho trang đăng ký thành viên của mình:

them-recaptcha-vao-form-dang-nhap-dang-ky-wordpress-khong-can-plugin

<?php
/*
 Template Name: Đăng Ký
 */
 ?>
<?php get_header();?>
<?php if(is_user_logged_in()) { $user_id = get_current_user_id();$current_user = wp_get_current_user();$profile_url = get_author_posts_url($user_id);$edit_profile_url  = get_edit_profile_url($user_id); ?>
	<span>Chào <a class="text-warning" href="<?php echo $profile_url ?>"><?php echo $current_user->display_name; ?></a>!, Bạn đã có tài khoản, bạn có muốn <a class="text-primary" href="<?php echo wp_logout_url( get_permalink() ); ?>">thoát</a> tài khoản này không ?</span>
	<?php } else { ?>
		<div class="dangkytaikhoan">	
			<?php
			$err = '';
			$success = '';
			global $wpdb, $PasswordHash, $current_user, $user_ID;
			if(isset($_POST['task']) && $_POST['task'] == 'register') {	
				$pwd1 = $wpdb->escape(trim($_POST['pwd1']));
				$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
				$email = $wpdb->escape(trim($_POST['email']));
				$username = $wpdb->escape(trim($_POST['username']));
				
				// Xác Thực reCAPTCHA
				if(isset($_POST['g-recaptcha-response'])){
				$vnkings_tut_captcha=$_POST['g-recaptcha-response'];
				}
				if(!$vnkings_tut_captcha){
				  echo 'Bạn chưa xác thực reCAPTCHA!.';
				  exit;
				}
				$kiemtra=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=Ma_Secret_Cua_Ban=".$vnkings_tut_captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
				if($kiemtra.success==false) {
				  echo 'Bạn đang làm gì vậy ?';
				  exit;
				}
				// Kết thúc reCAPTCHA
				
				if( $email == "" || $pwd1 == "" || $pwd2 == "" || $username == "") {
					$err = 'Vui lòng không bỏ trống những thông tin bắt buộc!';
				} else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
					$err = 'Địa chỉ Email không hợp lệ!.';
				} else if(email_exists($email) ) {
					$err = 'Địa chỉ Email đã tồn tại!.';
				} else if($pwd1 <> $pwd2 ){
					$err = '2 Password không giống nhau!.';        
				} else if (!isset( $_POST['post_nonce_field'] ) && wp_verify_nonce( $_POST['post_nonce_field'], 'post_nonce' )){
					$err = 'Bạn đang làm gì vậy ?';
				} else {
					$user_id = wp_insert_user( array ('user_pass' => apply_filters('pre_user_user_pass', $pwd1), 'user_login' => apply_filters('pre_user_user_login', $username), 'user_email' => apply_filters('pre_user_user_email', $email), 'role' => 'subscriber' ) );
					if( is_wp_error($user_id) ) {
						$err = 'Error on user creation.';
					} else {
						do_action('user_register', $user_id);
						$success = 'Bạn đã đăng ký thành công!';
					}
				}
			}
			?>
			<div id="message">
				<?php
					if(! empty($err) ) :
						echo '<p class="bg-danger text-danger col-md-12">'.$err.'</p>';
					endif;
				?>
				<?php
					if(! empty($success) ) :
						echo '<p class="bg-success text-success col-md-12">'.$success.'</p>';
					endif;
				?>
			</div>
			<form class="form-horizontal" method="post" role="form">
				<div class="form-group">
					<label class="control-label  col-sm-3" for="username">Tên đăng nhập:</label>
					<div class="col-sm-6">
					<input type="text" class="form-control" name="username" id="username" placeholder="Tên Đăng nhập">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="email">Email:</label>
					<div class="col-sm-6">
						<input type="email" class="form-control" name="email" id="email" placeholder="Email">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="pwd1">Password:</label>
					<div class="col-sm-6">
						<input type="password" class="form-control" name="pwd1" id="pwd1" placeholder="Nhập password">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-3" for="pwd2">Nhập lại Pass:</label>
					<div class="col-sm-6">
						<input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="Nhập lại password">
					</div>
				</div>
				<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
				<div class="g-recaptcha" data-sitekey="Ma_Site_key_Cua_Ban"></div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-9">
					<button type="submit" class="btn btn-primary">Đăng ký</button>
					<input type="hidden" name="task" value="register" />
					</div>
				</div>
			</form>
			
		</div>
	<?php } ?>
<?php get_footer();?>

Nếu đã thử mà Bạn không tự làm được, hãy để lại comment cho Mình để chúng ta cùng giải quyết!
Chúc các bạn thành công!

Bài liên quan

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?