Automatische Abmeldung mit Angularjs basierend auf dem inaktiven Benutzer

Question 1

Ist es möglich festzustellen, ob ein Benutzer inaktiv ist, und ihn nach etwa 10 Minuten Inaktivität mithilfe von anglejs automatisch abzumelden?

Ich habe versucht, die Verwendung von jQuery zu vermeiden, aber ich kann keine Tutorials oder Artikel dazu finden, wie dies in anglejs gemacht wird. Jede Hilfe wäre dankbar.

Question 2

Ich habe ein Modul namens geschrieben Ng-Idle, das Ihnen in dieser Situation nützlich sein kann. Hier ist die Seite, die Anweisungen und eine Demo enthält.

Grundsätzlich verfügt es über einen Dienst, der einen Timer für Ihre Leerlaufdauer startet, der durch Benutzeraktivitäten (Ereignisse wie Klicken, Scrollen, Tippen) unterbrochen werden kann. Sie können das Zeitlimit auch manuell unterbrechen, indem Sie eine Methode für den Dienst aufrufen. Wenn das Zeitlimit nicht unterbrochen wird, zählt es eine Warnung herunter, in der Sie den Benutzer benachrichtigen können, dass er abgemeldet wird. Wenn sie nicht antworten, nachdem der Warnungs-Countdown 0 erreicht hat, wird ein Ereignis gesendet, auf das Ihre Anwendung reagieren kann. In Ihrem Fall kann eine Anforderung ausgegeben werden, die Sitzung zu beenden und auf eine Anmeldeseite umzuleiten.

Darüber hinaus verfügt es über einen Keep-Alive-Dienst, der in bestimmten Abständen eine URL anpingen kann. Dies kann von Ihrer App verwendet werden, um die Sitzung eines Benutzers am Leben zu erhalten, während dieser aktiv ist. Der inaktive Dienst wird standardmäßig in den Keep-Alive-Dienst integriert, wobei der Ping-Vorgang unterbrochen wird, wenn er inaktiv wird, und bei seiner Rückkehr fortgesetzt wird.

Alle Informationen, die Sie für den Einstieg benötigen, finden Sie auf der Website mit weiteren Details im Wiki . Hier ist jedoch ein Ausschnitt aus der Konfiguration, der zeigt, wie Sie sie abmelden, wenn sie eine Zeitüberschreitung aufweisen.

angular.module('demo', ['ngIdle'])
// omitted for brevity
.config(function(IdleProvider, KeepaliveProvider) {
  IdleProvider.idle(10*60); // 10 minutes idle
  IdleProvider.timeout(30); // after 30 seconds idle, time the user out
  KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
})
.run(function($rootScope) {
    $rootScope.$on('IdleTimeout', function() {
        // end their session and redirect to login
    });
});

Question 3

Ansicht Demo , die verwendet angularjsund Ihre Browser - Log sehen

<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>
</body>

<script>

var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {    
    console.log('starting run');

    // Timeout timer value
    var TimeOutTimerValue = 5000;

    // Start a timeout
    var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    var bodyElement = angular.element($document);

    /// Keyboard Events
    bodyElement.bind('keydown', function (e) { TimeOut_Resetter(e) });  
    bodyElement.bind('keyup', function (e) { TimeOut_Resetter(e) });    

    /// Mouse Events    
    bodyElement.bind('click', function (e) { TimeOut_Resetter(e) });
    bodyElement.bind('mousemove', function (e) { TimeOut_Resetter(e) });    
    bodyElement.bind('DOMMouseScroll', function (e) { TimeOut_Resetter(e) });
    bodyElement.bind('mousewheel', function (e) { TimeOut_Resetter(e) });   
    bodyElement.bind('mousedown', function (e) { TimeOut_Resetter(e) });        

    /// Touch Events
    bodyElement.bind('touchstart', function (e) { TimeOut_Resetter(e) });       
    bodyElement.bind('touchmove', function (e) { TimeOut_Resetter(e) });        

    /// Common Events
    bodyElement.bind('scroll', function (e) { TimeOut_Resetter(e) });       
    bodyElement.bind('focus', function (e) { TimeOut_Resetter(e) });    

    function LogoutByTimer()
    {
        console.log('Logout');

        ///////////////////////////////////////////////////
        /// redirect to another page(eg. Login.html) here
        ///////////////////////////////////////////////////
    }

    function TimeOut_Resetter(e)
    {
        console.log('' + e);

        /// Stop the pending timeout
        $timeout.cancel(TimeOut_Thread);

        /// Reset the timeout
        TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    }

})
</script>

</html>

Der folgende Code ist eine reine Javascript-Version

<html>
    <head>
        <script type="text/javascript">         
            function logout(){
                console.log('Logout');
            }

            function onInactive(millisecond, callback){
                var wait = setTimeout(callback, millisecond);               
                document.onmousemove = 
                document.mousedown = 
                document.mouseup = 
                document.onkeydown = 
                document.onkeyup = 
                document.focus = function(){
                    clearTimeout(wait);
                    wait = setTimeout(callback, millisecond);                       
                };
            }           
        </script>
    </head> 
    <body onload="onInactive(5000, logout);"></body>
</html>

AKTUALISIEREN

Ich habe meine Lösung als @ Tom-Vorschlag aktualisiert.

<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>
</body>

<script>
var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {    
    console.log('starting run');

    // Timeout timer value
    var TimeOutTimerValue = 5000;

    // Start a timeout
    var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    var bodyElement = angular.element($document);

    angular.forEach(['keydown', 'keyup', 'click', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'focus'], 
    function(EventName) {
         bodyElement.bind(EventName, function (e) { TimeOut_Resetter(e) });  
    });

    function LogoutByTimer(){
        console.log('Logout');
        ///////////////////////////////////////////////////
        /// redirect to another page(eg. Login.html) here
        ///////////////////////////////////////////////////
    }

    function TimeOut_Resetter(e){
        console.log(' ' + e);

        /// Stop the pending timeout
        $timeout.cancel(TimeOut_Thread);

        /// Reset the timeout
        TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    }

})
</script>
</html>

