Предупреждение об истечении сессии с помощью jQuery в ASP.NET

Скачать исходный код — 156.4 KB

Введение

В этой статье мы рассмотрим, как реализовать отображение предупреждающего сообщения пользователю за 15 минут до истечения его сессии. Другими словами, когда пользователь неактивен более 5 минут, он получит сообщение в браузере.

Что такое сессия?

Когда мы работаем с приложением на нашем компьютере, мы выполняем определённый набор стандартных действий, например, открытие приложения, внесение изменений, закрытие приложения.

Эти действия очень похожи на сессию, т.к. при этом происходит взаимодействие между пользователем и компьютером, и компьютер знает своего пользователя. Он знает всё, что мы делаем с приложением.

Однако в интернете есть одна проблема: веб-сервер не знает, кто им пользуется и что он делает, т.к. всемирная сеть не сохраняет состояние, то есть страница создаётся заново каждый раз, когда она запрашивается.

Другими словами, протокол HTTP не сохраняет состояние и не хранит информацию о пользователе/клиенте на странице.

Данные сессии хранятся отдельно для каждого клиента. Сессии предоставляют возможность хранить информацию в памяти сервера и использовать эту информацию на странице.

Процедура реализации предупреждения об истечении сессии с помощью jQuery

Использование jQuery

Нам нужно добавить ссылку на файл JavaScript с библиотекой jQuery, чтобы затем пользоваться функциями, которые предоставляет эта библиотека:

<script src="jquery/js/jquery-1.8.3.js" type="text/javascript"></script>

Определение переменных

Нам нужно определить некоторые глобальные переменные. Они используются для расчёта времени неактивности и времени сессии:

//Частота проверки на истечение сессии в миллисекундах
var sess_pollInterval = 60000;

//Длительность сессии в минутах
var sess_expirationMinutes = 20;

//Количество минут до предупреждения
var sess_warningMinutes = 5;
var sess_intervalID;
var sess_lastActivity;

Инициализация сессии

Нам нужно создать функцию JavaScript, которая инициализирует время сессии при загрузке страницы. Здесь мы используем переменную sess_lastActivity, чтобы хранить время, когда страница была загружена.

После этого мы устанавливаем интервал проверки:

function initSession() {  
    sess_lastActivity = new Date();
    sessSetInterval();
    $(document).bind('keypress.session', function (ed, e) {
        sessKeyPressed(ed, e);
    });
}

Интервал проверки и предупреждение

Мы создаём две функции: для задания интервала проверки и для отображения предупреждения об истечении сессии:

function sessSetInterval() {
    sess_intervalID = setInterval('sessInterval()', sess_pollInterval);
}

function sessInterval() {
var now = new Date();

//получаем разницу между текущим временем и временем последней активности
var diff = now - sess_lastActivity;

//преобразуем в минуты
var diffMins = (diff / 1000 / 60); 
if (diffMins >= sess_warningMinutes) {

//предупреждение об истечении

//прекращаем проверку
sessClearInterval();

//предупреждаем
var active = confirm('Ваша сессия истекает через ' + (sess_expirationMinutes - sess_warningMinutes) +
' минут (по состоянию на ' + now.toTimeString() + '), нажмите OK, чтобы остаться в системе ' +
'или Отмена, чтобы выйти из системы. nПри выходе из системы все изменения будут потеряны.');
if (active == true) {
now = new Date(); 

diff = now - sess_lastActivity;
diffMins = (diff / 1000 / 60);
if (diffMins > sess_expirationMinutes) {
sessLogOut();
}
else {
initSession();
sessSetInterval();
sess_lastActivity = new Date();
}
}
else {
sessLogOut();
}
}
}

Выход из системы

Когда пользователь неактивен более 5 минут, система выдаёт предупреждение, и при нажатии на кнопку «Отмена» пользователь перемещается на страницу выхода из системы.

Если пользователь нажимает кнопку «OK» по истечении 15 минут со времени предупреждения, т.е. когда сессия уже истекла, он также перемещается на страницу выхода из системы.

Нам осталось создать функцию для выхода из системы:

function sessLogOut() {
window.location.href="Logout.aspx";
}  
Использование кода

Структура каталогов

На следующей диаграмме показана структура каталогов и расположение страниц сайта и файлов JavaScript:

Структура каталогов

Рис 1. Структура каталогов приложения

Полный код

<%@ Page Language="C#" AutoEventWireup="true" 
 CodeBehind="SessionInjQuery.aspx.cs" Inherits="JQueryExample.SessionInjQuery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery/js/jquery-1.8.3.js" type="text/javascript"></script> 
    <script type="text/javascript">
        var sess_pollInterval = 60000;
        var sess_expirationMinutes = 20;
        var sess_warningMinutes = 5;
        var sess_intervalID;
        var sess_lastActivity;

        function initSession() {
            sess_lastActivity = new Date();
            sessSetInterval();
            $(document).bind('keypress.session', function (ed, e) {
                sessKeyPressed(ed, e);
            });
        }
        function sessSetInterval() {
            sess_intervalID = setInterval('sessInterval()', sess_pollInterval);
        }
        function sessClearInterval() {
            clearInterval(sess_intervalID);

        }
        function sessKeyPressed(ed, e) {
            sess_lastActivity = new Date();
        }
        function sessLogOut() {
            window.location.href = 'Logout.aspx';
        }
        function sessInterval() {
            var now = new Date();
            //получаем разницу между текущим временем и временем последней активности
            var diff = now - sess_lastActivity;
            //преобразуем в минуты
            var diffMins = (diff / 1000 / 60);
            if (diffMins >= sess_warningMinutes) {
                //предупреждение об истечении

                //прекращаем проверку
                sessClearInterval();

                //предупреждаем
                var active = confirm('Ваша сессия истекает через ' + 
                (sess_expirationMinutes - sess_warningMinutes) +
                ' минут (по состоянию на ' + now.toTimeString() + '), 
                Нажмите OK, чтобы остаться в системе ' +
                'или Отмена, чтобы выйти из системы. 
                nПри выходе из системы все изменения будут 
                потеряны.');
                if (active == true) {
                    now = new Date();
                    diff = now - sess_lastActivity;
                    diffMins = (diff / 1000 / 60);
                    if (diffMins > sess_expirationMinutes) {
                        sessLogOut();
                    }
                    else {
                        initSession();
                        sessSetInterval();
                        sess_lastActivity = new Date();
                    }
                }
                else {
                    sessLogOut();
                }
            }
        }
        
</script>
 
</head>
<body onload="initSession()">
    <form id="form1" runat="server">
    <div>
     <h1>Добро пожаловать!</h1>
    </div>
    </form>
</body>
</html>

Предупреждение

Предупреждение

Рис 2. Предупреждение

В сообщении с предупреждением у нас есть две кнопки: «OK» и «Отмена». При нажатии на кнопку «OK» в течение 15 минут после того, как сообщение появилось в браузере пользователя, время сессии обновляется.

Однако, если кнопка «OK» была нажата более чем через 15 минут после появления предупреждения, тогда мы перемещаемся на страницу выхода из системы, так же, как и при нажатии на кнопку «Отмена».

Сессия истекла

Рис 3. Сессия истекла

Перевод статьи «Session Time Out Warning Message Using jQuery in ASP.NET» был подготовлен дружной командой проекта Сайтостроение от А до Я.