ng2 idle
1.0.0
Angular 응용 프로그램에서 유휴 사용자에게 응답하기위한 모듈. 이것은 NG-Idle 모듈의 재 작성입니다. 그러나 Angular 1을 사용하는 경우 해당 모듈을 사용해야합니다.
Angular Community는 당신을 필요로합니다! 이 모듈의 유지 관리를 인수 할 새로운 개발자 또는 팀을 찾고 있습니다. 이들은 관심있는 후보자가 고려해야 할 책임입니다.
이상적으로 후보자 :
관심이 있으시면 연락하십시오!
https://grbsk.github.io/ng2-idle을 방문하여 빠른 시작 지침이있는 간단한 예제를보십시오.
@ng-idle 은 NPM을 통해 배송됩니다. 최신 지원되는 Angular 버전에 대해 다음 명령을 사용하여 패키지를 설치할 수 있습니다.
npm install --save @ng-idle/core
패키지를 응용 프로그램에 통합하고 구성하려면 몇 단계가 더 필요합니다. 소스와 방법에 대한 지침은 @ng-idle-example을 방문하십시오.
이 모듈의 기본 응용 프로그램은 사용자가 유휴 상태 일 때를 감지하는 것입니다. 또한 사용자에게 임박한 시간을 경고 한 다음 시간을 보내는 데 사용될 수 있습니다. 이 모듈의 핵심은 사용자가 활성화되거나 유휴 상태 일 때를 감지하고 해당 정보를 애플리케이션에 전달하여 적절하게 응답 할 수 있도록 최선을 다하는 Idle 서비스입니다.
핵심 기능은 NPM을 통해 @ng-idle/core 패키지에서 찾을 수 있습니다.
기능을 확장하기위한 추가 모듈 :
@ng-idle/keepalive (아래 참조) 세션 관리에 사용되는 공통 사용 사례에서는 사용자가 여전히 로그인하고 활성화되어 있음을 정기적으로 서버에 신호를 보내야 할 수도 있습니다. 해당 기능이 필요한 경우 @ng-idle 선택적으로 @ng-idle/keepalive 와 통합 할 수 있습니다. @ng-idle 사용자가 활성화되는 동안 @ng-idle/keepalive 핑에 지시하고 유휴 상태가되거나 시간이 오래 걸리면 중지합니다. 사용자가 활동을 재개하거나 유휴 상태가 재설정되면 즉시 핑 한 다음 핑을 재개합니다. KeepAlive 통합은 선택 사항 이며이 기능을 얻으려면 별도로 @ng-idle/keepalive 설치하고 구성해야합니다. KeepaliveSvc 확장하여 KeepaliveSvc 클래스의 애플리케이션에서 제공자로 구성하여 직접 구현할 수 있습니다.
인터럽트는 유휴 시계가 중단되거나 재설정되어야한다는 신호를 Idle 데 사용될 수있는 입력 소스 (일반적으로 사용자로부터 얻을 수 있지만 다른 탭이나 이벤트와 같은 것일 수 있음)입니다. ng-idle 달리 이러한 소스는 하드 코드가 아닙니다. 귀하의 목적에 맞게 InterruptSource 또는 내장 소스를 확장 할 수 있습니다. 이 기능은 또한 특정 사용 사례를 괴롭힐 수있는 입력 노이즈를 처리하는 데 유용합니다. 또한 전체 문서 나 창이 아닌 페이지의 특정 요소를 대상으로하는 데 사용될 수 있습니다. 다음 소스 가이 패키지에 내장되어 있습니다.
InterruptSource (Abstract) : 자신의 소스를 만들기 위해 구현할 수있는 기본 유형.EventTargetInterruptSource : HTMLElement 또는 Window 같은 EventTarget 구현하는 객체. 소스 인 객체와 인터럽트를 유발하는 이벤트가 포함 된 공간 구분 문자열을 취합니다.DocumentInterruptSource : document.documentElement ( html 노드)까지 거품이있는 이벤트 (공간 구분 된 문자열)를 찾습니다.WindowInterruptSource : Window 으로 거품이있는 이벤트 (공간 구분 된 문자열)를 찾습니다.StorageInterruptSource : Window 객체의 Storage 이벤트 만 찾습니다. LocalStorageExpiry 에 대한 의무. 참고 : 응용 프로그램을 초기화 할 때 소스를 직접 구성해야합니다. 기본적으로 인터럽트가 구성되지 않습니다. DEFAULT_INTERRUPTSOURCES 가져 와서 유휴 상태에 대한 참조를 전달하여 ng-idle 기본값과 유사한 구성을 사용할 수 있습니다 Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); .
ng-idle 에서 포팅 된 또 다른 기능은 동일한 응용 프로그램을 실행하는 여러 탭이나 Windows가 쓸 수있는 일부 매장에 만료 값을 저장하는 기능입니다. 일반적 으로이 상점은 localStorage 이지만 쿠키 또는 원하는대로 일 수 있습니다. 이 만료와 만료 상점의 목적은 두 가지입니다. 첫째, 창이 구성된 시간 초과 기간보다 잠을 자거나 일시 중지 할 때 창의 타이핑을 방지하지 않도록합니다. 둘째, 한 탭이나 창의 활동이 동일한 응용 프로그램의 다른 탭이나 창이 타이밍을 방지하는 것을 방지 할 수 있도록 사용할 수 있습니다.
기본적으로 LocalStorageExpiry 유형이 제공되며, 이는 LocalStorage의 만료를 추적합니다. 위에서 언급 한 모든 목적을 충족시킬 것입니다. 여러 탭이나 Windows를 지원하지 않으려면 SimpleExpiry 사용할 수 있습니다. 다시 말해서, SimpleExpiry 탭이나 창 사이의 마지막 활동을 조정하지 않습니다. 쿠키와 같은 다른 상점에 만료 가치를 저장하려면이를 지원하는 구현을 사용하거나 만들어야합니다. IdleExpiry 또는 SimpleExpiry 확장하여 IdleExpiry 클래스의 공급자로 구성하여 자신의 것을 만들 수 있습니다.
각도의 의존성 인젝터는 계층 적 주입 전략을 지원합니다. 이를 통해 필요한 범위에서 Idle 인스턴스를 만들 수 있으며 두 개 이상의 인스턴스가있을 수 있습니다. 예를 들어 페이지의 두 개의 다른 요소에 두 개의 별도 시계가있을 수 있습니다.
기본 만료 ( LocalStorageExpiry )를 사용하는 경우, Idle.setIdleName('yourIdleName') LocalStorage에서 동일한 키가 사용되지 않으며이 기능은 예상대로 작동하지 않습니다.
예를 들어 이메일 신청서를 고려하십시오. 보안 강화를 위해 응용 프로그램은 사용자가 비활성화 된시기를 결정하고 로그인하여 컴퓨터에 있고 방금 산만 해지면 세션을 연장 할 수있는 기회를 제공 할 수 있습니다. 또한, 더 나은 보안을 위해 서버는 5 분 동안 비 활동 후 만료되는 보안 토큰을 사용자 세션에 발행 할 수 있습니다. 사용자는 이메일을 입력하고 보내는 데 그보다 훨씬 더 많은 시간이 걸릴 수 있습니다. 소프트웨어를 적극적으로 사용할 때 로그 아웃하는 것을 발견하는 것은 실망 스러울 것입니다!
@ng-idle/core 사용자가 클릭, 타이핑, 터치, 스크롤 등을 검출하고 사용자가 여전히 활성화되어 있음을 알 수 있습니다. 몇 분마다 서버를 핑하여 로그인 할 수 있습니다.이 경우 사용자가 무언가를 수행하는 한 로그인하는 경우 로그인하면 컴퓨터에서 물러나면 @ng-idle/keepalive 제시 한 후 로그 아웃 할 수 있습니다.
@ng-idle/core는 다양한 대상에서 DOM 이벤트를 사용하여 사용자 활동을 감지합니다. 그러나 SSR/Universal Rendering을 사용하는 경우 앱이 항상 브라우저에서 실행되는 것은 아니므로 이러한 DOM 대상에 액세스 할 수 없으므로 @NG-IDLE을 통해 document 및 window 같은 브라우저 글로벌을 사용하려고 할 때 앱이 잠재적으로 충돌하거나 오류가 발생할 수 있습니다.
EventTargetInterruptSource 및 IT에서 파생 된 모든 인터럽트 소스 (예 : DocumentInterruptSource , WindowInterruptSource 및 StorageInterruptSource )는 서버 측 렌더링과의 호환성을 위해 이벤트 대상 리스너를 게으르게 초기화하도록 설계되었습니다. EventTargetInterruptSource 는 isPlatformServer 사용하여 앱이 브라우저 또는 서버에서 실행 중인지 여부를 감지하고 서버에서 실행될 때 이벤트 대상 리스너의 초기화를 건너 뛸 것입니다.
이 프로젝트는 .nvmrc 파일에있는 nodejs 버전을 사용하여 개발되었습니다. 이전 버전을 사용하여 문제가 발생할 수 있습니다. NVM 이상의 노드를 동시에 관리하기 위해 NVM 또는 유사한 시도를 시도하십시오. NVM을 사용하는 경우 nvm install 실행하여 다운로드하여 올바른 버전으로 전환 할 수 있습니다.
저장소를 복제 한 후에는 npm 사용하여 모든 패키지를 설치하십시오.
npm install
이제 적용 범위를 사용하여 모든 테스트를 한 번만 빌드하고 실행할 수 있습니다.
npm test
npm run ng test <project name> 또는 ng test <project name> @angular/cli 실행하여 프로젝트를 변경하는 동안 지속적으로 테스트를 실행할 수도 있습니다.
npm run ng test core
...
npm run ng test keepalive
참고 : keepalive는 코어에 따라 다릅니다. 위의 연속 테스트를 실행하는 경우 npm build 또는 npm run ng build core 먼저 핵심으로 변경 한 후에는 NPM을 실행해야합니다. 그러나 npm test 모든 모듈을 구축하고 테스트를 한 번으로 실행합니다.
기고 가이드를 참조하십시오.
