Bài Viết

Sharecode bắt buộc xác minh tài khoản người dùng qua OTP gmail miễn phí

Đăng vào Tháng mười một 4, 2024Tháng mười một 7, 2024 bởi admin

admin

04/11/2024

7 Phút đọc

200 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Chào mừng bạn đến với thế giới “xác minh” – nơi mỗi cú click là một niềm vui và mỗi mã OTP là một “bí kíp thần kỳ”! Chắc hẳn bạn đang tìm cách triển khai tính năng OTP xác minh tài khoản sao cho dễ dùng mà vẫn bảo mật. Hãy cùng nhau “hack” chút niềm vui vào tính năng này nhé!

sharecode bat buoc xac minh tai khoan mien phi 2

1. Tạo Shortcode OTP Verification Form (Mẫu Xác Minh OTP)

Shortcode này sẽ giúp bạn tạo ra một mẫu xác minh OTP để khách hàng có thể nhập mã vào, với giao diện dễ thương và thân thiện như những món quà bất ngờ. Chỉ cần thả shortcode này vào bất cứ nơi nào bạn muốn hiển thị mẫu OTP, và khách hàng sẽ cảm thấy mình đang bước vào một trò chơi thú vị hơn là một thủ tục xác minh khô khan.

add_shortcode('otp_verification_form', 'otp_verification_form_shortcode');
function otp_verification_form_shortcode() {
    ob_start();
    ?>
  <style>
        #otp-verification-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        #otp-form {
            display: none;
            margin-top: 15px;
        }
        #otp-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        #otp-form input[type="text"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #otp-form input[type="submit"] {
            background-color: #3085d6;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        #otp-form input[type="submit"]:hover {
            background-color: #2874a6;
        }
        #send-otp-btn, #resend-otp-btn {
            background-color: #3085d6;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        #send-otp-btn:hover, #resend-otp-btn:hover {
            background-color: #2874a6;
        }
        #countdown {
            margin-top: 15px;
            font-size: 16px;
            color: #ff0000;
        }
    </style>
    <div id="otp-verification-container">
        <form id="otp-form" method="post" style="display: none;">
            <input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr($_GET['user_id']); ?>">
            <label for="otp"><?php _e('Nhập mã OTP của bạn'); ?></label>
            <input type="text" id="otp" name="otp" required>
            <input type="submit" name="submit_otp" value="<?php _e('Xác minh'); ?>">
        </form>
        <button id="send-otp-btn"><?php _e('Gửi mã OTP'); ?></button>
        <button id="resend-otp-btn" style="display: none;"><?php _e('Gửi lại mã OTP'); ?></button>
        <div id="countdown" style="display: none;"></div>
    </div>
    <?php
    return ob_get_clean();
}

add_shortcode('otp_verification_form', 'otp_verification_form_shortcode');

function otp_verification_form_shortcode() {

ob_start();

<style>

#otp-verification-container {

max-width: 400px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #f9f9f9;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

#otp-form {

display: none;

margin-top: 15px;

}

#otp-form label {

display: block;

margin-bottom: 8px;

font-weight: bold;

}

#otp-form input[type="text"] {

width: calc(100% - 20px);

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ddd;

border-radius: 4px;

}

#otp-form input[type="submit"] {

background-color: #3085d6;

color: #fff;

border: none;

padding: 10px 20px;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

}

#otp-form input[type="submit"]:hover {

background-color: #2874a6;

}

#send-otp-btn, #resend-otp-btn {

background-color: #3085d6;

color: #fff;

border: none;

padding: 10px 20px;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

}

#send-otp-btn:hover, #resend-otp-btn:hover {

background-color: #2874a6;

}

#countdown {

margin-top: 15px;

font-size: 16px;

color: #ff0000;

}

</style>

</form>

</div>

<?php

return ob_get_clean();

}

2. Kịch Bản JavaScript – Đếm Ngược và Gửi Mã OTP

