{"id":263,"date":"2013-09-05T14:50:08","date_gmt":"2013-09-05T17:50:08","guid":{"rendered":"http:\/\/gianfratti.com\/?p=263"},"modified":"2017-04-06T17:54:06","modified_gmt":"2017-04-06T20:54:06","slug":"apresentar-janela-de-session-timeout-para-os-usuarios-usando-jquery","status":"publish","type":"post","link":"https:\/\/gianfratti.com\/index.php\/apresentar-janela-de-session-timeout-para-os-usuarios-usando-jquery\/","title":{"rendered":"Apresentar Janela de Session Timeout para os usu\u00e1rios usando Jquery"},"content":{"rendered":"

Muitas vezes quando o sistema fica por muito tempo sem atualizar ou solicitar uma p\u00e1gina a sess\u00e3o configurada no servidor pode expirar causando um erro ao usu\u00e1rio ou deslogando o usu\u00e1rio do sistema sem um aviso pr\u00e9vio.<\/p>\n

Usando o Timeout-dialog.js voc\u00ea poder\u00e1 emitir um alerta amig\u00e1vel ao usu\u00e1rio avisando que a sess\u00e3o vai terminar e ele precisa tomar uma decis\u00e3o.<\/p>\n

Exemplo da janela apresentada ao usu\u00e1rio.
\n\"Timeout-Dialog\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Como usar.<\/p>\n

1\u00ba fa\u00e7a o download do\u00a0timeout-dialog<\/a><\/strong> e insira a referencia no seu projeto.
\n<\/strong><\/p>\n

\r\n<script type="text\/javascript" src="\/Scripts\/timeout-dialog.js"><\/script>\r\n<\/pre>\n
2\u00ba Voc\u00ea pode simplesmente chamar a fun\u00e7\u00e3o:<\/strong><\/p>\n
$.timeoutDialog();
\nObs: chamando a fun\u00e7\u00e3o acima voc\u00ea estar\u00e1 exibindo o alerta com as configura\u00e7\u00f5es padr\u00f5es.<\/p>\n
ou pode configurar os par\u00e2metros conforme a sua necessidade.<\/strong><\/p>\n
 <\/p>\n
\r\n$.timeoutDialog({\r\ntimeout: 900, \/*(valor sem segundos) 15 minutos emite mensagem ao usu\u00e1rio que a session vai expirar*\/\r\ncountdown: 60, \/*(valor em segundos) 60 segundos \u00e9 o tempo que a mensagem ficara aguardando a decis\u00e3o do usu\u00e1rio, caso contrario o mesmo ser\u00e1 deslogado*\/\r\ntitle: 'Sua sess\u00e3o est\u00e1 prestes a expirar!',\r\nmessage: 'Voc\u00ea ser\u00e1 desconectado em {0} segundos.',\r\nquestion: 'Voc\u00ea deseja ficar conectado?',\r\nkeep_alive_button_text: 'Sim, Mantenha-me conectado',\r\nsign_out_button_text: 'N\u00e3o, desejo sair',\r\nkeep_alive_url: '\/Site\/RenovarSession.ashx', \/*Pagina que renova a session*\/\r\nlogout_url: null,\r\nlogout_redirect_url: '\/Site\/Default.aspx', \/*Pagina que desloga o usu\u00e1rio*\/\r\nrestart_on_yes: true,\r\ndialog_width: 300\r\n});\r\n<\/pre>\n
 <\/p>\n
Segue abaixo listagem com todas as configura\u00e7\u00f5es dispon\u00edveis para parametriza\u00e7\u00e3o.<\/p>\n
Options<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/th>\nType<\/th>\nDefault<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
timeout<\/strong><\/td>\nnumber<\/td>\n1200<\/td>\nThe number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.<\/td>\n<\/tr>\n
countdown<\/strong><\/td>\nnumber<\/td>\n60<\/td>\nThe countdown total value (in seconds).<\/td>\n<\/tr>\n
title<\/strong><\/td>\nstring<\/td>\n‘Your session is about to expire!’<\/td>\nThe title message in the dialog box.<\/td>\n<\/tr>\n
message<\/strong><\/td>\nstring<\/td>\n‘You will be logged out in {0} seconds.’<\/td>\nThe countdown message where {0}<\/code> will be used to enter the countdown value.<\/td>\n<\/tr>\n
question<\/strong><\/td>\nstring<\/td>\n‘Do you want to stay signed in?’<\/td>\nThe question message if they want to continue using the site or not.<\/td>\n<\/tr>\n
keep_alive_button_text<\/strong><\/td>\nstring<\/td>\n‘Yes, Keep me signed in’<\/td>\nThe text of the YES button to keep the session alive.<\/td>\n<\/tr>\n
sign_out_button_text<\/strong><\/td>\nstring<\/td>\n‘No, Sign me out’<\/td>\nThe text of the NO button to kill the session.<\/td>\n<\/tr>\n
keep_alive_url<\/strong><\/td>\nstring<\/td>\n\/keep-alive<\/td>\nThe url that will perform a GET request to keep the session alive. This GET expects a ‘OK’ plain HTTP response.<\/td>\n<\/tr>\n
logout_url<\/strong><\/td>\nstring<\/td>\nnull<\/td>\nThe 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.<\/td>\n<\/tr>\n
logout_redirect_url<\/strong><\/td>\nstring<\/td>\n\/<\/td>\nThe redirect url after the logout happens, usually back to the login url. It will also contain a next<\/code> query param with the url that they were when timedout and a timeout=t<\/code> 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.<\/td>\n<\/tr>\n
restart_on_yes<\/strong><\/td>\nboolean<\/td>\ntrue<\/td>\nA boolean value that indicates if the countdown will restart when the user clicks the ‘keep session alive’ button.<\/td>\n<\/tr>\n
dialog_width<\/strong><\/td>\nnumber<\/td>\n350<\/td>\nThe width of the dialog box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Fontes de referencia:<\/strong>
\nVoc\u00ea pode visitar o reposit\u00f3rio do projeto em:
\nhttps:\/\/github.com\/rigoneri\/timeout-dialog.js?next=\/timeout-dialog.js\/<\/a><\/p>\n
Outros sites com conte\u00fado que pode apoiar seu conhecimento.<\/strong>
\nhttp:\/\/jquerybyexample.blogspot.com\/2012\/06\/show-session-timeout-alert-to-user.html<\/a>
\nhttp:\/\/rigoneri.github.io\/timeout-dialog.js\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Muitas vezes quando o sistema fica por muito tempo sem atualizar ou solicitar uma p\u00e1gina a sess\u00e3o configurada no servidor pode expirar causando um erro ao usu\u00e1rio ou deslogando o usu\u00e1rio do sistema sem um aviso pr\u00e9vio. Usando o Timeout-dialog.js voc\u00ea poder\u00e1 emitir um alerta amig\u00e1vel ao usu\u00e1rio avisando que a sess\u00e3o vai terminar e …<\/span> Read More →<\/span><\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[74,51,53,52,50],"class_list":["post-263","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-jquery","tag-session","tag-session-timeout","tag-timeout","tag-timeout-dialog-js"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":18,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":452,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/263\/revisions\/452"}],"wp:attachment":[{"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}