Session Timeout Logout

From Logic Wiki
Jump to: navigation, search


Simply I Added a parameter in web.config file This parameter keeps 10 minutes session time

    <appSettings>
      <add key="SessionTimeOut" value="10"/>    

In master page I Add this on top of everything

Basically I check Time variable and if it's null it means nobody logged in yet. timer starts with the login as explained in last code block.

If Time has value I check it against current time and check the difference. If it's more then 10 minutes I remove session variable and send user to logout page (as logout page is doing propoer signouts)

Otherwise I refresh Time with current time

            if (Session["Time"] != null)
            {
                if (DateTime.Now.Subtract(Convert.ToDateTime(Session["Time"])).Minutes > Convert.ToInt32(ConfigurationManager.AppSettings["SessionTimeOut"]))
                {
                    Session.Remove("Time");
                    Response.Redirect("/signout");
                }
                else
                {
                    Session["Time"] = DateTime.Now; 
                }
            }

during login I create Time variable

            Session["Time"] = DateTime.Now; 



Single page sample

<!DOCTYPE html>
<html>
<head>
    <style>
    #TimeOutContainer {width:88%; height: 150px; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
    #TimeOutContainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
    #TimeOutBlock {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
</style>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <title>Test JS</title>
    <link href="style.css" type="text/css" media="all" rel="stylesheet"/>
</head>
<body>
<h1>Test</h1>
<p> This is a test page </p>
<p> <a href="other.html" target="_blank">Open in new window </a> </p>


<div id="TimeOutBlock"></div>
<div id="TimeOutContainer">
    <div style="display:table;width:100%;height:100%;">
        <div style="display:table-cell;vertical-align:middle;">
            <div style="text-align:center;"><h3 id="TimeOutCountdown">Your session will be expired in 60 seconds</h3></div>
        </div>
    </div>
</div>

</body>
</html>

<script>
    var timeOut = 60;
    var warningTime = 30;
    var consoleLog = false;
    localStorage.setItem("MyTime", new Date().getTime());

     $(document.body).bind("mousemove keypress", function(e) {
        localStorage.setItem("MyTime", new Date().getTime());
     });
    
    function idleTime()
    {
      return  parseInt((new Date().getTime() - localStorage.getItem("MyTime")) / 1000);
    }    

     function refresh() {
        if(idleTime() >= timeOut) 
        {
             window.location.href="logout.html";
        }else
        {
            if(idleTime() >= warningTime) 
            {
                open();
                $('#TimeOutCountdown').html("Your session will be expired in " + (timeOut - idleTime()) + " seconds");

            }else
            {
                if(consoleLog == true)
                {
                    console.log(idleTime());
                }
                    close();
            }
            setTimeout(refresh, 1000);
        }
    }

setTimeout(refresh, 1000);

function open() {
    $('#TimeOutBlock').fadeIn();
    $('#TimeOutContainer').fadeIn();   
}
function close() {  
    $('#TimeOutBlock').fadeOut();
    $('#TimeOutContainer').fadeOut();  
}
</script>