Klicken Sie hier, um die aktualisierte Version bei Plunker anzuzeigen

Question 4

Es sollte verschiedene Möglichkeiten geben, und jeder Ansatz sollte besser zu einer bestimmten Anwendung passen als zu einer anderen. Bei den meisten Apps können Sie einfach nur Tasten- oder Mausereignisse verarbeiten und einen Abmelde-Timer entsprechend aktivieren / deaktivieren. Das heißt, auf der Oberseite meines Kopfes überwacht eine "ausgefallene" AngularJS-y-Lösung die Digest-Schleife, wenn während der letzten [angegebenen Dauer] keine ausgelöst wurde, dann melden Sie sich ab. Etwas wie das.

app.run(function($rootScope) {
  var lastDigestRun = new Date();
  $rootScope.$watch(function detectIdle() {
    var now = new Date();
    if (now - lastDigestRun > 10*60*60) {
       // logout here, like delete cookie, navigate to login ...
    }
    lastDigestRun = now;
  });
});

Question 5

Gespielt mit Boos Ansatz, mag jedoch nicht die Tatsache, dass der Benutzer erst nach dem Ausführen eines anderen Digests gestartet wurde, was bedeutet, dass der Benutzer angemeldet bleibt, bis er versucht, etwas auf der Seite zu tun, und dann sofort gestartet wird.

Ich versuche, die Abmeldung mithilfe eines Intervalls zu erzwingen, das jede Minute überprüft, ob die letzte Aktionszeit mehr als 30 Minuten zurückliegt. Ich habe es an $ routeChangeStart angehängt, könnte aber auch an $ rootScope angehängt werden. $ Watch wie in Boos Beispiel.

app.run(function($rootScope, $location, $interval) {

    var lastDigestRun = Date.now();
    var idleCheck = $interval(function() {
        var now = Date.now();            
        if (now - lastDigestRun > 30*60*1000) {
           // logout
        }
    }, 60*1000);

    $rootScope.$on('$routeChangeStart', function(evt) {
        lastDigestRun = Date.now();  
    });
});

Question 6

Sie können die Verwendung auch angular-activity-monitoreinfacher durchführen als das Injizieren mehrerer Anbieter, und es wird setInterval()(im Vergleich zu Winkeln $interval) verwendet, um das manuelle Auslösen einer Digest-Schleife zu vermeiden (was wichtig ist, um zu verhindern, dass Elemente unbeabsichtigt am Leben bleiben).

Letztendlich abonnieren Sie nur einige Ereignisse, die bestimmen, wann ein Benutzer inaktiv ist oder sich nähert. Wenn Sie also einen Benutzer nach 10 Minuten Inaktivität abmelden möchten, können Sie das folgende Snippet verwenden:

angular.module('myModule', ['ActivityMonitor']);

MyController.$inject = ['ActivityMonitor'];
function MyController(ActivityMonitor) {
  // how long (in seconds) until user is considered inactive
  ActivityMonitor.options.inactive = 600;

  ActivityMonitor.on('inactive', function() {
    // user is considered inactive, logout etc.
  });

  ActivityMonitor.on('keepAlive', function() {
    // items to keep alive in the background while user is active
  });

  ActivityMonitor.on('warning', function() {
    // alert user when they're nearing inactivity
  });
}

Question 7

Ich habe Buus Ansatz ausprobiert und konnte ihn aufgrund der schieren Anzahl von Ereignissen, die die Ausführung des Fermenters auslösen, einschließlich der Ausführung von $ interval- und $ timeout-Funktionen, nicht ganz richtig machen. Dadurch bleibt die Anwendung in einem Zustand, in dem sie unabhängig von Benutzereingaben niemals inaktiv ist.

Wenn Sie tatsächlich die Leerlaufzeit des Benutzers verfolgen müssen, bin ich mir nicht sicher, ob es einen guten Winkelansatz gibt. Ich würde vorschlagen, dass Witoldz hier https://github.com/witoldsz/angular-http-auth einen besseren Ansatz vertritt . Dieser Ansatz fordert den Benutzer auf, sich erneut zu authentifizieren, wenn eine Aktion ausgeführt wird, für die seine Anmeldeinformationen erforderlich sind. Nachdem sich der Benutzer authentifiziert hat, wird die vorherige fehlgeschlagene Anforderung erneut verarbeitet und die Anwendung wird fortgesetzt, als ob nichts passiert wäre.

Dies behebt das Problem, dass die Sitzung des Benutzers möglicherweise abläuft, während er aktiv ist, da er auch nach Ablauf seiner Authentifizierung den Anwendungsstatus beibehalten und keine Arbeit verlieren kann.

Wenn Sie eine Sitzung auf Ihrem Client haben (Cookies, Token usw.), können Sie diese ebenfalls ansehen und Ihren Abmeldevorgang auslösen, wenn sie ablaufen.

app.run(['$interval', function($interval) {
  $interval(function() {
    if (/* session still exists */) {
    } else {
      // log out of client
    }
  }, 1000);
}]);

UPDATE: Hier ist ein Plunk, der die Besorgnis demonstriert. http://plnkr.co/edit/ELotD8W8VAeQfbYFin1W . Dies zeigt, dass die Laufzeit des Fermenters nur aktualisiert wird, wenn das Intervall aktiviert ist. Sobald das Intervall die maximale Anzahl erreicht hat, läuft der Fermenter nicht mehr.

Question 8