Cái này là phần “ma thuật” sẽ khiến trải nghiệm xác minh OTP trở nên thú vị. Bằng cách thêm một bộ đếm ngược, chúng ta tạo cảm giác hồi hộp, giống như đang chờ một tin nhắn bí mật! Hãy chắc chắn bạn đã thêm JavaScript để kích hoạt nút gửi mã OTP và nút gửi lại OTP.

add_action('wp_footer', 'otp_verification_scripts');
function otp_verification_scripts() {
    if (is_page('verify-account')) { // Chỉ áp dụng cho trang xác minh
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const sendOtpBtn = document.getElementById('send-otp-btn');
                const resendOtpBtn = document.getElementById('resend-otp-btn');
                const countdownDiv = document.getElementById('countdown');
                const otpForm = document.getElementById('otp-form');
                const userId = document.getElementById('user_id').value;

                function sendOtp() {
                    countdownDiv.style.display = 'block';
                    let countdown = 60;

                    const interval = setInterval(function () {
                        countdownDiv.textContent = `Vui lòng chờ để chúng tôi gửi mã OTP trong ${countdown} giây!`;
                        countdown--;

                        if (countdown < 0) {
                            clearInterval(interval);
                            countdownDiv.textContent = 'Gửi mã OTP rồi đó, kiểm tra email nha!';
                            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                body: new URLSearchParams({
                                    action: 'send_otp_via_ajax',
                                    user_id: userId
                                })
                            }).then(response => response.text()).then(result => {
                                countdownDiv.textContent = 'Mã OTP đã được gửi đến email của bạn.';
                                otpForm.style.display = 'block';
                                sendOtpBtn.style.display = 'none';
                                resendOtpBtn.style.display = 'block';
                                localStorage.setItem('last_otp_time', new Date().getTime());
                            }).catch(error => {
                                countdownDiv.textContent = 'Đã xảy ra lỗi. Vui lòng thử lại.';
                            });
                        }
                    }, 1000);
                }

                sendOtpBtn.addEventListener('click', sendOtp);

                resendOtpBtn.addEventListener('click', function () {
                    const lastOtpTime = localStorage.getItem('last_otp_time');
                    if (lastOtpTime && (new Date().getTime() - lastOtpTime < 60000)) {
                        alert('Vui lòng chờ ít nhất 1 phút trước khi gửi lại mã OTP.');
                        return;
                    }
                    sendOtp();
                });

                const lastOtpTime = localStorage.getItem('last_otp_time');
                if (lastOtpTime && (new Date().getTime() - lastOtpTime < 60000)) {
                    resendOtpBtn.style.display = 'block';
                }
            });
        </script>
        <?php
    }
}

add_action('wp_footer', 'otp_verification_scripts');

function otp_verification_scripts() {

if (is_page('verify-account')) { // Chỉ áp dụng cho trang xác minh

document.addEventListener('DOMContentLoaded', function () {

const sendOtpBtn = document.getElementById('send-otp-btn');

const resendOtpBtn = document.getElementById('resend-otp-btn');

const countdownDiv = document.getElementById('countdown');

const otpForm = document.getElementById('otp-form');

const userId = document.getElementById('user_id').value;

function sendOtp() {

countdownDiv.style.display = 'block';

let countdown = 60;

const interval = setInterval(function () {

countdownDiv.textContent = `Vui lòng chờ để chúng tôi gửi mã OTP trong ${countdown} giây!`;

countdown--;

if (countdown < 0) {

clearInterval(interval);

countdownDiv.textContent = 'Gửi mã OTP rồi đó, kiểm tra email nha!';

fetch('<?php echo admin_url('admin-ajax.php'); ?>', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

body: new URLSearchParams({

action: 'send_otp_via_ajax',

user_id: userId

})

}).then(response => response.text()).then(result => {

countdownDiv.textContent = 'Mã OTP đã được gửi đến email của bạn.';

otpForm.style.display = 'block';

sendOtpBtn.style.display = 'none';

resendOtpBtn.style.display = 'block';

localStorage.setItem('last_otp_time', new Date().getTime());

}).catch(error => {

countdownDiv.textContent = 'Đã xảy ra lỗi. Vui lòng thử lại.';

});

}

}, 1000);

}

sendOtpBtn.addEventListener('click', sendOtp);

resendOtpBtn.addEventListener('click', function () {

const lastOtpTime = localStorage.getItem('last_otp_time');

if (lastOtpTime && (new Date().getTime() - lastOtpTime < 60000)) {

alert('Vui lòng chờ ít nhất 1 phút trước khi gửi lại mã OTP.');

return;

}

sendOtp();

});

const lastOtpTime = localStorage.getItem('last_otp_time');

if (lastOtpTime && (new Date().getTime() - lastOtpTime < 60000)) {

resendOtpBtn.style.display = 'block';

}

});

</script>

<?php

}

