Bài Viết

Sharecode chức năng khi truy cập vào trang bất kỳ phải xác thực OTP gmail

Đăng vào bởi admin
20/11/2024
8 Phút đọc
257 Lượt xem
Đánh giá
5/5 - (1 bình chọn)

Xin chào các bạn! Hôm nay mình xin chia sẻ một đoạn code hoàn chỉnh giúp bạn thêm chức năng xác thực OTP Gmail khi người dùng truy cập vào một trang bất kỳ trên WordPress. Chức năng này phù hợp cho các website cần bảo mật cao hoặc giới hạn quyền truy cập cho từng người dùng.

sharecode chuc nang khi truy cap vao trang bat ky phai xac thuc otp gmail

Chức năng chính

  1. Gửi mã OTP qua Gmail:
    • Khi người dùng truy cập vào trang được bảo vệ, hệ thống sẽ tự động gửi mã OTP (One-Time Password) gồm 6 chữ số đến email đã đăng ký.
  2. Popup xác minh OTP chuyên nghiệp:
    • Một giao diện popup đẹp mắt sẽ hiển thị, yêu cầu người dùng nhập mã OTP để tiếp tục truy cập.
  3. SweetAlert thông báo lỗi/xác minh thành công:
    • Hiển thị thông báo bằng SweetAlert nếu người dùng nhập sai mã hoặc mã hết hạn.
  4. Bảo vệ bản quyền:
    • Watermark bản quyền “muathemewpgiare.com” hiển thị trên popup, và nếu có bất kỳ thay đổi nào về nội dung bản quyền, hệ thống sẽ tự động chặn truy cập.

Cách sử dụng

Bước 1: Copy đoạn code sau vào file functions.php của theme

Dán toàn bộ đoạn code dưới đây vào file functions.php:

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

Bước 2: Xác định các trang cần bảo vệ

Đoạn mã kiểm tra xem người dùng có truy cập vào các trang cần bảo vệ hay không:

Giải thích:

$protected_pages:

  • Danh sách các URL bạn muốn bảo vệ bằng OTP.
  • Đây là các trang quan trọng hoặc cần bảo mật, ví dụ /tai-khoan/downloads/.

$current_url:

  • Lấy URL hiện tại mà người dùng đang truy cập bằng $_SERVER[‘REQUEST_URI’].
  • Chỉ lấy phần đường dẫn (không bao gồm tên miền) để so sánh.

Kiểm tra URL hiện tại:Sử dụng in_array() để xem URL hiện tại có nằm trong danh sách $protected_pages hay không.

Kiểm tra xác minh OTP: Sử dụng get_user_meta() để lấy giá trị muathemewpgiare_com_otp_last_verified (ngày cuối cùng xác minh OTP).

Nếu người dùng chưa xác minh OTP hôm nay ($last_verified != $today), thì thêm popup OTP vào trang (add_action(‘wp_footer’, ‘muathemewpgiare_com_otp_show_popup’)).

Bước 3: Hiển thị popup OTP

Popup OTP được hiển thị để người dùng nhập mã OTP:

Các phần chính của popup:

#muathemewpgiare-com-otp-overlay:

  • Là lớp phủ (overlay) che toàn bộ trang khi popup hiển thị.
  • Dùng z-index: 99999 để luôn nằm trên giao diện chính.

#muathemewpgiare-com-otp-popup:

  • Là giao diện chính của popup OTP.
  • Hiển thị form nhập mã OTP (6 ô nhập mã) và nút “Xác minh”.

Mã HTML trong popup:

  • Tiêu đề: Xác minh OTP.
  • Form nhập OTP: 6 ô nhập mã số (1 ký tự mỗi ô).
  • Nút xác minh: Khi nhấn nút “Xác minh”, mã OTP sẽ được gửi qua AJAX.

Watermark bản quyền:

  • Hiển thị Bản quyền thuộc về muathemewpgiare.com.
  • JavaScript liên tục kiểm tra nội dung này để phát hiện nếu bị thay đổi.

Bước 4: Gửi và xác minh OTP

Gửi OTP qua Gmail:

Khi người dùng truy cập, hệ thống tự động gửi mã OTP qua email:

Giải thích:

  • Tạo mã OTP:Sử dụng mt_rand(100000, 999999) để tạo mã OTP ngẫu nhiên gồm 6 chữ số.
  • Lưu mã OTP vào cơ sở dữ liệu:Dùng update_user_meta() để lưu mã OTP (muathemewpgiare_com_otp_code) trong meta dữ liệu của người dùng.
  • Gửi email:Sử dụng wp_mail() để gửi mã OTP đến email đã đăng ký của người dùng.
  • Kết quả: Nếu gửi thành công, trả về JSON thông báo “Mã OTP đã được gửi!” để hiển thị cho người dùng.

Tóm tắt hoạt động

  1. Người dùng truy cập vào một trang cần bảo vệ.
  2. Popup OTP hiển thị và hệ thống tự động gửi mã OTP qua email.
  3. Người dùng nhập mã OTP.
  4. Hệ thống kiểm tra mã OTP:
    • Nếu đúng: Người dùng được truy cập.
    • Nếu sai: Hiển thị lỗi và yêu cầu nhập lại.

Điểm nổi bật

  1. SweetAlert luôn hiển thị trên cùng:
    • Sử dụng z-index: 110000 !important cho SweetAlert2 để không bị che bởi popup OTP.
  2. Popup OTP đẹp và chuyên nghiệp:
    • Giao diện tối ưu với màu sắc hài hòa và font chữ rõ ràng.
  3. Bảo vệ bản quyền “muathemewpgiare.com”:
    • Theo dõi và phát hiện nếu watermark bị thay đổi, hiển thị thông báo và chặn truy cập.
  4. Tính năng đầy đủ:
    • Gửi OTP qua email, xác minh OTP, và xử lý lỗi khi nhập sai mã.

Chúc các bạn thành công nhé

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!

Khám phá thêm những bài viết thú vị liên quan đến chủ đề bạn đang quan tâm. Đây là một cách tuyệt vời để mở rộng kiến thức của bạn.

Để lại một bình luận

Danh Mục Sản Phẩm
Hướng dẫn cài đặt

Danh mục đang hot:

Đồ Chơi - Mẹ & Bé