Bạn có thể nhận thấy rằng một số ứng dụng tự động đăng xuất bạn sau một thời gian không hoạt động nhất định. Tính năng này đặc biệt quan trọng khi xử lý các ứng dụng web nhạy cảm như ứng dụng tài chính
Trong bài viết này, tôi sẽ hướng dẫn các bạn cách triển khai tính năng đăng xuất tự động trong ứng dụng web bằng Javascript trong React-JS
Điều kiện tiên quyết
Chúng tôi cần một ứng dụng cơ bản với tính năng xác thực được triển khai
Chúng tôi sẽ xây dựng trên ứng dụng cơ bản này mà tôi đã viết trước đó về Triển khai Xác thực và Định tuyến được Bảo vệ trong React-JS. Bạn có thể sao chép từ đây Github
Đây là một ứng dụng cơ bản với hai trang chứng minh xác thực người dùng
- Trang đăng nhập
- Trang chủ
- Trên trang chủ có nút đăng xuất
Thông tin đăng nhập
tên tài khoản. quản trị viên
Mật khẩu. 123456
Thực hiện
Chúng tôi muốn đảm bảo ứng dụng tự động đăng xuất người dùng sau 10 giây không hoạt động
Khái niệm cơ bản
Để bắt đầu, chúng tôi tạo một thành phần AppLogout sẽ bao bọc các thành phần được xác thực và trong đó chúng tôi sẽ triển khai tính năng đăng xuất
const AppLogout = [{ children }] => {
return children;
};
export default AppLogout;
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
GHI CHÚ. Điều này có thể được thực hiện trong tệp mục nhập của bố cục chính của chúng tôi. Nhưng bạn có thể tạo một thành phần riêng để phân tách các mối quan tâm
Tôi muốn giải quyết câu hỏi về cách tạo đăng xuất tự động cho người dùng đã không thể sử dụng được trong 5 phút?
Tôi đã thực hiện một số bước cơ bản theo nhiều trang diễn đàn. Đầu tiên, tôi đã thay đổi cài đặt bảo mật trong quản lý ứng dụng của mình. Hình ảnh bên dưới là cài đặt đăng nhập phổ biến của tôi. Khi tôi đã áp dụng cài đặt này và cùng với cài đặt đó, tôi tiếp tục tạo một ứng dụng xác thực phiên mới[rememberPassword = false]. Một khi, các ứng dụng đã sẵn sàng, tôi đã thử nghiệm nó trên trình duyệt web và cài đặt này dường như không hoạt động vì sau 5 phút không hoạt động, tôi vẫn chưa bị hệ thống đăng xuất. có ai có thể giúp tôi trong việc này không?
Bên cạnh đó, tôi đã thử thay đổi thời gian chạy phiên trong máy. cấu hình cho. NET nhưng tôi không chắc bắt đầu từ đâu. Tôi có cần tạo mã nguồn mới để chấm dứt phiên hoặc sửa đổi mã hiện có không?
Cảm ơn bạn đã dành thời gian.
Trân trọng,
Sharizad Mohamad
Xin chào Sharizad, bạn không thể làm điều này bằng cách thay đổi cấu hình đề tài. Bạn cần kiểm soát điều này trên thiết bị di động bằng chức năng JavaScript với một số logic để phát hiện không hoạt động.
Nếu người dùng không hoạt động trong một khoảng thời gian nhất định, bạn nên thiết lập thời gian chờ phiên tự động với Ajax để buộc đăng xuất, đặc biệt nếu có thể có dữ liệu nhạy cảm trên màn hình. Điều này thường được xử lý ở phía máy chủ; . Một cách để xử lý điều này được mô tả dưới đây
- Khi người dùng đăng nhập, hãy tạo bộ hẹn giờ JavaScript bằng phương pháp
4. Bộ đếm thời gian sẽ gọi một chức năng kết thúc phiên sau n phútLogoutOne moment please... - Bất cứ khi nào có hoạt động của người dùng, bộ hẹn giờ phải được khởi động lại
- Khi người dùng đăng xuất rõ ràng [e. g. , nhấp vào nút đăng xuất], bộ đếm thời gian phải bị tắt
Để các ví dụ này hoạt động, cần có nhiều tệp hơn số tệp có sẵn trong hướng dẫn này. Để xem các ví dụ này đang hoạt động, hãy tham gia khóa đào tạo Ajax
Trong ví dụ này, chúng ta sẽ xem xét một biểu mẫu đăng nhập đơn giản. Người dùng đăng nhập và được cung cấp nút đăng xuất. Khi hết phiên, trang sẽ trống và một cảnh báo xuất hiện cho người dùng biết rằng phiên đã hết
Sau khi người dùng nhấp vào nút OK, biểu mẫu đăng nhập sẽ xuất hiện lại. Hãy nhìn vào mã. Có khá nhiều bước liên quan đến việc thiết lập thời gian chờ phiên tự động với Ajax, như minh họa bên dưới
Chương trình Giáo dục Kỹ thuật [EngEd] này được hỗ trợ bởi Mục. Triển khai tức thì các container trên nhiều nhà cung cấp đám mây trên toàn cầu
Dùng thử miễn phí
Tạo tính năng tự động đăng xuất bằng JavaScriptNgày 14 tháng 10 năm 2021
Khi triển khai bảo mật cho các ứng dụng của mình, tại một thời điểm, chúng tôi sẽ kiểm tra tính tích cực của người dùng trong một tab. Luôn luôn là một cách thực hành tốt để đăng xuất người dùng tự động dựa trên hoạt động của họ
Điều này đặc biệt quan trọng nếu ứng dụng xử lý dữ liệu riêng tư hoặc nhạy cảm của người dùng. Ví dụ: chi tiết tài khoản ngân hàng. Chúng ta sẽ xem cách thực hiện điều đó bằng JavaScript dựa trên các sự kiện đầu vào như nhấn phím, cuộn, v.v.
điều kiện tiên quyết
Để làm theo cùng với hướng dẫn này, bạn nên có
- Có kiến thức cơ bản về JavaScript
- Có kiến thức cơ bản về HTML và CSS
- Kiến thức cơ bản về PHP [không bắt buộc]
Bạn có thể sử dụng bất kỳ công nghệ/ngôn ngữ nào cho tập lệnh đăng nhập phụ trợ
Tổng quan ngắn gọn
Chúng tôi sẽ xem xét triển khai tính năng tự động đăng xuất bằng JavaScript với sự trợ giúp của giao diện đăng nhập đơn giản dựa trên PHP làm phụ trợ. Trang hiển thị sẽ có một bộ đếm đếm số giây còn lại trước khi người dùng đăng xuất do không hoạt động
Hẹn giờ đăng xuất tự động sẽ được đặt lại nếu phát hiện bất kỳ sự kiện nào. Bản demo được tìm thấy ở đây
Bắt đầu
Trước tiên, chúng tôi sẽ tạo các tệp giao diện người dùng bằng HTML và CSS cho màn hình đăng nhập và hiển thị
Tôi sẽ không giải thích các đoạn giao diện người dùng vì điều đó nằm ngoài phạm vi của bài viết này và cũng không phải là mục đích chính của bài viết này. Bạn có thể tạo bất kỳ cái nào của riêng mình, nó không bị giới hạn nghiêm ngặt đối với những cái tôi sử dụng
Trang đăng nhập Mã như sau
Sign Page | T-Bank
Home Page
T-BANK
Log in
Log in
Đây là trang đăng nhập nơi người dùng nhập thông tin đăng nhập để đăng nhập vào hệ thống. Các biểu định kiểu được lưu trữ, vì vậy bạn có thể nhấp vào liên kết được cung cấp ở trên để xem nếu trình duyệt của bạn không hiển thị đúng giao diện người dùng do chính sách CORS
Bootstrap 5 được sử dụng để tạo kiểu
Thông tin đăng nhập là Số điện thoại -
2 và Mật khẩu-Sign Page | T-Bank Home Page T-BANK The page will take you to the login page after seconds of inactivity.3Sign Page | T-Bank Home Page T-BANK The page will take you to the login page after seconds of inactivity.
đầu ra
trang hiển thị
Sign Page | T-Bank
Home Page
T-BANK
The page will take you to the login page after seconds of inactivity.
Đây là trang hiển thị nơi người dùng sẽ thấy đồng hồ đếm ngược trước khi đăng xuất sau một khoảng thời gian không hoạt động nhất định
Lưu ý rằng một phương thức được kích hoạt trong thuộc tính
4 của phần thân. Chúng ta sẽ nói về điều đó trong mã JavaScriptSign Page | T-Bank Home Page T-BANK The page will take you to the login page after seconds of inactivity.
đầu ra
Tập lệnh đăng nhập PHP