3. Gửi Mã OTP Qua AJAX

Đây là phần mà mọi người thích, khi bạn nhấn vào nút gửi mã OTP, hệ thống sẽ tạo một mã OTP “siêu bí mật” với 10 số, 1 chữ cái và 1 ký tự đặc biệt. Mã OTP này sẽ được gửi qua email của bạn – giống như một sứ mệnh đặc biệt chỉ dành riêng cho bạn vậy!

add_action('wp_ajax_send_otp_via_ajax', 'send_otp_via_ajax');
add_action('wp_ajax_nopriv_send_otp_via_ajax', 'send_otp_via_ajax');
function send_otp_via_ajax() {
    $user_id = intval($_POST['user_id']);
    
    $numbers = '0123456789';
    $letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $special_chars = '!@#$%^&*()_+[]{}|;:,.<>?';
    
    $otp = '';
    $otp .= substr(str_shuffle($numbers), 0, 10); // 10 số
    $otp .= substr(str_shuffle($letters), 0, 1);   // 1 chữ cái
    $otp .= substr(str_shuffle($special_chars), 0, 1); // 1 ký tự đặc biệt
    
    $otp = str_shuffle($otp);
    
    update_user_meta($user_id, 'account_otp', $otp);
    update_user_meta($user_id, 'otp_sent_time', time());

    $user = get_userdata($user_id);
    $subject = "Mã OTP của bạn";
    $message = "Mã OTP của bạn là: $otp";
    wp_mail($user->user_email, $subject, $message);

    wp_die();
}

add_action('wp_ajax_send_otp_via_ajax', 'send_otp_via_ajax');

add_action('wp_ajax_nopriv_send_otp_via_ajax', 'send_otp_via_ajax');

function send_otp_via_ajax() {

$user_id = intval($_POST['user_id']);

$numbers = '0123456789';

$letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

$special_chars = '!@#$%^&*()_+[]{}|;:,.<>?';

$otp = '';

$otp .= substr(str_shuffle($numbers), 0, 10); // 10 số

$otp .= substr(str_shuffle($letters), 0, 1); // 1 chữ cái

$otp .= substr(str_shuffle($special_chars), 0, 1); // 1 ký tự đặc biệt

$otp = str_shuffle($otp);

update_user_meta($user_id, 'account_otp', $otp);

update_user_meta($user_id, 'otp_sent_time', time());

$user = get_userdata($user_id);

$subject = "Mã OTP của bạn";

$message = "Mã OTP của bạn là: $otp";

wp_mail($user->user_email, $subject, $message);

wp_die();

}

4. Xác Minh Mã OTP – Vòng Cuối Cùng Để Chiến Thắng

Phần này là “vòng chung kết” trong cuộc hành trình xác minh OTP. Lúc này, khách hàng của bạn đã nhận mã OTP, và chỉ cần nhập đúng mã để hoàn tất xác minh. Phần này kiểm tra xem mã OTP người dùng nhập có khớp với mã đã gửi qua email không. Nếu đúng và còn trong thời hạn, ta sẽ mở khóa, trao huy chương “Tài khoản đã xác minh” cho họ!

Nếu mã không đúng, hoặc thời gian đã hết hạn, khách hàng sẽ được đưa ra ngoài để thử lại hoặc chờ thêm chút thời gian trước khi gửi lại mã.

