ng2 idle
1.0.0
Un module pour répondre aux utilisateurs d'inactivité dans les applications angulaires. Ceci est une réécriture du module NG-IDLE; Cependant, si vous utilisez Angular 1, vous devez utiliser ce module.
La communauté angulaire a besoin de vous! Je recherche un nouveau développeur ou équipe pour prendre le contrôle de ce module. Ce sont les responsabilités que les candidats intéressés devraient considérer:
Idéalement, un candidat:
Veuillez nous contacter si vous êtes intéressé!
Visitez https://grbsk.github.io/ng2-idle pour afficher un exemple simple avec des instructions de démarrage rapide.
@ng-idle est expédié via NPM. Vous pouvez installer le package en utilisant la commande suivante pour la dernière version prise en charge d'Angular:
npm install --save @ng-idle/core
L'intégration et la configuration du package dans votre application nécessitent quelques étapes supplémentaires. Veuillez visiter @ ng-idle-example pour la source et les instructions sur la façon de commencer.
L'application principale de ce module est de détecter quand les utilisateurs sont inactifs. Il peut également être utilisé pour avertir les utilisateurs d'un délai d'attente imminent, puis les chronométrer. Le cœur de ce module est le service Idle qui fait de son mieux - en fonction de votre configuration - pour détecter quand un utilisateur est actif ou inactif et transmettre ces informations à votre application afin qu'elle puisse répondre de manière appropriée.
La fonctionnalité de base peut être trouvée dans le package @ng-idle/core via NPM.
Modules supplémentaires pour étendre les fonctionnalités:
@ng-idle/keepalive (voir ci-dessous) Dans un cas d'utilisation courant où il est utilisé pour la gestion de session, vous devrez peut-être signaler périodiquement au serveur que l'utilisateur est toujours connecté et actif. Si vous avez besoin de cette fonctionnalité, @ng-idle peut éventuellement s'intégrer avec @ng-idle/keepalive . @ng-idle instruisera @ng-idle/keepalive pour faire un ping pendant que l'utilisateur est actif, et s'arrêtez une fois qu'ils deviennent inactifs ou des temps. Lorsque l'utilisateur reprend l'activité ou que l'état d'inactivité est réinitialisé, il cinglera immédiatement et reprendra le ping. Veuillez noter que l'intégration Keepalive est facultative et vous devez installer et configurer @ng-idle/keepalive séparément pour obtenir cette fonctionnalité. Vous pouvez implémenter le vôtre en étendant KeepaliveSvc et en le configurant en tant que fournisseur dans votre application pour la classe KeepaliveSvc .
Une interruption est toute source d'entrée (généralement de l'utilisateur, mais pourrait être des choses comme d'autres onglets ou un événement) qui peuvent être utilisés pour signaler au Idle que la montre inactive doit être interrompue ou réinitialisée. Contrairement à ng-idle , ces sources ne sont pas codées en dur; Vous pouvez étendre InterruptSource ou l'une des sources intégrées en fonction de vos objectifs. Cette fonctionnalité est également utile pour gérer le bruit d'entrée qui peut affliger votre cas d'utilisation particulier. Il peut également être utilisé pour cibler des éléments spécifiques sur une page plutôt que sur l'ensemble du document ou de la fenêtre. Les sources suivantes sont intégrées dans ce package:
InterruptSource (Résumé): un type de base que vous pouvez implémenter pour créer votre propre source.EventTargetInterruptSource : tout objet qui implémente EventTarget , comme un HTMLElement ou Window . Prend l'objet qui est la source et une chaîne délimitée dans l'espace contenant les événements qui provoquent une interruption.DocumentInterruptSource : recherche des événements (dans une chaîne délimitée d'espace) qui bouillonnent vers le document.documentElement (nœud html ).WindowInterruptSource : recherche des événements (dans une chaîne délimitée d'espace) qui bouillonne jusqu'à la Window .StorageInterruptSource : recherche uniquement l'événement Storage de l'objet Window . Obligatoire pour LocalStorageExpiry . Remarque : vous devez configurer vous-même les sources lorsque vous initialisez l'application. Par défaut, aucune interruption n'est configurée. Vous pouvez utiliser une configuration analogue à la valeur par défaut de ng-idle en important DEFAULT_INTERRUPTSOURCES et en passant cette référence à Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); .
Une autre caractéristique portée par ng-idle est la possibilité de stocker une valeur d'expiration dans un magasin où plusieurs onglets ou Windows exécutant la même application peuvent écrire. Généralement, ce magasin est le localStorage , mais pourrait être des cookies ou ce que vous voulez. Le but de cette expiration et de l'expiration du magasin est double: d'abord, pour empêcher une fenêtre de ne pas chronométrer si elle dort ou s'arrête plus longtemps que la période de délai d'expiration configurée. Deuxièmement, il peut être utilisé de sorte que l'activité dans un seul onglet ou une fenêtre empêche d'autres onglets ou fenêtres dans la même application à partir de la sortie.
Par défaut, un type LocalStorageExpiry est fourni, ce qui gardera simplement une expiration dans le localstorage. Il remplira toutes les objectifs mentionnés ci-dessus. Si vous ne souhaitez pas prendre en charge plusieurs onglets ou fenêtres, vous pouvez utiliser SimpleExpiry . En d'autres termes, SimpleExpiry ne coordonne pas la dernière activité entre les onglets ou les fenêtres. Si vous souhaitez stocker la valeur d'expiration dans un autre magasin, comme les cookies, vous devrez utiliser ou créer une implémentation qui le prend en charge. Vous pouvez créer le vôtre en étendant IdleExpiry ou SimpleExpiry et en le configurant en tant que fournisseur pour la classe IdleExpiry .
L'injecteur de dépendance dans Angular soutient une stratégie d'injection hiérarchique. Cela vous permet de créer une instance de Idle à la portée dont vous avez besoin, et il peut y avoir plusieurs instances. Cela vous permet d'avoir deux montres distinctes, par exemple, sur deux éléments différents de la page.
Si vous utilisez l'expiration par défaut ( LocalStorageExpiry ), vous devrez définir un nom pour chaque inactif avec Idle.setIdleName('yourIdleName') , sinon la même clé sera utilisée dans le LocalStorage et cette fonction ne fonctionnera pas comme prévu.
Par exemple, envisagez une application par e-mail. Pour une sécurité accrue, l'application peut souhaiter déterminer quand l'utilisateur est inactif et les déconnecter, ce qui lui donne une chance de prolonger sa session s'il est toujours sur l'ordinateur et vient d'être distrait. De plus, pour une sécurité encore meilleure, le serveur peut émettre la session de l'utilisateur un jeton de sécurité qui expire après 5 minutes d'inactivité. L'utilisateur peut prendre beaucoup plus de temps que cela pour taper son e-mail et l'envoyer. Il serait frustrant de constater que vous êtes déconnecté lorsque vous utilisez activement le logiciel!
@ng-idle/core peut détecter que l'utilisateur clique, tape, touche, défilement, etc. et sait que l'utilisateur est toujours actif. Il peut fonctionner avec @ng-idle/keepalive pour ping le serveur toutes les quelques minutes pour les connecter. Dans ce cas, tant que l'utilisateur fait quelque chose, ils restent connectés. S'il s'éloigne de l'ordinateur, nous pouvons présenter une boîte de dialogue d'avertissement, puis après un compte à rebours, déconnectez-les.
@ ng-idle / core utilise des événements DOM sur diverses cibles pour détecter l'activité utilisateur. Cependant, lors de l'utilisation du rendu SSR / universel, l'application n'est pas toujours en cours d'exécution dans le navigateur et peut donc ne pas avoir accès à ces cibles DOM, ce qui fait que votre application s'écrase ou lance des erreurs car elle essaie d'utiliser les globaux du navigateur comme document et window via @ ng-idle.
EventTargetInterruptSource et toutes les sources d'interruption qui en tirent (telles que DocumentInterruptSource , WindowInterruptSource et StorageInterruptSource ) sont conçues pour initialiser paresseusement les écouteurs cibles de l'événement pour la compatibilité avec le rendu côté serveur. L' EventTargetInterruptSource détectera si votre application est en cours d'exécution dans le navigateur ou sur le serveur en utilisant isPlatformServer et sautera l'initialisation des écouteurs cibles de l'événement lors de l'exécution sur le serveur.
Ce projet a été développé à l'aide de la version NodeJS trouvée dans le fichier .nvmrc . Vous pouvez rencontrer des problèmes en utilisant des versions plus anciennes. Essayez NVM ou similaire pour gérer différentes versions du nœud simultanément. Si vous utilisez NVM, vous pouvez exécuter nvm install pour télécharger et passer à la version correcte.
Une fois que vous avez cloné le référentiel, installez tous les packages à l'aide de npm :
npm install
Vous pouvez maintenant construire et exécuter tous les tests une fois avec une couverture.
npm test
Vous pouvez également exécuter des tests en continu pendant que vous apportez des modifications à un projet en exécutant npm run ng test <project name> ou ng test <project name> Si vous avez @angular/cli installé globalement.
npm run ng test core
...
npm run ng test keepalive
Remarque: Keepalive dépend du noyau. Si vous exécutez les tests continus ci-dessus, vous devrez d'abord npm build ou npm run ng build core et après avoir apporté des modifications au noyau. Cependant, npm test construira tous les modules et exécutera les tests en une seule photo.
Voir le guide contributif.
