This article will answer the following questions.
1. How to use Session Timeout.
2. How to use Session timeout in AEM.
3. How to do Session Timeout in JSP.
4. How to do Session Timeout in Web Applications, using jQuery.
5. How to do Session Timeout in Java Web Appliation.
6. How to do Session Timeout in Blogger.
So when you are developing websites or web applications you may need to do a security check at time intervals to see if the user is active or not.
For this the best way is to include a session timeout for web application
This is a very simple way of doing it using jQuery.
Step 1:
Lets see the End Product First.Here is what we are trying to achieve.
See this ONLINE DEMO PAGE that I have Created.
Step 2:
Ok since you are continuing reading, I believe this is what you want to do in your application.So to begin with lets gather the jQuery files.
Here are the links.
| File | Link |
|---|---|
| jquery-ui.css | http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css |
| jquery.min.js | http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js |
| jquery-ui.min.js | http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js |
| jquery.sessionTimeout.js | https://raw.githubusercontent.com/travishorn/jquery-sessionTimeout/master/jquery.sessionTimeout.js |
Step 3:
Download all files in the previous step.
Step 4:
The structere of code to trigger the session timeout is given below.Please use as required in your application.For the sake of this demo I will create a test file called "Test.html".
File:Test.html
<html>
<head><link href="jquery-ui.css" rel="stylesheet"></link></head>
<body>
HTML BODY GOES HERE....!!!!!!!!!!!!
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.sessionTimeout.js"></script>
<script>
$( document ).ready(function() {
$.sessionTimeout({
warnAfter: 3000, //3 Seconds-- value in milliseconds
redirAfter: 5000, //5 Seconds-- value in milliseconds
redirUrl: 'timeout.html',
logoutUrl: 'logout1.html',
});
});
</script>
On executing the above file we will get an alert every 3 seconds of in activity.
Online demo: http://codepen.io/anon/pen/qEzNpd
Step 5:
Some Explanation of the function call...and its customization as per requirement.Customize this function call as per requirement.
Please Note:You have to call the session out function on document.ready()
How to use Session timeout in AEM
In AEM, when building our projects we will have a starting point of our web application.This is generally called a BASE PAGE and all other page components will inherit from it.
If your application is not structured like this then find the JSP script in your application which is the starting point
and place the scripts just before the </head> tag in your HTML markup.
A BASEPAGE will be inherited by all other pages. For Example:We see Articlepage, Videopage and ContactUs page are inheriting from base page.
1. Go to the basepage page component and open the component JSP.
2. Include the jQuery files in the base page as shown above.
3. Now call the script after this and you are ready to go.
AEM provides a useful means for LOGOUT..
We need to hit "/system/sling/logout.html" and the session will automatically be terminated.
How to do Session Timeout in BLOGGER Websites.
If you are a blogger and you want to ad this to your own website then please follow the following steps.1. Login to Blogger.
2. Go to Template.
3. Then select Edit HTML option from the right.
4. Copy and paste the following code just before the </head> tag.
<![CDATA[
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">!function(a){jQuery.sessionTimeout=function(b){function c(b){switch(b){case"start":e=setTimeout(function(){a("#sessionTimeout-dialog").dialog("open"),d("start")},h.warnAfter);break;case"stop":clearTimeout(e)}}function d(a){switch(a){case"start":f=setTimeout(function(){window.location=h.redirUrl},h.redirAfter-h.warnAfter);break;case"stop":clearTimeout(f)}}var e,f,g={message:"Your session is about to expire.",keepAliveUrl:"/keep-alive",redirUrl:"/timed-out",logoutUrl:"/log-out",warnAfter:9e5,redirAfter:12e5},h=g;b&&(h=a.extend(g,b)),a("body").append('<div title="Session Timeout" id="sessionTimeout-dialog">'+h.message+"</div>"),a("#sessionTimeout-dialog").dialog({autoOpen:!1,width:400,modal:!0,closeOnEscape:!1,open:function(){a(".ui-dialog-titlebar-close").hide()},buttons:{"Log Out Now":function(){window.location=h.logoutUrl},"Stay Connected":function(){a(this).dialog("close"),a.ajax({type:"POST",url:h.keepAliveUrl}),d("stop"),c("start")}}}),c("start")}}(jQuery);</script>
<script type="text/javascript">
$( document ).ready(function() {
$.sessionTimeout({
warnAfter: 8000,
redirAfter: 13000,
redirUrl: 'timeout.html',
logoutUrl: 'logout1.html',
});
});
</script>
]]>
After integration into the blogger template, code should look like this.
Please customize the $.sessionTimeout function values as per your requirement.
After this your blogger website will have session timeout functionality all throughout, among all the web pages.