Mostrar Advertencia de Expiración de Sesión con ASP.NET AJAX

En alguna aplicaciones web que muestran información sensible, como bancos en línea, es buena idea “expirar” la sesión del usuario después de que cierta cantidad de tiempo ha transcurrido. Por ejemplo, tal vez deseamos cerrar la sesión automáticamente y redirigir al usuario a la pagina de inicio.

Esta en una función de seguridad importante, pero al mismo tiempo, al usuario quizá no le agrade que su sesión termine automáticamente justo en medio de estar leyendo algo en la pagina. Así que seria una buena idea mostrar un mensaje antes de que la sesión expire y tal vez darle al usuario una oportunidad de hacer algo al respecto.

Aquí esta una solución simple usando ASP.NET AJAX y algo de JavaScript para mostrar una advertencia antes de terminar la sesión.

Crea una nueva Aplicación Web ASP.NET en Visual Studio.

Agrega un control ScriptManager a la pagina Default.aspx o la pagina maestra (master page).

<asp:scriptmanager id="ScriptManager1" runat="server" />

Si agregas el control ScriptManager a la pagina maestra, necesitaras agregar un control ScriptManagerProxy a la pagina Default.aspx page.

Como mencione en otro post, ScriptManager se encarga de cargar los componentes de ASP.NET AJAX necesarios para habilitar actualizaciones parciales y otras operaciones AJAX.

Como Dave Ward menciona en su post, si tenemos una función JavaScript llamada pageLoad() en nuestra pagina, ASP.NET AJAX llamara la función cuando la pagina cargue o cuando un postback parcial haya completado.

Agrega este código JavaScript a la pagina Default.aspx.

<script type="text/javascript"> 

    //localizar timers
    var iddleTimeoutWarning = null;
    var iddleTimeout = null;

    //esta funcion automaticamente sera llamada por ASP.NET AJAX cuando la pagina cargue y un postback parcial complete
    function pageLoad() { 

        //borrar antiguos timers de postbacks anteriores
        if (iddleTimeoutWarning != null)
            clearTimeout(iddleTimeoutWarning);
        if (iddleTimeout != null)
            clearTimeout(iddleTimeout);
        //leer tiempos desde web.config
        var millisecTimeOutWarning = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeoutWarning"]) * 60 * 1000 %>;
        var millisecTimeOut = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeout"]) * 60 * 1000 %>; 

        //establece tiempo para mostrar advertencia si el usuario ha estado inactivo
        iddleTimeoutWarning = setTimeout("DisplayIddleWarning()", millisecTimeOutWarning);
        iddleTimeout = setTimeout("TimeoutPage()", millisecTimeOut);
    } 

    function DisplayIddleWarning() {
        alert("Tu sesion esta a punto de expirar debido a inactividad.");
    } 

    function TimeoutPage() {
        //actualizar pagina para este ejemplo, podriamos redirigir a otra pagina con codigo para eliminar variables de sesion
        location.reload();
    } 

</script>

En este código, establecemos dos temporizadores (timers) en la función pageLoad(). Un temporizador mostrara una advertencia y el segundo se encargara de cerrar la sesión. Para el propósito de esta prueba, solo actualizaremos la pagina, pero en un escenario real, quizá redirigiríamos al usuario a la pagina de cerrar la sesión.

Obtenemos los minutos para cada temporizador desde el web.config con la clase ConfigurationManager.

Necesitaras agregar estas entradas al web.config. Para este ejemplo, utilizare solo 1 y 2 minutos para cada temporizador.

  <appSettings>
    <add key="SessionTimeout" value ="2"/>
    <add key="SessionTimeoutWarning" value ="1"/>
  </appSettings>

Eso es todo, ahora ejecuta la aplicación y espera…

Por favor deja tus comentarios si tienes cualquier problema o si hay cualquier cosa que pueda ser mejorada.