Một số trang web cho phép người dùng xóa tài khoản của mình và nhiều trang thì không.
Nếu trang web của bạn chạy trên WordPress, bạn có thể biết rằng không có phương pháp tích hợp nào cho phép người dùng của bạn xóa tài khoản của chính họ.
Cách duy nhất để xóa tài khoản đó là quản trị viên xóa tài khoản theo cách thủ công thông qua quyền quản trị WordPress hoặc bằng cách xóa trực tiếp tài khoản khỏi cơ sở dữ liệu (không được khuyến nghị).
Trong hướng dẫn này, chúng tôi sẽ thiết lập một phương pháp cho phép người dùng xóa tài khoản của họ trên các trang web WordPress theo trình tự sao:
1. Chúng ta sẽ tạo một short code sẽ xuất ra nút Xóa Tài Khoản. Điều này sẽ cho phép người dùng xóa tài khoản của họ trên giao diện người dùng.
2. Click vào nút xóa tài khoản sẽ nhắc người dùng xác nhận hành động của mình thông qua một popup.
3. Sau khi gửi lời nhắc thành công, chúng tôi sẽ gửi yêu cầu xóa tài khoản qua AJAX. Khi quá trình xóa được xử lý, chúng tôi sẽ gửi phản hồi, hiển thị phản hồi cho người dùng, sau đó chuyển hướng người dùng đến trang chủ của chúng tôi.
Bắt đầu.
Bước 1 - Tạo nút xóa tài khoản
Trước tiên, hãy bắt đầu dễ dàng bằng cách tạo nút "Xóa tài khoản" bằng đoạn code này vào functions.php của theme. Đây là code:
function wp_delete_user_account_delete_button( $button_text = '' ) {
// Bail if user is logged out
if ( ! is_user_logged_in() ) {
return;
}
// Bail to prevent administrators from deleting their own accounts
if ( current_user_can( 'manage_options' ) ) {
return;
}
// Defauly button text
if ( $button_text == '' ) {
$button_text = __( 'Delete My Account', 'wp-delete-user-accounts' );
}
// Button
printf( '<button id="delete-my-account">%s</button>', $button_text );
}Với chức năng này, chúng ta có thể xuất một nút “Delete My Account” tới bất kỳ vị trí nào chúng ta gọi.
Như bạn có thể thấy, chức năng này chỉ xuất ra nút khi người dùng đã đăng nhập và không phải là quản trị viên, vì chúng tôi không muốn quản trị viên có thể xóa tài khoản của họ và có khả năng mất quyền truy cập vào trang.
Bước 2 - Tạo Shortcode
Tiếp theo, tạo shortcode mà chúng ta có thể sử dụng để hiển thị nút trên giao diện người dùng ở bất cứ đâu. Để làm được vậy bạn có thể thêm code dưới vào functions.php của theme
/**
* Render [wp_delete_user_accounts] shortcode
*/
function wp_delete_user_accounts() {
// Show nothing if user is logged out
if ( ! is_user_logged_in() ) {
return '';
}
// Bail to prevent administrators from deleting their own accounts
if ( current_user_can( 'manage_options' ) ) {
return '';
}
ob_start();
?>
<div class="delete-user-account-container">
<p>Điều này sẽ khiến tài khoản của bạn bị xóa vĩnh viễn. Bạn sẽ không thể khôi phục tài khoản của mình.</p>
<?php wp_delete_user_account_delete_button( 'Xóa Tài Khoản' ); ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'wp_delete_user_accounts','wp_delete_user_accounts' );Ở trên, chúng tôi đang đăng ký shortcode [wp_delete_user_accounts], sau đó hiển thị đầu ra của nó trong wp_delete_user_accounts().
Shortcode này chỉ hiển thị khi người dùng đã đăng nhập và không phải là quản trị viên.
Bước 3 - Tạo cảnh báo cho người dùng
Như tôi đã đề cập trước đó, xóa tài khoản người dùng luôn là một việc nghiêm trọng, ngay cả khi quản trị viên làm điều đó.
Khi người dùng xóa tài khoản của mình, cách duy nhất để lấy lại tài khoản là khôi phục cơ sở dữ liệu trang web của bạn về thời điểm trước khi người dùng xóa tài khoản.
Nếu bạn chạy một trang web với cơ sở dữ liệu thường xuyên được thêm vào (tức là thương mại điện tử, tư cách thành viên, v.v.), đây sẽ là một rắc rối thực sự.
Hiện tại, chúng tôi chỉ muốn hiển thị cảnh báo cho người dùng, sau đó nhắc người dùng xác nhận hành động của mình.
Để làm điều này, chúng tôi sẽ sử dụng một plugin jQuery thực sự mượt mà có tên là Sweet Alert .
Khi nhấp vào nút xóa, người dùng sẽ thấy một cảnh báo, cảnh báo rằng hành động của họ là vĩnh viễn và không thể khôi phục tài khoản của họ.
Sau đó, cảnh báo sẽ yêu cầu một số đầu vào, yêu cầu người dùng nhập từ “DELETE” bằng tất cả các chữ cái viết hoa.
Đây là cảnh báo sẽ trông như thế nào:
Đây là JavaScript / jQuery cho cảnh báo, bạn đặt tại tại “/assets/js/customize.js” trong theme của bạn
jQuery(document).ready(function($) {
/**
* Process request to dismiss our admin notice
*/
$('#delete-my-account').click(function(e) {
e.preventDefault();
// Set the ajaxurl when not in the admin
if ( wp_delete_user_accounts_js.is_admin != 'true' ) {
ajaxurl = wp_delete_user_accounts_js.ajaxurl;
}
// Data to make available via the $_POST variable
data = {
action: 'wp_delete_user_account',
wp_delete_user_accounts_nonce: wp_delete_user_accounts_js.nonce
};
// Send the AJAX POST request
var send = function() {
$.post( ajaxurl, data, function(response) {
if ( typeof( response.status ) != 'undefined' && response.status == 'success' ) {
// Account deleted
swal(
{
title: response.title,
text: response.message,
type: 'success',
timer: 6000
},
function() {
window.location.href = wp_delete_user_accounts_js.redirect_url;
}
);
} else { // Error occurred
swal( response.title, response.message, 'error' );
}
} );
return false;
}
// Main prompt
swal(
{
title: wp_delete_user_accounts_js.alert_title,
text: wp_delete_user_accounts_js.alert_text,
type: 'input',
animation: 'slide-from-top',
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: wp_delete_user_accounts_js.confirm_text,
confirmButtonColor: '#EC5245',
disableButtonsOnConfirm: true,
// showLoaderOnConfirm: true,
// confirmLoadingButtonColor: '#f5f7fa',
inputPlaceholder: wp_delete_user_accounts_js.input_placeholder
},
function(input) {
if ( input !== 'DELETE' ) {
// Input was not correct
swal(
{
title: wp_delete_user_accounts_js.incorrect_prompt_title,
text: wp_delete_user_accounts_js.incorrect_prompt_text,
type: 'error',
showLoaderOnConfirm: false,
}
);
return;
}
// Processing modal
swal(
{
title: wp_delete_user_accounts_js.processing_title,
text: wp_delete_user_accounts_js.processing_text,
type: 'info',
confirmLoadingButtonColor: '#f5f7fa',
showConfirmButton: false
}
);
// Wait 2 seconds and send request
setTimeout(send, 2000);
}
);
});
});Thực sự không có nhiều thứ đối với mã này, vì hầu hết nó đang định cấu hình các phương thức Cảnh báo khác nhau.
Cấu hình yêu cầu AJAX được lưu vào biến send và có hai giây chậm trễ trong việc gửi yêu cầu sau khi người dùng gửi lời nhắc thành công.
Quá trình này diễn ra như sau:
1.) người dùng nhận được cảnh báo về việc xóa tài khoản của họ;
2.) nếu người dùng muốn xóa, họ phải nhập văn bản theo yêu cầu của lời nhắc;
3.) nếu quá trình gửi nhanh thành công, người dùng sẽ thấy phương thức “Đang xử lý…”;
4.) hai giây sau, yêu cầu AJAX được gửi và xử lý, và người dùng sẽ thấy một phương thức kết quả;
5. (nếu yêu cầu thành công (người dùng đã xóa), người dùng sẽ thấy phương thức thành công, sau đó trang sẽ chuyển hướng đến trang chủ sau sáu giây hoặc nếu người dùng nhấp vào “OK” trong phương thức thành công.
Bước 4 - Xử lý yêu cầu AJAX
Cuối cùng, chúng ta cần thực sự cho WordPress biết phải làm gì khi yêu cầu được gửi. Bây giờ, chúng tôi phải thực hiện kiểm tra bảo mật, xóa người dùng và gửi phản hồi trở lại tệp JS chính của chúng tôi để nó có thể hiển thị kết quả cho người dùng.
/**
* Process the request
* @todo Setting for reassigning user's posts
*/
function process_delete_account() {
// Verify the security nonce and die if it fails
if ( ! isset( $_POST['wp_delete_user_accounts_nonce'] ) || ! wp_verify_nonce( $_POST['wp_delete_user_accounts_nonce'], 'wp_delete_user_accounts_nonce' ) ) {
wp_send_json( array(
'status' => 'fail',
'title' => __( 'Lỗi!', 'wp-delete-user-accounts' ),
'message' => __( 'Yêu cầu kiểm tra bảo mật không thành công.', 'wp-delete-user-accounts' )
) );
}
// Don't permit admins to delete their own accounts
if ( current_user_can( 'manage_options' ) ) {
wp_send_json( array(
'status' => 'fail',
'title' => __( 'Lỗi!', 'wp-delete-user-accounts' ),
'message' => __( 'Quản trị viên không thể xóa tài khoản của chính họ.', 'wp-delete-user-accounts' )
) );
}
// Get the current user
$user_id = get_current_user_id();
// Get user meta
$meta = get_user_meta( $user_id );
// Delete user's meta
foreach ( $meta as $key => $val ) {
delete_user_meta( $user_id, $key );
}
// Destroy user's session
wp_logout();
// Delete the user's account
$deleted = wp_delete_user( $user_id );
if ( $deleted ) {
// Send success message
wp_send_json( array(
'status' => 'success',
'title' => __( 'Thành Công!', 'wp-delete-user-accounts' ),
'message' => __( 'Tài khoản của bạn đã được xóa thành công', 'wp-delete-user-accounts' )
) );
} else {
wp_send_json( array(
'status' => 'fail',
'title' => __( 'Lỗi!', 'wp-delete-user-accounts' ),
'message' => __( 'Yêu cầu không thành công.', 'wp-delete-user-accounts' )
) );
}
}
add_action( 'wp_ajax_wp_delete_user_account', 'process_delete_account' );Đây là những gì đang xảy ra:
- Kiểm tra xem hệ thống bảo mật có đúng không và gửi phản hồi lỗi nếu không.
- Kiểm tra xem người dùng có phải là quản trị viên hay không và gửi phản hồi lỗi nếu có. Điều này là không cần thiết vì nút sẽ không được hiển thị và các tệp bắt buộc sẽ không được thêm vào, nếu người dùng là quản trị viên. Tôi bao gồm kiểm tra này chỉ để thêm một lớp khác và nhấn mạnh lại rằng chúng tôi không muốn quản trị viên xóa tài khoản của chính họ.
- Nhận người dùng hiện tại và meta người dùng của họ.
- Lặp qua tất cả meta người dùng và xóa nó khỏi cơ sở dữ liệu. Phần này sẽ loại bỏ tất cả thông tin của người dùng.
- Đăng xuất người dùng khỏi tài khoản của họ.
- Xóa người dùng khỏi cơ sở dữ liệu.
- Nếu người dùng đã được xóa thành công, hãy gửi phản hồi thành công. Nếu không, hãy gửi phản hồi lỗi.
Bước 5 - Thêm thư viện JS và CSS
Cuối cùng là bạn cần theo JS, CSS chỉ riêng trang người dùng và ẩn đi nếu là admin bằng đoạn code dưới dây trong functions.php
function add_theme_scripts_delete_account() {
if ( ! defined( 'CHILD_THEME_URL' ) ) {
define( 'CHILD_THEME_URL', get_stylesheet_directory_uri());
}
// Bail if user is logged out
if ( ! is_user_logged_in() ) {
return;
}
// Bail to prevent administrators from deleting their own accounts
if ( current_user_can( 'manage_options' ) ) {
return;
}
global $post;
$confirm_text = apply_filters( 'wp_delete_user_account_confirm_delete_text', __( 'DELETE', 'wp-delete-user-accounts' ) );
$vars = apply_filters( 'wp_delete_user_accounts_localize_script_vars', array(
'alert_title' => __( 'Xin chào!', 'wp-delete-user-accounts' ),
'alert_text' => __( 'Sau khi bạn xóa tài khoản của mình, sẽ không lấy lại được. Hãy chắc chắn rằng bạn muốn làm điều này.', 'wp-delete-user-accounts' ),
'confirm_text' => $confirm_text,
'button_confirm_text' => __( 'Đúng, Vui lòng xóa nó', 'wp-delete-user-accounts' ),
'button_cancel_text' => __( 'Hủy', 'wp-delete-user-accounts' ),
'incorrect_prompt_title' => __( 'Lỗi', 'wp-delete-user-accounts' ),
'incorrect_prompt_text' => __( 'Xác nhận của bạn không chính xác.', 'wp-delete-user-accounts' ),
'general_error_title' => __( 'Lỗi', 'wp-delete-user-accounts' ),
'general_error_text' => __( 'Đã xảy ra sự cố.', 'wp-delete-user-accounts' ),
'processing_title' => __( 'Đang thực thi...', 'wp-delete-user-accounts' ),
'processing_text' => __( 'Chờ một chút trong khi chúng tôi xử lý yêu cầu của bạn.', 'wp-delete-user-accounts' ),
'input_placeholder' => sprintf( '%s %s', __( 'Xác nhận bằng cách gõ', 'wp-delete-user-accounts' ), $confirm_text ),
'redirect_url' => home_url()
) );
$vars['nonce'] = wp_create_nonce( 'wp_delete_user_accounts_nonce' );
if ( is_admin() && get_current_screen()->base == 'profile' ) {
wp_enqueue_style( 'wp-delete-user-accounts-css', CHILD_THEME_URL . '/assets/css/wp-delete-user-accounts.css', '', '1.0.0' );
wp_enqueue_script( 'sweetalert-js', CHILD_THEME_URL . '/assets/js/sweetalert.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'wp-delete-user-accounts-js', CHILD_THEME_URL . '/assets/js/wp-delete-user-accounts.js', array( 'jquery', 'sweetalert-js' ), '1.0.0', true );
wp_localize_script( 'wp-delete-user-accounts-js', 'wp_delete_user_accounts_js', array_merge( $vars, array( 'is_admin' => 'true' ) ) );
} elseif ( apply_filters( 'wp_delete_user_accounts_load_assets_on_frontend', ( is_object( $post ) && has_shortcode( $post->post_content, 'wp_delete_user_accounts' ) ) ) ) {
wp_enqueue_style( 'wp-delete-user-accounts-css', CHILD_THEME_URL . '/assets/css/wp-delete-user-accounts.css', '', '1.0.0' );
wp_enqueue_script( 'sweetalert-js', CHILD_THEME_URL . '/assets/js/sweetalert.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'wp-delete-user-accounts-js', CHILD_THEME_URL . '/assets/js/wp-delete-user-accounts.js', array( 'jquery', 'sweetalert-js' ), '1.0.0', true );
wp_localize_script( 'wp-delete-user-accounts-js', 'wp_delete_user_accounts_js', array_merge( $vars, array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ) );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts_delete_account' );wp-delete-user-accounts.css bên trong bao gồm thư viện sweet alert và đoạn code :
button#delete-my-account {
background: #EC5245;
border: none;
color: #fff;
font-size: 18px;
padding: 10px;
}
button#delete-my-account:hover {
cursor: pointer;
}