add_action('init', 'verify_otp_account');
function verify_otp_account() {
    if (isset($_POST['submit_otp'])) {
        $user_id = intval($_POST['user_id']);
        $otp = sanitize_text_field($_POST['otp']);
        $saved_otp = get_user_meta($user_id, 'account_otp', true);
        $otp_sent_time = get_user_meta($user_id, 'otp_sent_time', true);

        if ($saved_otp && $saved_otp === $otp) {
            // Kiểm tra thời gian hết hạn OTP (ví dụ: 10 phút)
            if (time() - $otp_sent_time > 600) {
                wp_redirect(home_url('/xac-minh-that-bai')); // Hết thời hạn mã OTP
                exit;
            }

            update_user_meta($user_id, 'account_verified', true); // Cập nhật trạng thái xác minh
            delete_user_meta($user_id, 'account_otp');            // Xóa mã OTP đã dùng
            delete_user_meta($user_id, 'otp_sent_time');          // Xóa thời gian gửi mã
            wp_redirect(home_url('/xac-minh-thanh-cong'));        // Chuyển đến trang thành công
            exit;
        } else {
            wp_redirect(home_url('/xac-minh-that-bai'));          // Mã OTP không chính xác
            exit;
        }
    }
}

add_action('init', 'verify_otp_account');

