Apresentar Janela de Session Timeout para os usuários usando Jquery

Muitas vezes quando o sistema fica por muito tempo sem atualizar ou solicitar uma página a sessão configurada no servidor pode expirar causando um erro ao usuário ou deslogando o usuário do sistema sem um aviso prévio.

Usando o Timeout-dialog.js você poderá emitir um alerta amigável ao usuário avisando que a sessão vai terminar e ele precisa tomar uma decisão.

Exemplo da janela apresentada ao usuário.

 

 

 

 

 

 

Como usar.

1º faça o download do timeout-dialog e insira a referencia no seu projeto.

<script type="text/javascript" src="/Scripts/timeout-dialog.js"></script>

2º Você pode simplesmente chamar a função:

$.timeoutDialog();
Obs: chamando a função acima você estará exibindo o alerta com as configurações padrões.

ou pode configurar os parâmetros conforme a sua necessidade.

 

$.timeoutDialog({
timeout: 900, /*(valor sem segundos) 15 minutos emite mensagem ao usuário que a session vai expirar*/
countdown: 60, /*(valor em segundos) 60 segundos é o tempo que a mensagem ficara aguardando a decisão do usuário, caso contrario o mesmo será deslogado*/
title: 'Sua sessão está prestes a expirar!',
message: 'Você será desconectado em {0} segundos.',
question: 'Você deseja ficar conectado?',
keep_alive_button_text: 'Sim, Mantenha-me conectado',
sign_out_button_text: 'Não, desejo sair',
keep_alive_url: '/Site/RenovarSession.ashx', /*Pagina que renova a session*/
logout_url: null,
logout_redirect_url: '/Site/Default.aspx', /*Pagina que desloga o usuário*/
restart_on_yes: true,
dialog_width: 300
});

 

Segue abaixo listagem com todas as configurações disponíveis para parametrização.

Options

Name	Type	Default	Description
timeout	number	1200	The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.
countdown	number	60	The countdown total value (in seconds).
title	string	‘Your session is about to expire!’	The title message in the dialog box.
message	string	‘You will be logged out in {0} seconds.’	The countdown message where {0} will be used to enter the countdown value.
question	string	‘Do you want to stay signed in?’	The question message if they want to continue using the site or not.
keep_alive_button_text	string	‘Yes, Keep me signed in’	The text of the YES button to keep the session alive.
sign_out_button_text	string	‘No, Sign me out’	The text of the NO button to kill the session.
keep_alive_url	string	/keep-alive	The url that will perform a GET request to keep the session alive. This GET expects a ‘OK’ plain HTTP response.
logout_url	string	null	The url that will perform a POST request to kill the session. If no logout_url is defined it will just redirect to the url defined in logout_redirect_url.
logout_redirect_url	string	/	The redirect url after the logout happens, usually back to the login url. It will also contain a next query param with the url that they were when timedout and a timeout=t query param indicating if it was from a timeout, this value will not be set if the user clicked the ‘No, Sign me out’ button.
restart_on_yes	boolean	true	A boolean value that indicates if the countdown will restart when the user clicks the ‘keep session alive’ button.
dialog_width	number	350	The width of the dialog box.

Fontes de referencia:
Você pode visitar o repositório do projeto em:
https://github.com/rigoneri/timeout-dialog.js?next=/timeout-dialog.js/

Outros sites com conteúdo que pode apoiar seu conhecimento.
http://jquerybyexample.blogspot.com/2012/06/show-session-timeout-alert-to-user.html
http://rigoneri.github.io/timeout-dialog.js/