Wednesday, 6 April 2016

How to setup Session Timeout for Web Applications (jQuery)

How to setup Session Timeout for Web Applications
How to do Session Timeout in jQuery for Web Applications

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.
How to setup Session Timeout for Web Applications


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.

FileLink
jquery-ui.csshttp://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
jquery.min.jshttp://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
jquery-ui.min.jshttp://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
jquery.sessionTimeout.jshttps://raw.githubusercontent.com/travishorn/jquery-sessionTimeout/master/jquery.sessionTimeout.js



Step 3:

Download all files in the previous step.
How to setup Session Timeout for Web Applications


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>


How to setup Session Timeout for Web Applications

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 setup Session Timeout for Web Applications





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.
How to setup Session Timeout for Web Applications

1. Go to the basepage page component and open the component JSP.

How to setup Session Timeout for Web Applications

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 setup Session Timeout for Web Applications





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.

How to setup Session Timeout for Web Applications


After this your blogger website will have session timeout functionality all throughout, among all the web pages.



No comments:

Post a Comment

Coder Magnet
CoderMagnet is full of resources from our daily development activities. It has solutions for common problematic scenarios in technologies like Java 8, AEM, JCR and also occasionally gives you tips on Blogger as well.