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.
Timeout-Dialog

 

 

 

 

 

 

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/

6 Thoughts on “Apresentar Janela de Session Timeout para os usuários usando Jquery

  1. Rogerio Coimbra on 05/09/2013 at 17:57 said:

    Boa boto.

  2. Gustavo on 21/06/2016 at 15:31 said:

    Neste caso, o código não verifica evento do teclado por exemplo. Se o usuário ficar trabalhando por muito tempo em um editor, neste caso a caixa de diálogo irá aparecer mesmo trabalhando “ativamente”. Tem alguma solução pra isso?

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Post Navigation