function verify_otp_account() {

if (isset($_POST['submit_otp'])) {

$user_id = intval($_POST['user_id']);

$otp = sanitize_text_field($_POST['otp']);

$saved_otp = get_user_meta($user_id, 'account_otp', true);

$otp_sent_time = get_user_meta($user_id, 'otp_sent_time', true);

if ($saved_otp && $saved_otp === $otp) {

// Kiểm tra thời gian hết hạn OTP (ví dụ: 10 phút)

if (time() - $otp_sent_time > 600) {

wp_redirect(home_url('/xac-minh-that-bai')); // Hết thời hạn mã OTP

exit;

}

update_user_meta($user_id, 'account_verified', true); // Cập nhật trạng thái xác minh

delete_user_meta($user_id, 'account_otp'); // Xóa mã OTP đã dùng

delete_user_meta($user_id, 'otp_sent_time'); // Xóa thời gian gửi mã

wp_redirect(home_url('/xac-minh-thanh-cong')); // Chuyển đến trang thành công

exit;

} else {

wp_redirect(home_url('/xac-minh-that-bai')); // Mã OTP không chính xác

exit;

}

Giải thích chi tiết:

Lấy mã OTP và thời gian gửi từ cơ sở dữ liệu.
So sánh mã OTP đã nhập với mã đã gửi:
- Nếu khớp và thời gian chưa hết hạn (10 phút ở đây), thì xác minh thành công.
- Nếu mã sai hoặc hết thời gian, chuyển hướng đến trang xác minh thất bại.
Cập nhật trạng thái xác minh: Nếu xác minh thành công, trạng thái tài khoản sẽ được đánh dấu là “Đã xác minh”, và mã OTP cũng như thời gian gửi sẽ bị xóa để giữ cho tài khoản gọn gàng và bảo mật.

Với quy trình này, bạn đã hoàn thành việc thiết lập một hệ thống xác minh OTP thân thiện, bảo mật và dễ dùng.

Dưới đây là mã hoàn chỉnh, chỉ cần bỏ vào funtion là được nè, chức mấy iu của chế thành công nhé. Thấy hay hãy cho xin 5 sao ủng hộ tui nhé bà con ơi. Đăng ký tài khoản để xem code hoàn chỉnh nhé bà con

Vui lòng đăng nhập hoặc đăng ký tài khoản để xem nội dung này

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Cách Tạo Các Cuộc Thi Online Để Tăng Truy Cập Website Mới Nhất 2025

Trong thời đại số hóa hiện nay, việc tăng cường truy cập website trở nên cực kỳ quan trọng. Một trong những chiến lược hiệu...
Cách Đo Lường Hiệu Quả Chiến Dịch Marketing Nội Dung

Trong bối cảnh cạnh tranh ngày càng gay gắt, việc đo lường hiệu quả của các chiến dịch marketing nội dung trở thành yếu tố...
Cách Tạo Ra Một Trang Giới Thiệu Ấn Tượng WordPress

Trong bối cảnh cạnh tranh ngày càng gia tăng trên không gian trực tuyến, việc tạo ra một trang giới thiệu ấn tượng là vô...
Hướng Dẫn Xóa Tab WooCommerce Khỏi Trang Sản Phẩm Một Cách Dễ Dàng

Bạn đang sử dụng WooCommerce cho cửa hàng trực tuyến của mình và cảm thấy trang sản phẩm của mình có quá nhiều tab không...
Hướng Dẫn Chi Tiết Cách Sửa Lỗi WordPress Không Được Google Index

Chắc hẳn bạn đang gặp phải tình trạng website WordPress của mình không xuất hiện trên Google, phải không? Điều này không chỉ khiến bạn...
Cách Tạo Biểu Mẫu Đăng Ký Đơn Giản Cho Website Cực Dễ 2025

Trong thế giới số hóa hiện nay, việc tạo một biểu mẫu đăng ký đơn giản cho website là vô cùng cần thiết để thu...
[Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản

Nếu bạn đang tìm cách tối ưu hóa giao diện mô tả sản phẩm trên website WordPress sử dụng Woocommerce, bài viết này sẽ cung...
Chương Trình Khuyến Mãi Mua Theme Tháng 01/2025

Chào đón năm mới 2025, Muathemewpgiare.com hân hạnh mang đến chương trình khuyến mãi mua theme wordpress đặc biệt trong suốt tháng 1 với nhiều...
Mua Website Có Sẵn Mới Nhất 2025

Với sự phát triển mạnh mẽ của internet và thương mại điện tử, việc sở hữu một website trở thành yếu tố then chốt giúp...
Chiến Lược Phát Triển SEO Top 1 Google 2025 Dành Cho Người Mới

SEO (Search Engine Optimization) là một trong những chiến lược quan trọng nhất để đưa website của bạn lên vị trí cao trên Google. Đặc...
Cách Thiết Kế Website Bán Hàng Đạt Hiệu Quả Cao

Việc thiết kế website bán hàng chất lượng không chỉ giúp doanh nghiệp nâng cao uy tín thương hiệu mà còn hỗ trợ mở rộng...
Hướng Dẫn Chọn Mua Theme WordPress Giá Rẻ và Tối Ưu SEO Để Tăng Thứ Hạng Google

Khi xây dựng website trên nền tảng WordPress, một trong những yếu tố quan trọng nhất là lựa chọn theme WordPress giá rẻ phù hợp...
Mua Theme Giá Rẻ và Chọn Theme WordPress Bán Hàng Chuẩn SEO

Khi bạn bắt đầu xây dựng một website với WordPress, việc chọn đúng theme WordPress là yếu tố quan trọng giúp website của bạn không...
Mua Theme WordPress Giá Rẻ – Cập Nhật Các Plugin, Thủ Thuật và Tài Nguyên Shop Mới Nhất

Mục Lục1. Tạo Shortcode OTP Verification Form (Mẫu Xác Minh OTP)2. Kịch Bản JavaScript – Đếm Ngược và Gửi Mã OTP3. Gửi Mã OTP Qua...
10 Lưu ý Khi Thiết Kế Website Chuẩn SEO Không Thể Bỏ Qua 2025

Mục Lục1. Tạo Shortcode OTP Verification Form (Mẫu Xác Minh OTP)2. Kịch Bản JavaScript – Đếm Ngược và Gửi Mã OTP3. Gửi Mã OTP Qua...
Hướng Dẫn Tăng Tốc Độ Website WordPress Bằng 5 Dòng Code

Tốc độ website là một yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và SEO. Nếu bạn đang tìm cách tối ưu...