ng-Idle sieht nach dem richtigen Weg aus, aber ich konnte die Modifikationen von Brian F nicht herausfinden und wollte auch eine Auszeit für eine Schlafsitzung nehmen. Außerdem hatte ich einen ziemlich einfachen Anwendungsfall im Sinn. Ich habe es auf den folgenden Code reduziert. Es bindet Ereignisse ein, um ein Timeout-Flag zurückzusetzen (träge in $ rootScope platziert). Es erkennt nur, dass das Timeout aufgetreten ist, wenn der Benutzer zurückkehrt (und ein Ereignis auslöst), aber das ist gut genug für mich. Ich konnte Angulars $ location nicht zum Laufen bringen, aber mit document.location.href wird der Job erledigt.

Ich habe dies in meine app.js gesteckt, nachdem die .config ausgeführt wurde.

app.run(function($rootScope,$document) 
{
  var d = new Date();
  var n = d.getTime();  //n in ms

    $rootScope.idleEndTime = n+(20*60*1000); //set end time to 20 min from now
    $document.find('body').on('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', checkAndResetIdle); //monitor events

    function checkAndResetIdle() //user did something
    {
      var d = new Date();
      var n = d.getTime();  //n in ms

        if (n>$rootScope.idleEndTime)
        {
            $document.find('body').off('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart'); //un-monitor events

            //$location.search('IntendedURL',$location.absUrl()).path('/login'); //terminate by sending to login page
            document.location.href = 'https://whatever.com/myapp/#/login';
            alert('Session ended due to inactivity');
        }
        else
        {
            $rootScope.idleEndTime = n+(20*60*1000); //reset end time
        }
    }
});

Question 9

Ich denke, Buus Digest Cycle Watch ist genial. Danke für das Teilen. Wie andere angemerkt haben, führt $ interval auch dazu, dass der Digest-Zyklus ausgeführt wird. Wir könnten zum automatischen Abmelden des Benutzers setInterval verwenden, das keine Digest-Schleife verursacht.

app.run(function($rootScope) {
    var lastDigestRun = new Date();
    setInterval(function () {
        var now = Date.now();
        if (now - lastDigestRun > 10 * 60 * 1000) {
          //logout
        }
    }, 60 * 1000);

    $rootScope.$watch(function() {
        lastDigestRun = new Date();
    });
});

Question 10

Ich habe ng-idle dafür verwendet und ein wenig Logout- und Token-Null-Code hinzugefügt, und es funktioniert einwandfrei. Sie können dies versuchen. Vielen Dank an @HackedByChinese für das Erstellen eines so schönen Moduls.

In IdleTimeout habe ich gerade meine Sitzungsdaten und mein Token gelöscht.

Hier ist mein Code

$scope.$on('IdleTimeout', function () {
        closeModals();
        delete $window.sessionStorage.token;
        $state.go("login");
        $scope.timedout = $uibModal.open({
            templateUrl: 'timedout-dialog.html',
            windowClass: 'modal-danger'
        });
    });

Question 11

Ich möchte die Antworten auf diejenigen erweitern, die dies in einem größeren Projekt verwenden. Sie könnten versehentlich mehrere Ereignishandler anhängen und das Programm würde sich seltsam verhalten.

Um dies zu beseitigen, habe ich eine Singleton-Funktion verwendet, die von einer Factory bereitgestellt wird, von der aus Sie inactivityTimeoutFactory.switchTimeoutOn()und inactivityTimeoutFactory.switchTimeoutOff()in Ihrer Winkelanwendung die Abmeldung aufgrund von Inaktivitätsfunktionen aktivieren bzw. deaktivieren würden.

Auf diese Weise stellen Sie sicher, dass Sie nur eine einzige Instanz der Ereignishandler ausführen, unabhängig davon, wie oft Sie versuchen, das Timeout-Verfahren zu aktivieren. Dies erleichtert die Verwendung in Anwendungen, in denen sich der Benutzer möglicherweise von verschiedenen Routen aus anmeldet.

Hier ist mein Code:

'use strict';

angular.module('YOURMODULENAME')
  .factory('inactivityTimeoutFactory', inactivityTimeoutFactory);

inactivityTimeoutFactory.$inject = ['$document', '$timeout', '$state'];

function inactivityTimeoutFactory($document, $timeout, $state)  {
  function InactivityTimeout () {
    // singleton
    if (InactivityTimeout.prototype._singletonInstance) {
      return InactivityTimeout.prototype._singletonInstance;
    }
    InactivityTimeout.prototype._singletonInstance = this;

    // Timeout timer value
    const timeToLogoutMs = 15*1000*60; //15 minutes
    const timeToWarnMs = 13*1000*60; //13 minutes

    // variables
    let warningTimer;
    let timeoutTimer;
    let isRunning;

    function switchOn () {
      if (!isRunning) {
        switchEventHandlers("on");
        startTimeout();
        isRunning = true;
      }
    }

    function switchOff()  {
      switchEventHandlers("off");
      cancelTimersAndCloseMessages();
      isRunning = false;
    }

    function resetTimeout() {
      cancelTimersAndCloseMessages();
      // reset timeout threads
      startTimeout();
    }

    function cancelTimersAndCloseMessages () {
      // stop any pending timeout
      $timeout.cancel(timeoutTimer);
      $timeout.cancel(warningTimer);
      // remember to close any messages
    }

    function startTimeout () {
      warningTimer = $timeout(processWarning, timeToWarnMs);
      timeoutTimer = $timeout(processLogout, timeToLogoutMs);
    }

    function processWarning() {
      // show warning using popup modules, toasters etc...
    }

    function processLogout() {
      // go to logout page. The state might differ from project to project
      $state.go('authentication.logout');
    }

    function switchEventHandlers(toNewStatus) {
      const body = angular.element($document);
      const trackedEventsList = [
        'keydown',
        'keyup',
        'click',
        'mousemove',
        'DOMMouseScroll',
        'mousewheel',
        'mousedown',
        'touchstart',
        'touchmove',
        'scroll',
        'focus'
      ];

      trackedEventsList.forEach((eventName) => {
        if (toNewStatus === 'off') {
          body.off(eventName, resetTimeout);
        } else if (toNewStatus === 'on') {
          body.on(eventName, resetTimeout);
        }
      });
    }

    // expose switch methods
    this.switchOff = switchOff;
    this.switchOn = switchOn;
  }

  return {
    switchTimeoutOn () {
      (new InactivityTimeout()).switchOn();
    },
    switchTimeoutOff () {
      (new InactivityTimeout()).switchOff();
    }
  };

}

