When working with corporate application, many a times we are given requirement that when user is logged in to the application and have left the application idle for certain amount of time, he/she should be automatically logged out to avoid leaking of application specific information or misuse of the application.
This is very frequently asked feature in banking, finance and other information sensitive web application.
In this article, we shall learn very easy way to achieve automatic logout when user is idle for sometime in the application.
To demonstrate this, I have created a very simple web page. In real time scenario, we can enhance this or add/remove whatever is necessary.
Creating a sample automatic logout notification page
Below is the <script> code. This should ideally be kept inside the _Layout/Master/Template page so that this code executes in almost all pages of the application.
In this code, we are first referencing to the jQuery page.
On load of the page, we are attaching click and keypress event on the "body" element of the page and when these event fires, we are calling ResetThisSession() function.
Next, we have declared a variable named timeInSecondsAfterSessionOut that holds the value defined in number of seconds the user should be automatically logged out.
Next, we have declared a variable named secondTick, treat this as second needle of the watch that will be incremented after every second.
After that we have declared ResetThisSession() function that simply sets the secondTick value to 0.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
$("body").on('click keypress', function () {
ResetThisSession();
});
});
var timeInSecondsAfterSessionOut = 30; // change this to change session time out (in seconds).
var secondTick = 0;
function ResetThisSession() {
secondTick = 0;
}
function StartThisSessionTimer() {
secondTick++;
var timeLeft = ((timeInSecondsAfterSessionOut - secondTick) / 60).toFixed(0); // in minutes
timeLeft = timeInSecondsAfterSessionOut - secondTick; // override, we have 30 secs only
$("#spanTimeLeft").html(timeLeft);
if (secondTick > timeInSecondsAfterSessionOut) {
clearTimeout(tick);
window.location = "/Logout.aspx";
return;
}
tick = setTimeout("StartThisSessionTimer()", 1000);
}
StartThisSessionTimer();
</script>In
StartThisSessionTimer() function we have incremented the value of
secondTick and calculating time left by decreasing this by
timeInSecondsAfterSessionOut, we can write this value either in minutes or seconds. In case, this value is coming large in number its good idea to divide by 60 to get in minutes (same as written in above code snippet). However, I have overridden
this in above code snippet as in this demo, my timeout value is only 30 seconds.
The timeLeft is then being written in the <span> element to let user know that he/she has this much time before he/she will automatically be logged out if he/she doesn't perform any activity like clicking on the page or writing something.
Next, we are checking if secondTick is greater than timeInSecondsAfterSessionOut then we are calling clearTimeout javascript function that stops the timer and redirect the user to "/Logout.aspx" page else this function executes again after 1 seconds (this is recursive function) because of setTimeout javascript function.
At last we have called StartThisSessionTimer() function so that as soon as page loads, the time starts.
The HTML page doesn't have any significance here however just for clarity purpose I have given below code snippet of the demo page.
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td><h2>Welcome to my webiste</h2></td>
<td style="text-align:right;"><span id="spanTimeLeft"></span> seconds left</td>
</tr>
</table>
<hr />
Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here. Content goes here. Content goes here.
Content goes here. Content goes here.
</div>
</form>
</body>So you can see that applying auto logout functionality is very easy to implement in any web page, it doesn't need any server side code, just plain simple JavaScript and cute jQuery is more than enough.
On the logout page, we can try to close the window using
JavaSript or write any message.
Feel free to download the source code from download link at the top.
Hope you liked this article, do share to your friends, colleagues and social websites by clicking on the social link below.