JavaScript Session Timeout Forms Authentication using JQuery Ajax and Webservice

If you want to handle your Session timeout through Javascript to Popup a window that says “you have been logged out due to time out”  Then Folllow these 3 Simple steps…

Step1: Regster a javascript function in Page_Init method of your Page.

1: private void RegisterSessionTimeOutScript() 2: {

 3:         StringBuilder csText = new StringBuilder();
 4:         csText.Append("<script type=\"text/javascript\" language=\"javascript\">");

 5:         csText.Append("var timeOut;"); 
 6:         csText.Append("var MinutesToTimeOut;");

 7:         csText.Append("function resetTimer() {");
 8:         csText.Append("clearTimeout(timeOut);");

 9:         csText.Append("if(window.abandonSession)");
 10:         csText.Append("timeOut = setTimeout(abandonSession, MinutesToTimeOut*60*1000);");

 11:         csText.Append("// 1Sec = 1000 Milli Secs");
 12:         csText.Append("}");

 13:         csText.Append(string.Format("window.onload=resetTimer; document.onmousemove = resetTimer; document.onkeypress = resetTimer; MinutesToTimeOut={0};", FormsAuthentication.Timeout.Minutes));
 14:         csText.Append("</script>");

 15:         Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "SessionTimeOutScript", csText.ToString());
 16:     }
Register above javascript inside Page_Init method

 1:   protected void Page_Init(object sender, EventArgs e)
 2:     {
 3:         RegisterSessionTimeOutScript();
 4:      }

Step2: JQuery method to call ajax WebService

 1:  $(document).ready(function () {
 2:  function abandonSession() {

 3:           // alert('coming');
 4:             $.ajax({

 5:                 type: "POST",
 6:                 url: "JQuerySessionTimeOutWebservice.asmx/AbandonSessionOnTimeout",

 7:                 contentType: "application/json; charset=utf-8",
 8:                 dataType: "json",

 9:                 success: function (msg) {
 10:                     // Do something interesting here.

 11:                     if (msg.d.IsUserLoggedIn == false) {
 12:                         alert('You are about to be signed out due to your current session timeout');

 13:                         $(window).attr("location", msg.d.LoginUrl);
 14:                     }

 15:                 }
 16:             });

 17:         }

Step3: Create a web service inside your web application.

 1: WebService(Namespace = "http://tempuri.org/")]
 2: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 3: // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 4: [System.Web.Script.Services.ScriptService]

 5: public class JQuerySessionTimeOutWebservice : System.Web.Services.WebService
 6: {

 7:  
 8:     public JQuerySessionTimeOutWebservice()

 9:     {
 10: 

 11:         //Uncomment the following line if using designed components 
 12:         //InitializeComponent(); 

 13:     }
 14: 

 15:     [WebMethod(EnableSession = true)]
 16:     public JsonLoginValues AbandonSessionOnTimeout()

 17:     {
 18:         if (Session != null)

 19:         {
 20:             Session.Abandon();

 21:             FormsAuthentication.SignOut();
 22:         }

 23:  
 24:         JsonLoginValues values = new JsonLoginValues();

 25:         values.IsUserLoggedIn = false;
 26:         values.LoginUrl = (DistributorPortalAPI.Common.IsClaimsAuthentication) ? System.Configuration.ConfigurationManager.AppSettings["SignOutURL"].ToString() : FormsAuthentication.LoginUrl;

 27:         return values;
 28:     }

 29:  
 30: [Serializable]

 31: public class JsonLoginValues
 32: {

 33:     public string LoginUrl;
 34:     public bool IsUserLoggedIn;

 35: }
 36: 

 37: }

You can place Class JsonLoginValues in a separate class file…

Set your Forms Authentication Timeout to one minute in your web.config and then run your application to test your code….

Happy coding…:-)