Answer 1

78

Ist es möglich festzustellen, ob ein Benutzer inaktiv ist, und ihn nach etwa 10 Minuten Inaktivität mithilfe von anglejs automatisch abzumelden?

Ich habe versucht, die Verwendung von jQuery zu vermeiden, aber ich kann keine Tutorials oder Artikel dazu finden, wie dies in anglejs gemacht wird. Jede Hilfe wäre dankbar.

angularjs ng-idle user2101411
quelle

Siehe paulirish.com/2009/jquery-idletimer-plugin und github.com/ehynds/jquery-idle-timeout

Stewie

6

@Stewie schrieb er, dass er versucht, jQuery zu vermeiden ...

Sebastian

Haben Sie Optionen für diese Funktionalität?

HP 411

Mögliches Duplikat von Angular Session Timeout und Management

m.sarhan

Answer 2

Siehe paulirish.com/2009/jquery-idletimer-plugin und github.com/ehynds/jquery-idle-timeout

Stewie

Answer 3

6

@Stewie schrieb er, dass er versucht, jQuery zu vermeiden ...

Sebastian

Answer 4

Haben Sie Optionen für diese Funktionalität?

HP 411

Answer 5

Mögliches Duplikat von Angular Session Timeout und Management

m.sarhan

Answer 6

Ich habe ein Modul namens geschrieben Ng-Idle, das Ihnen in dieser Situation nützlich sein kann. Hier ist die Seite, die Anweisungen und eine Demo enthält.

Grundsätzlich verfügt es über einen Dienst, der einen Timer für Ihre Leerlaufdauer startet, der durch Benutzeraktivitäten (Ereignisse wie Klicken, Scrollen, Tippen) unterbrochen werden kann. Sie können das Zeitlimit auch manuell unterbrechen, indem Sie eine Methode für den Dienst aufrufen. Wenn das Zeitlimit nicht unterbrochen wird, zählt es eine Warnung herunter, in der Sie den Benutzer benachrichtigen können, dass er abgemeldet wird. Wenn sie nicht antworten, nachdem der Warnungs-Countdown 0 erreicht hat, wird ein Ereignis gesendet, auf das Ihre Anwendung reagieren kann. In Ihrem Fall kann eine Anforderung ausgegeben werden, die Sitzung zu beenden und auf eine Anmeldeseite umzuleiten.

Darüber hinaus verfügt es über einen Keep-Alive-Dienst, der in bestimmten Abständen eine URL anpingen kann. Dies kann von Ihrer App verwendet werden, um die Sitzung eines Benutzers am Leben zu erhalten, während dieser aktiv ist. Der inaktive Dienst wird standardmäßig in den Keep-Alive-Dienst integriert, wobei der Ping-Vorgang unterbrochen wird, wenn er inaktiv wird, und bei seiner Rückkehr fortgesetzt wird.

Alle Informationen, die Sie für den Einstieg benötigen, finden Sie auf der Website mit weiteren Details im Wiki . Hier ist jedoch ein Ausschnitt aus der Konfiguration, der zeigt, wie Sie sie abmelden, wenn sie eine Zeitüberschreitung aufweisen.

angular.module('demo', ['ngIdle'])
// omitted for brevity
.config(function(IdleProvider, KeepaliveProvider) {
  IdleProvider.idle(10*60); // 10 minutes idle
  IdleProvider.timeout(30); // after 30 seconds idle, time the user out
  KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
})
.run(function($rootScope) {
    $rootScope.$on('IdleTimeout', function() {
        // end their session and redirect to login
    });
});

Answer 7

2

Hey, dein Ansatz hat perfekt für mich funktioniert, bis ich Probleme mit der mobilen Safari hatte, bei denen Timeouts angehalten werden, wenn die Seite in den Hintergrund tritt. Ich musste es ändern, um auf jeder Uhr einen Leerlaufzeitstempel zu setzen, der dann bei Interrupt aktualisiert wird. Vor jedem Update bei Interrupt überprüfe ich jedoch, ob das idleTimeout nicht abgelaufen ist, was das Safari-Problem umgeht (nicht automatisch abmelden, sondern beim ersten Berühren / Maus / Klicken abmelden).

Brian F

Answer 8

@BrianF Interessant. Wenn Sie bereit und in der Lage sind, würde mich eine Pull-Anfrage mit Ihren Änderungen interessieren oder zumindest ein Problem, das mit einem Beispiel des Codes mit Ihren Änderungen offen ist.

moribvndvs

Answer 9

Schauen Sie sich ein Beispiel an, das ich auf github übergeben habe - github.com/brianfoody/Angular/blob/master/src/idle.js . Ich verwende nicht die Countdown- oder KeepAlive-Funktionalität, daher war dies nur eine abgespeckte Version, aber Sie sollten in der Lage sein, meinen Fix mit idleCutOffMoment

Brian F

Answer 10

3

@BrianF Danke dafür. Mir ist klar, dass Sie eine angepasste Version verwenden, sodass dies möglicherweise keine Rolle spielt, aber ich werde diese einer offiziellen Version hinzufügen.

moribvndvs

Answer 11

1

