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
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.
– Đầu tiên các bạn truy cập trang web này:
https://www.google.com/recaptcha/admin
– 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:
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ạnsecret,response,remoteip: các tham số giúp google xác định được có đúng là người dùng hay không hay Bootif($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:
<?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
- Đưa trình soạn thảo WordPress 5.0 về phiên bản cũ không dùng plugin
- Thêm chức năng lọc theo Meta Fields trong Dashboard WordPress
- Sửa lỗi không hiển thị Page Template để chọn khi tạo Trang ở WordPress version 4.9
- Quản lý thời gian hoạt động cho Vip Member trong WordPress
- Hiển thị bài viết mới theo Category trong WordPress
- Tự tùy biến trang Single theo Category trong WordPress
- Tạo giao diện khác nhau cho từng Category trong WordPress
- Thêm văn bản mặc định vào khung soạn thảo wordpress
Bình luận bài viết
Dịch vụ
- Thiết kế website
- Tối ưu Code, tối ưu SEO
- Code chức năng Nâng cao
- Viết Plugin theo yêu cầu
Bài viết rất hay. Tks bạn đã chia sẻ
Mình thì dùng phép cộng lớp 1 cho bước đăng nhập. Cũng hạn chế được đáng kể mấy chú xài tool dò pass 🙂
@Kevin bạn thêm 1 lớp kiểu j vây? Chứ dùng nhiều plugin quá nặng site
phần đăng ký và và phần gõ capcha bị lệch nhau (không thẳng hàng) thì phải làm thế nào hả anh?
bạn ơi! cho mình hỏi đoạn Secret key: 6Le8DSETAAAAAPz2a2H9bewOu-UtaqZ1x5eePU73 chèn vào vị trí nào vậy
Bạn chèn vào vị trí này này
Thay bằng:
không thể validate được a ơi 🙁
Em không dùng WordPress nên anh không chắc em làm đúng các bước em ạ.
code copy vào đâu vậy mọi người? ai giúp e với,e k làm đc
code copy cho vào đâu đây mọi người? ai giúp e với,e k làm được
Chào bạn, nếu bạn đã từng làm trang đăng ký với hướng dẫn này: https://wordpress.vnkings.com/huong-dan-tao-trang-dang-ky-cho-wordpress-khong-can-plugin.html
Thì bạn mới áp dụng được code trên bạn nhé.
Chào anh, em có một website cũ (aaa.vip) do một đơn vị thiết kế website có sử dụng recaptcha khi login vào form đăng nhập admin. Tuy nhiên, hiện nay mình có copy source nhân bản website cho tên miền mới (bbb.com) thì khi truy cập vào admin thì trắng trang. đường linktham khảo: https://www.bbb.com/wp-admin/ và một báo lỗi reCaptcha https://www.aaa.vip/wp-login.php?loggedout=true. Anh xem giúp mình thử cách khắc phục như thế nào nhé!
Nếu nhận được sự giúp đỗ của anh, thành thật Cảm ơn anh nhiều!
Chào bạn, mỗi mã Recaptcha khi lấy từ Google sẽ đi kèm với domain mà bạn đăng ký.
Vậy nên bạn vào Google đăng ký domain mới, sau đó tìm Site key và Secret key để thay mã của domain mới là được.
Nhưng này tránh được tình trạng spam đăng nhập cho website, bên mình thường xuyên bị tấn công theo cách này!
Đơn giản hơn các bạn dùng plugin all in one sercurity, nhanh gọn đơn giản