2017-08-26 147 views
1

下面是我用html設置的登錄代碼。我想在x分鐘空閒時間後設置超時設置以啓動註銷功能。這可能嗎?我目前有一個註銷按鈕來啓動註銷,所以可能有超時選擇該功能。謝謝。登錄後會話TImeout?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
     <fieldset> 
 
      <legend>Enter credentials</legend> 
 
      <p> 
 
       <label for="username">User name:</label> 
 
       <input type="text" id="username" name="username" /> 
 
      </p> 
 
      <p> 
 
       <label for="password">Password:</label> 
 
       <input type="password" id="password" name="password" /> 
 
      </p> 
 
     </fieldset> 
 
     <input type="submit" id="login-button" name="login-button" value="Log On" /> 
 
    </form>
<script src="scripts/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
 

 
$(document).ready(function() { 
 
     
 
    // Web Proxy request to fetch the configuration 
 
    ajaxWrapper({ url: 'Home/Configuration', dataType: 'xml', success: configSuccess }); 
 

 
    $('form').submit(function() { 
 
    var username = $('#username').val(), 
 
    password = $('#password').val(); 
 

 
    clearMessage(); 
 

 
    if (!username || !password) { 
 
     showMessage('Enter a username and a password'); 
 
     return false; 
 
    } 
 

 
    // Ensure the user name is correct... 
 
    // If the username has the domain string at position 0, then 
 
    // the username is correct and just use it as normal, but if 
 
    // not, username needs to have the domain prepended. 
 
    // Because of the backslashes in the strings, they need to be 
 
    // escaped with "\\" 
 
    username = username.indexOf("domain\\") === 0 ? username : "domain\\" + username; 
 

 
    // Web Proxy request to log the user on 
 
    ajaxWrapper({ 
 
     url: 'PostCredentialsAuth/Login', 
 
     dataType: 'xml', 
 
     success: loginSuccess, 
 
     error: loginError, 
 
     data: { username: username, password: password } 
 
    }); 
 

 
    return false; 
 
    }); 
 

 
}); 
 

 
</script>

下面是我加入到部分選擇logonsuccess形式後的代碼。

function loginSuccess(data) { 
 
     var $loginXml = $(data), 
 
      result = $loginXml.find('Result').text(); 
 

 
     if (result == 'success') { 
 
      $('form').hide(); 
 
      $('#log-off').show(); 
 
\t \t \t 
 
\t \t // Set timeout variables. 
 
var timoutWarning = 60000; // Display warning in 14 Mins. 
 
var timoutNow = 30000; // Warning has been shown, give the user 1 minute to interact 
 
var logoutUrl = '($configXml.find('authManager').attr('logoffURL'));'; // URL to logout page. 
 

 
var warningTimer; 
 
var timeoutTimer; 
 

 
// Start warning timer. 
 
function StartWarningTimer() { 
 
    warningTimer = setTimeout("IdleWarning()", timoutWarning); 
 
} 
 

 
// Reset timers. 
 
function ResetTimeOutTimer() { 
 
    clearTimeout(timeoutTimer); 
 
    StartWarningTimer(); 
 
    $("#timeout").dialog('close'); 
 
} 
 

 
// Show idle timeout warning dialog. 
 
function IdleWarning() { 
 
    clearTimeout(warningTimer); 
 
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow); 
 
    $("#timeout").dialog({ 
 
     modal: true 
 
    }); 
 
    // Add code in the #timeout element to call ResetTimeOutTimer() if 
 
    // the "Stay Logged In" button is clicked 
 
} 
 

 
// Logout the user. 
 
function IdleTimeout() { 
 
    window.location = logoutUrl; 
 
}

並且在下面的註銷按鈕被示出,其中用戶可以手動註銷。

 $('#log-off').click(function() { 
 
      // Web Proxy request to log the user off 
 
      url = ($configXml.find('authManager').attr('logoffURL')); 
 
      ajaxWrapper({ url: url, dataType: 'text', success: logoffSuccess }); 
 
      return false; 
 
     }); 
 
    });

+0

可以參考該鏈接(這裏)(https://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly),用於在檢測JS空閒時間。 –

+0

我是否會在登錄成功後放置該代碼,因此只有在某人成功登錄後纔會實際監控該代碼? –

回答

1

您的代碼不調用incativityTime功能。呼籲窗口的onload(或jQuery的onready)功能類似window.onload = function() { inactivityTime() };

<html> 
<body> 
    <script> 
     window.onload = function() { inactivityTime() }; 

     var inactivityTime = function() 
     { 
      var t; 
      window.onload = resetTimer; 
      // DOM Events 
      document.onmousemove = resetTimer; 
      document.onkeypress = resetTimer; 

      function logout() { 
      alert("You are now logged out.") 
      //location.href = 'logout.php' 
      } 

      function resetTimer() { 
       clearTimeout(t); 
       t = setTimeout(logout, 3000) 
       // 1000 milisec = 1 sec 
      } 
     } 
    </script> 
</body> 
</html> 
+0

所以我補充說,我登錄成功後,但它沒有奏效。下面是我放置它的地方。 –

+0

請參考我的回覆和上面的示例代碼。 –

0

我沒有成功添加它。以下是登錄成功代碼的外觀。

function loginSuccess(data) { 
    var $loginXml = $(data), 
     result = $loginXml.find('Result').text(); 

    if (result == 'success') { 
     $('form').hide(); 
     $('#log-off').show(); 

     // Web Proxy request to enumerate the resources available to the user 
     url = $configXml.find('resourcesProxy').attr('listURL'); 
     ajaxWrapper({ url: url, success: listResourcesSuccess }); 
    } else { 
     showMessage('Login failed - try again'); 
    } 

    var inactivityTime = function() { 
    var t; 
    window.onload = resetTimer; 
    // DOM Events 
    document.onmousemove = resetTimer; 
    document.onkeypress = resetTimer; 

    function logout() { 
    alert("You are now logged out.") 
    //location.href = 'logout.php' 
    } 

    function resetTimer() { 
     clearTimeout(t); 
     t = setTimeout(logout, 3000) 
     // 1000 milisec = 1 sec 
    } 
}; 
}