@ HackedByChinese Danke :) in deinem Snippet, ist das alles, was du tun musst, damit es funktioniert? Es hat bei mir nicht funktioniert, bis ich Idle.watch()die .run()Funktion hinzugefügt habe . Das IdleTimeoutEreignis wurde überhaupt nicht ausgelöst, bis ich das getan habe. Ich habe den Anruf Idle.watch()auf Ihrer Github-Demo gesehen, also habe ich ihn von dort bekommen.

Boris

Answer 12

Ansicht Demo , die verwendet angularjsund Ihre Browser - Log sehen

<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>
</body>

<script>

var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {    
    console.log('starting run');

    // Timeout timer value
    var TimeOutTimerValue = 5000;

    // Start a timeout
    var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    var bodyElement = angular.element($document);

    /// Keyboard Events
    bodyElement.bind('keydown', function (e) { TimeOut_Resetter(e) });  
    bodyElement.bind('keyup', function (e) { TimeOut_Resetter(e) });    

    /// Mouse Events    
    bodyElement.bind('click', function (e) { TimeOut_Resetter(e) });
    bodyElement.bind('mousemove', function (e) { TimeOut_Resetter(e) });    
    bodyElement.bind('DOMMouseScroll', function (e) { TimeOut_Resetter(e) });
    bodyElement.bind('mousewheel', function (e) { TimeOut_Resetter(e) });   
    bodyElement.bind('mousedown', function (e) { TimeOut_Resetter(e) });        

    /// Touch Events
    bodyElement.bind('touchstart', function (e) { TimeOut_Resetter(e) });       
    bodyElement.bind('touchmove', function (e) { TimeOut_Resetter(e) });        

    /// Common Events
    bodyElement.bind('scroll', function (e) { TimeOut_Resetter(e) });       
    bodyElement.bind('focus', function (e) { TimeOut_Resetter(e) });    

    function LogoutByTimer()
    {
        console.log('Logout');

        ///////////////////////////////////////////////////
        /// redirect to another page(eg. Login.html) here
        ///////////////////////////////////////////////////
    }

    function TimeOut_Resetter(e)
    {
        console.log('' + e);

        /// Stop the pending timeout
        $timeout.cancel(TimeOut_Thread);

        /// Reset the timeout
        TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    }

})
</script>

</html>

Der folgende Code ist eine reine Javascript-Version

<html>
    <head>
        <script type="text/javascript">         
            function logout(){
                console.log('Logout');
            }

            function onInactive(millisecond, callback){
                var wait = setTimeout(callback, millisecond);               
                document.onmousemove = 
                document.mousedown = 
                document.mouseup = 
                document.onkeydown = 
                document.onkeyup = 
                document.focus = function(){
                    clearTimeout(wait);
                    wait = setTimeout(callback, millisecond);                       
                };
            }           
        </script>
    </head> 
    <body onload="onInactive(5000, logout);"></body>
</html>

AKTUALISIEREN

Ich habe meine Lösung als @ Tom-Vorschlag aktualisiert.

<!DOCTYPE html>
<html ng-app="Application_TimeOut">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>
</body>

<script>
var app = angular.module('Application_TimeOut', []);
app.run(function($rootScope, $timeout, $document) {    
    console.log('starting run');

    // Timeout timer value
    var TimeOutTimerValue = 5000;

    // Start a timeout
    var TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    var bodyElement = angular.element($document);

    angular.forEach(['keydown', 'keyup', 'click', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'focus'], 
    function(EventName) {
         bodyElement.bind(EventName, function (e) { TimeOut_Resetter(e) });  
    });

    function LogoutByTimer(){
        console.log('Logout');
        ///////////////////////////////////////////////////
        /// redirect to another page(eg. Login.html) here
        ///////////////////////////////////////////////////
    }

    function TimeOut_Resetter(e){
        console.log(' ' + e);

        /// Stop the pending timeout
        $timeout.cancel(TimeOut_Thread);

        /// Reset the timeout
        TimeOut_Thread = $timeout(function(){ LogoutByTimer() } , TimeOutTimerValue);
    }

})
</script>
</html>

Klicken Sie hier, um die aktualisierte Version bei Plunker anzuzeigen

Answer 13

2

Eine coole Lösung könnte kürzer sein, wenn Sie die Ereignisnamen durchlaufen: var eventNames = ['keydown', 'keyup', 'click', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart' , 'touchmove', 'scroll', 'focus']; für (var i = 0; i <eventNames.length; i ++) {bodyElement.bind (eventNames [i], TimeOut_Resetter); }

Tom

Answer 14

@ Tom danke für deinen Vorschlag, ich habe meine Antwort als deinen Vorschlag aktualisiert.

Frank Myat Do

Answer 15

Ich weiß, dass dies eine alte Antwort ist, aber für jeden, der dies liest, sollten Sie Ereignisse im Abmeldeabschnitt deaktivieren. Im Moment (Dezember 2017) ist bind veraltet, daher sollten Sie ausführen bodyElement.on(...)und innerhalb LogoutByTimerausführenbodyElement.off(...)

GChamon

Answer 16

Das ist ziemlich cool. Ich habe $ uib.modal hinzugefügt, um den Benutzer vor dem Onlick zu warnen.

Fergus

Answer 17

Ihre Lösung wurde leicht an meine Projektspezifikationen angepasst, aber es funktioniert! Vielen Dank!

mp_loki

Answer 18

19

Es sollte verschiedene Möglichkeiten geben, und jeder Ansatz sollte besser zu einer bestimmten Anwendung passen als zu einer anderen. Bei den meisten Apps können Sie einfach nur Tasten- oder Mausereignisse verarbeiten und einen Abmelde-Timer entsprechend aktivieren / deaktivieren. Das heißt, auf der Oberseite meines Kopfes überwacht eine "ausgefallene" AngularJS-y-Lösung die Digest-Schleife, wenn während der letzten [angegebenen Dauer] keine ausgelöst wurde, dann melden Sie sich ab. Etwas wie das.

app.run(function($rootScope) {
  var lastDigestRun = new Date();
  $rootScope.$watch(function detectIdle() {
    var now = new Date();
    if (now - lastDigestRun > 10*60*60) {
       // logout here, like delete cookie, navigate to login ...
    }
    lastDigestRun = now;
  });
});

Buu Nguyen
quelle

4

Ich denke, dass dies eine ziemlich neuartige Lösung ist und habe ziemlich viel damit herumgespielt. Das Hauptproblem, das ich habe, ist, dass dies bei vielen anderen Ereignissen ausgeführt wird, die möglicherweise nicht vom Benutzer gesteuert werden ($ Intervalle, $ Zeitüberschreitungen usw.), und diese Ereignisse Ihren lastDigestRun zurücksetzen.

Seth M.

1

Sie können diese Methode verwenden und statt bei jedem Digest nur nach bestimmten Ereignissen suchen, wie es das ngIdle-Modul unten tut. dh $ document.find ('body'). on ('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', checkIdleTimeout);

Brian F

Ich mag die Idee der Digest-Uhr, aber wenn Sie Web-Sockets haben oder etwas läuft, können Sie immer damit aktiv sein. Hinweise, die den Punkt besiegen.

Amcdnl

@BrianF Mmh löst webSockets Ereignisse wie "mousemove", "keydown", "DOM-xxx" aus, wie Brian sagt? Normalerweise wäre das nicht der Fall, oder?

Freeman

2

"if (now - lastDigestRun> 10 * 60 * 60) {" bedeutet das, dass ich 1 Minute warten muss?

Tomasz Waszczyk

Answer 19

4

Ich denke, dass dies eine ziemlich neuartige Lösung ist und habe ziemlich viel damit herumgespielt. Das Hauptproblem, das ich habe, ist, dass dies bei vielen anderen Ereignissen ausgeführt wird, die möglicherweise nicht vom Benutzer gesteuert werden ($ Intervalle, $ Zeitüberschreitungen usw.), und diese Ereignisse Ihren lastDigestRun zurücksetzen.

Seth M.

Answer 20

1

Sie können diese Methode verwenden und statt bei jedem Digest nur nach bestimmten Ereignissen suchen, wie es das ngIdle-Modul unten tut. dh $ document.find ('body'). on ('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', checkIdleTimeout);

Brian F

Answer 21

Ich mag die Idee der Digest-Uhr, aber wenn Sie Web-Sockets haben oder etwas läuft, können Sie immer damit aktiv sein. Hinweise, die den Punkt besiegen.

Amcdnl

Answer 22

@BrianF Mmh löst webSockets Ereignisse wie "mousemove", "keydown", "DOM-xxx" aus, wie Brian sagt? Normalerweise wäre das nicht der Fall, oder?

Freeman

Answer 23

2

"if (now - lastDigestRun> 10 * 60 * 60) {" bedeutet das, dass ich 1 Minute warten muss?

Tomasz Waszczyk

Answer 24

11

Gespielt mit Boos Ansatz, mag jedoch nicht die Tatsache, dass der Benutzer erst nach dem Ausführen eines anderen Digests gestartet wurde, was bedeutet, dass der Benutzer angemeldet bleibt, bis er versucht, etwas auf der Seite zu tun, und dann sofort gestartet wird.

Ich versuche, die Abmeldung mithilfe eines Intervalls zu erzwingen, das jede Minute überprüft, ob die letzte Aktionszeit mehr als 30 Minuten zurückliegt. Ich habe es an $ routeChangeStart angehängt, könnte aber auch an $ rootScope angehängt werden. $ Watch wie in Boos Beispiel.

app.run(function($rootScope, $location, $interval) {

    var lastDigestRun = Date.now();
    var idleCheck = $interval(function() {
        var now = Date.now();            
        if (now - lastDigestRun > 30*60*1000) {
           // logout
        }
    }, 60*1000);

    $rootScope.$on('$routeChangeStart', function(evt) {
        lastDigestRun = Date.now();  
    });
});

v-tec
quelle

1

Schönes Beispiel. In Zeile 3 "var lastRun = Date.now ();" Ich glaube, Sie meinten, die Variable sei "lastDigestRun"

Martin

Aus Versuchsgründen habe ich es nach einer Minute Inaktivität auf Timeout geändert. Und es bleibt eine Zeitüberschreitung, während sich der Benutzer mitten in der Aktivität befindet. was gibt?

BHR

Die Verwendung $rootScope.$watchin diesem Fall würde das Umschalten auf erfordern setInterval, da $intervalbei jedem Funktionsaufruf ein Digest ausgelöst wird, wodurch Ihr Digest effektiv zurückgesetzt wird lastDigestRun.

Alalonde

@ v-tec Ich verwende Ihren Ansatz in meiner Anwendung, aber wie kann ich das Intervall, das ich nicht stoppen kann, mit clearInterval löschen? Dies ist die Demo: github.com/MohamedSahir/UserSession

Mohamed Sahir

Answer 25

1

Schönes Beispiel. In Zeile 3 "var lastRun = Date.now ();" Ich glaube, Sie meinten, die Variable sei "lastDigestRun"

Martin

Answer 26

Aus Versuchsgründen habe ich es nach einer Minute Inaktivität auf Timeout geändert. Und es bleibt eine Zeitüberschreitung, während sich der Benutzer mitten in der Aktivität befindet. was gibt?

BHR

Answer 27

Die Verwendung $rootScope.$watchin diesem Fall würde das Umschalten auf erfordern setInterval, da $intervalbei jedem Funktionsaufruf ein Digest ausgelöst wird, wodurch Ihr Digest effektiv zurückgesetzt wird lastDigestRun.

Alalonde

Answer 28

@ v-tec Ich verwende Ihren Ansatz in meiner Anwendung, aber wie kann ich das Intervall, das ich nicht stoppen kann, mit clearInterval löschen? Dies ist die Demo: github.com/MohamedSahir/UserSession

Mohamed Sahir

Answer 29

Sie können die Verwendung auch angular-activity-monitoreinfacher durchführen als das Injizieren mehrerer Anbieter, und es wird setInterval()(im Vergleich zu Winkeln $interval) verwendet, um das manuelle Auslösen einer Digest-Schleife zu vermeiden (was wichtig ist, um zu verhindern, dass Elemente unbeabsichtigt am Leben bleiben).

Letztendlich abonnieren Sie nur einige Ereignisse, die bestimmen, wann ein Benutzer inaktiv ist oder sich nähert. Wenn Sie also einen Benutzer nach 10 Minuten Inaktivität abmelden möchten, können Sie das folgende Snippet verwenden:

angular.module('myModule', ['ActivityMonitor']);

MyController.$inject = ['ActivityMonitor'];
function MyController(ActivityMonitor) {
  // how long (in seconds) until user is considered inactive
  ActivityMonitor.options.inactive = 600;

  ActivityMonitor.on('inactive', function() {
    // user is considered inactive, logout etc.
  });

  ActivityMonitor.on('keepAlive', function() {
    // items to keep alive in the background while user is active
  });

  ActivityMonitor.on('warning', function() {
    // alert user when they're nearing inactivity
  });
}

Answer 30

Bitte posten Sie keine identischen Antworten auf mehrere Fragen. Veröffentlichen Sie eine gute Antwort und stimmen Sie ab, um die anderen Fragen als Duplikate zu schließen. Wenn die Frage kein Duplikat ist, passen Sie Ihre Antworten auf die Frage an .

Martijn Pieters

Answer 31

Ich implementiere diese Lösung, ziemlich cool, aber ich habe Zweifel, verfolgt sie auch andere Browseraktivitäten? Ich möchte nur meine Anwendung einschränken, was bedeutet, dass der Benutzer in meiner Anwendung

inaktiv ist und sich

Answer 32

@ user1532976: Skripte in einer Webanwendung brechen nicht aus dem Fenster (Tab) heraus, in dem sie sich befinden. Also nein, es werden keine anderen Aktivitäten verfolgt

DdW

Answer 33

Ich habe Buus Ansatz ausprobiert und konnte ihn aufgrund der schieren Anzahl von Ereignissen, die die Ausführung des Fermenters auslösen, einschließlich der Ausführung von $ interval- und $ timeout-Funktionen, nicht ganz richtig machen. Dadurch bleibt die Anwendung in einem Zustand, in dem sie unabhängig von Benutzereingaben niemals inaktiv ist.

Wenn Sie tatsächlich die Leerlaufzeit des Benutzers verfolgen müssen, bin ich mir nicht sicher, ob es einen guten Winkelansatz gibt. Ich würde vorschlagen, dass Witoldz hier https://github.com/witoldsz/angular-http-auth einen besseren Ansatz vertritt . Dieser Ansatz fordert den Benutzer auf, sich erneut zu authentifizieren, wenn eine Aktion ausgeführt wird, für die seine Anmeldeinformationen erforderlich sind. Nachdem sich der Benutzer authentifiziert hat, wird die vorherige fehlgeschlagene Anforderung erneut verarbeitet und die Anwendung wird fortgesetzt, als ob nichts passiert wäre.

Dies behebt das Problem, dass die Sitzung des Benutzers möglicherweise abläuft, während er aktiv ist, da er auch nach Ablauf seiner Authentifizierung den Anwendungsstatus beibehalten und keine Arbeit verlieren kann.

Wenn Sie eine Sitzung auf Ihrem Client haben (Cookies, Token usw.), können Sie diese ebenfalls ansehen und Ihren Abmeldevorgang auslösen, wenn sie ablaufen.

app.run(['$interval', function($interval) {
  $interval(function() {
    if (/* session still exists */) {
    } else {
      // log out of client
    }
  }, 1000);
}]);

UPDATE: Hier ist ein Plunk, der die Besorgnis demonstriert. http://plnkr.co/edit/ELotD8W8VAeQfbYFin1W . Dies zeigt, dass die Laufzeit des Fermenters nur aktualisiert wird, wenn das Intervall aktiviert ist. Sobald das Intervall die maximale Anzahl erreicht hat, läuft der Fermenter nicht mehr.

Answer 34

ng-Idle sieht nach dem richtigen Weg aus, aber ich konnte die Modifikationen von Brian F nicht herausfinden und wollte auch eine Auszeit für eine Schlafsitzung nehmen. Außerdem hatte ich einen ziemlich einfachen Anwendungsfall im Sinn. Ich habe es auf den folgenden Code reduziert. Es bindet Ereignisse ein, um ein Timeout-Flag zurückzusetzen (träge in $ rootScope platziert). Es erkennt nur, dass das Timeout aufgetreten ist, wenn der Benutzer zurückkehrt (und ein Ereignis auslöst), aber das ist gut genug für mich. Ich konnte Angulars $ location nicht zum Laufen bringen, aber mit document.location.href wird der Job erledigt.

Ich habe dies in meine app.js gesteckt, nachdem die .config ausgeführt wurde.

app.run(function($rootScope,$document) 
{
  var d = new Date();
  var n = d.getTime();  //n in ms

    $rootScope.idleEndTime = n+(20*60*1000); //set end time to 20 min from now
    $document.find('body').on('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', checkAndResetIdle); //monitor events

    function checkAndResetIdle() //user did something
    {
      var d = new Date();
      var n = d.getTime();  //n in ms

        if (n>$rootScope.idleEndTime)
        {
            $document.find('body').off('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart'); //un-monitor events

            //$location.search('IntendedURL',$location.absUrl()).path('/login'); //terminate by sending to login page
            document.location.href = 'https://whatever.com/myapp/#/login';
            alert('Session ended due to inactivity');
        }
        else
        {
            $rootScope.idleEndTime = n+(20*60*1000); //reset end time
        }
    }
});

Answer 35

1

Ich denke, Buus Digest Cycle Watch ist genial. Danke für das Teilen. Wie andere angemerkt haben, führt $ interval auch dazu, dass der Digest-Zyklus ausgeführt wird. Wir könnten zum automatischen Abmelden des Benutzers setInterval verwenden, das keine Digest-Schleife verursacht.

app.run(function($rootScope) {
    var lastDigestRun = new Date();
    setInterval(function () {
        var now = Date.now();
        if (now - lastDigestRun > 10 * 60 * 1000) {
          //logout
        }
    }, 60 * 1000);

    $rootScope.$watch(function() {
        lastDigestRun = new Date();
    });
});

Declan McLaughlin
quelle

"10 * 60 * 1000" ist es eine Anzahl von Millisekunden?

Tomasz Waszczyk

Welche Methode funktioniert in der Leistungsansicht besser? Letzte Zusammenfassung oder Ereignisse beobachten ???

Ravi Shanker Reddy

Answer 36

"10 * 60 * 1000" ist es eine Anzahl von Millisekunden?

Tomasz Waszczyk

Answer 37

Welche Methode funktioniert in der Leistungsansicht besser? Letzte Zusammenfassung oder Ereignisse beobachten ???

Ravi Shanker Reddy

Answer 38

Ich habe ng-idle dafür verwendet und ein wenig Logout- und Token-Null-Code hinzugefügt, und es funktioniert einwandfrei. Sie können dies versuchen. Vielen Dank an @HackedByChinese für das Erstellen eines so schönen Moduls.

In IdleTimeout habe ich gerade meine Sitzungsdaten und mein Token gelöscht.

Hier ist mein Code

$scope.$on('IdleTimeout', function () {
        closeModals();
        delete $window.sessionStorage.token;
        $state.go("login");
        $scope.timedout = $uibModal.open({
            templateUrl: 'timedout-dialog.html',
            windowClass: 'modal-danger'
        });
    });

Answer 39

Ich möchte die Antworten auf diejenigen erweitern, die dies in einem größeren Projekt verwenden. Sie könnten versehentlich mehrere Ereignishandler anhängen und das Programm würde sich seltsam verhalten.

Um dies zu beseitigen, habe ich eine Singleton-Funktion verwendet, die von einer Factory bereitgestellt wird, von der aus Sie inactivityTimeoutFactory.switchTimeoutOn()und inactivityTimeoutFactory.switchTimeoutOff()in Ihrer Winkelanwendung die Abmeldung aufgrund von Inaktivitätsfunktionen aktivieren bzw. deaktivieren würden.

Auf diese Weise stellen Sie sicher, dass Sie nur eine einzige Instanz der Ereignishandler ausführen, unabhängig davon, wie oft Sie versuchen, das Timeout-Verfahren zu aktivieren. Dies erleichtert die Verwendung in Anwendungen, in denen sich der Benutzer möglicherweise von verschiedenen Routen aus anmeldet.

Hier ist mein Code:

'use strict';

angular.module('YOURMODULENAME')
  .factory('inactivityTimeoutFactory', inactivityTimeoutFactory);

inactivityTimeoutFactory.$inject = ['$document', '$timeout', '$state'];

function inactivityTimeoutFactory($document, $timeout, $state)  {
  function InactivityTimeout () {
    // singleton
    if (InactivityTimeout.prototype._singletonInstance) {
      return InactivityTimeout.prototype._singletonInstance;
    }
    InactivityTimeout.prototype._singletonInstance = this;

    // Timeout timer value
    const timeToLogoutMs = 15*1000*60; //15 minutes
    const timeToWarnMs = 13*1000*60; //13 minutes

    // variables
    let warningTimer;
    let timeoutTimer;
    let isRunning;

    function switchOn () {
      if (!isRunning) {
        switchEventHandlers("on");
        startTimeout();
        isRunning = true;
      }
    }

    function switchOff()  {
      switchEventHandlers("off");
      cancelTimersAndCloseMessages();
      isRunning = false;
    }

    function resetTimeout() {
      cancelTimersAndCloseMessages();
      // reset timeout threads
      startTimeout();
    }

    function cancelTimersAndCloseMessages () {
      // stop any pending timeout
      $timeout.cancel(timeoutTimer);
      $timeout.cancel(warningTimer);
      // remember to close any messages
    }

    function startTimeout () {
      warningTimer = $timeout(processWarning, timeToWarnMs);
      timeoutTimer = $timeout(processLogout, timeToLogoutMs);
    }

    function processWarning() {
      // show warning using popup modules, toasters etc...
    }

    function processLogout() {
      // go to logout page. The state might differ from project to project
      $state.go('authentication.logout');
    }

    function switchEventHandlers(toNewStatus) {
      const body = angular.element($document);
      const trackedEventsList = [
        'keydown',
        'keyup',
        'click',
        'mousemove',
        'DOMMouseScroll',
        'mousewheel',
        'mousedown',
        'touchstart',
        'touchmove',
        'scroll',
        'focus'
      ];

      trackedEventsList.forEach((eventName) => {
        if (toNewStatus === 'off') {
          body.off(eventName, resetTimeout);
        } else if (toNewStatus === 'on') {
          body.on(eventName, resetTimeout);
        }
      });
    }

    // expose switch methods
    this.switchOff = switchOff;
    this.switchOn = switchOn;
  }

  return {
    switchTimeoutOn () {
      (new InactivityTimeout()).switchOn();
    },
    switchTimeoutOff () {
      (new InactivityTimeout()).switchOff();
    }
  };

}

Automatische Abmeldung mit Angularjs basierend auf dem inaktiven Benutzer

Antworten:

AKTUALISIEREN