비활성 사용자 감지

대부분의 경우 사용자가 응용 프로그램에 적극적으로 참여하거나 일시적으로 비활성화되는지에 대해 신경 쓰지 않습니다. 비활성, 즉, 아마도 그들은 물을 마시기 위해 일어 났을 것입니다. 그러나 사용자 활동을 추적하고 비활성을 감지 할 때 상황이 있습니다.

그 기능이 필요할 때 몇 가지 예를 생각해 봅시다.

• 기사 읽기 시간 추적
• 자동 저장 양식 또는 문서
• 자동 일시 정지 게임
• 비디오 플레이어 컨트롤을 숨기고 있습니다
• 보안상의 이유로 사용자를 자동 로그 아웃합니다

최근에 보안상의 이유로 비활성 사용자를 자동 으로그인 한 마지막 예제와 관련된 기능을 만났습니다.

자동 로그 아웃에 관심을 가져야하는 이유는 무엇입니까?

많은 응용 프로그램은 사용자에게 어느 정도의 개인 데이터에 액세스 할 수 있도록합니다. 응용 프로그램의 목적에 따라 해당 데이터의 금액과 값이 다를 수 있습니다. 사용자 이름 일 수도 있지만 의료 기록, 재무 기록 등과 같이 더 민감한 데이터 일 수도 있습니다.

일부 사용자는 로그 아웃하고 세션을 열어 두는 것을 잊을 가능성이 있습니다. 당신에게 몇 번이나 일어 났습니까? 아마도 휴대 전화가 갑자기 울리거나 즉시 떠나야 할 필요가 있습니다. 다른 사람이 해당 세션을 사용하여 민감한 데이터를 추출 할 수 있으므로 사용자 세션을 열어 두는 것은 위험합니다.

이 문제와 싸우는 한 가지 방법은 사용자가 특정 기간 내에 앱과 상호 작용 한 경우 추적을 한 다음 해당 시간을 초과하면 로그 아웃을 트리거합니다. 팝 오버 또는 사용자에게 로그 아웃이 발생한다고 경고하는 타이머를 보여줄 수 있습니다. 또는 비활성 사용자가 감지 될 때 즉시 로그 아웃 할 수 있습니다.

한 레벨을 낮추면 우리가하고 싶은 것은 사용자의 마지막 상호 작용에서 전달 된 시간을 계산하는 것입니다. 그 기간이 임계 값보다 길면 비 활동 핸들러를 발사하고자합니다. 사용자가 임계 값을 위반하기 전에 작업을 수행하면 카운터를 재설정하고 다시 계산을 시작합니다.

이 기사는이 예제를 기반으로 이러한 활동 추적 로직을 구현할 수있는 방법을 보여줍니다.

1 단계 : 추적 로직 구현

두 가지 기능을 구현합시다. 첫 번째는 사용자가 앱과 상호 작용할 때마다 타이머를 재설정하고, 두 번째는 사용자가 비활성화 될 때 상황을 처리합니다.

• ResetUserActivityTimeout - 사용자가 응용 프로그램과 상호 작용할 때마다 기존 시간 초과를 지우고 새 시간을 시작하는 메소드가됩니다.
• inactiveUserAction - 사용자 활동 시간 초과가 다 떨어질 때 발사되는 방법이됩니다.

 userActivityTimeout = NULL을 두십시오.

함수 resetuserActivityTimeout () {
  Cleartimeout (userActivityTimeout);
  userActivityTimeout = settimeout (() => {
    inactiveUserAction ();
  }, inactive_user_time_threshold);
}

function inactiveUserAction () {
  // 로그 아웃 로직
}

좋아, 그래서 우리는 활동을 추적하는 방법이 있지만 아직 어느 곳에서나 사용하지 않습니다.

2 단계 : 추적 활성화

이제 추적 활성화를 담당하는 메소드를 구현해야합니다. 이러한 방법에서는 이벤트가 감지 될 때 ResetuserActivityTimeout 방법을 호출하는 이벤트 리스너를 추가합니다. 원하는만큼 많은 이벤트를들을 수 있지만 단순화를 위해이 목록을 가장 일반적인 몇 가지로 제한합니다.

 함수 activateActivityTracker () {
  window.addeventListener ( "MouseMove", ResetUserActivityTimeout);
  window.addeventListener ( "스크롤", ResetUserActivityTimeout);
  window.addeventListener ( "keydown", ResetUserActivityTimeout);
  window.addeventListener ( "Resize", ResetUserActivityTimeout);
}

그게 다야. 사용자 추적이 준비되었습니다. 우리가해야 할 유일한 일은 페이지로드에서 activateactivityTracker를 호출하는 것입니다.

우리는 이것을 떠날 수 있지만, 자세히 살펴보면 방금 저지른 코드에 심각한 성능 문제가 있습니다. 사용자가 앱과 상호 작용할 때마다 전체 논리가 실행됩니다. 그것은 좋지만 더 자세히보십시오. 추적이 필요하지 않더라도 사용자가 페이지와 상호 작용할 때 엄청난 시간을 해고하는 일부 유형의 이벤트가 있습니다. MouseMove 이벤트를 살펴 보겠습니다. 마우스를 만지더라도 만지면 MouseMove 이벤트는 수십 번 발사됩니다. 이것은 진정한 성능 킬러입니다. 지정된 기간 당 사용자 활동 논리를 한 번만 해고 될 수있는 스로틀을 도입하여 해당 문제를 처리 할 수 ​​있습니다.

지금 그렇게합시다.

3 단계 : 성능 향상

먼저, 우리는 스로틀 러 타임 아웃을 참조 할 수있는 하나 이상의 변수를 추가해야합니다.

 useractivitythrottlertimeout = null로 둡니다

그런 다음 스로틀 러를 만들 수있는 메소드를 만듭니다. 이 방법에서는 스로틀 러 타임 아웃이 이미 존재하는지 확인하고 그렇지 않은 경우 특정 기간 후에 ResetuserActivityTimeout을 발사 할 수있는 것을 만듭니다. 이것이 모든 사용자 활동이 추적 로직을 다시 트리거하지 않는 기간입니다. 그 후 Throttler 타임 아웃이 지워지면 다음 상호 작용이 활동 추적기를 재설정 할 수 있습니다.

 userActivitythrottler () {
  if (! useractivitythrottlertimeout) {
    userActivitythrottLertimeout = settimeout (() => {
      ResetUserActivityTimeout ();

      Cleartimeout (userActivitythrottLertimeout);
      useractivitythrottlertimeout = null;
    }, user_activity_throttler_time);
  }
}

방금 사용자 상호 작용에 대해 발사 해야하는 새로운 방법을 만들었으므로 활성화 로직에서 이벤트 핸들러를 ResetUserActivityTimeout에서 UserActivityThrottler로 변경해야합니다.

 ActiveActivityTracker () {
  window.addeventListener ( "MousEmove", UserActivityThrottler);
  // ...
}

보너스 : 다시 봅시다!

이제 활동 추적 로직을 구현 했으므로 해당 논리를 VUE를 사용한 응용 프로그램 빌드로 어떻게 이동할 수 있는지 보겠습니다. 우리는이 예제에 대한 설명을 기반으로 할 것입니다.

먼저 모든 변수를 구성 요소의 데이터로 옮겨야합니다. 즉, 모든 반응성 소품이 살고있는 곳입니다.

 내보내기 기본값 {
  데이터 () {
    반품 {
      Isinactive : False,
      useractivitythrottlertimeout : null,
      UserActivityTimeout : NULL
    };
  },
// ...

그런 다음 모든 기능을 메소드로 옮깁니다.

 // ...
  방법 : {
    ActiveActivityTracker () {...},
    ResetUserActivityTimeout () {...},
    useractivitythrottler () {...},
    inactiveUserAction () {...}
  },
// ...

우리는 VUE를 사용하고 있으며 반응 시스템이므로 모든 직접 DOM 조작 i. (예 : Document.GetElementById ( "App"). InnerHtml)를 삭제하고 비활성 데이터 속성에 의존 할 수 있습니다. 아래와 같이 구성 요소의 템플릿에서 데이터 속성에 직접 액세스 할 수 있습니다.

 <emplate>
  <div>
    <p> 사용자는 비활성입니다 = {{isinactive}} </p>
  </div>
템플릿></emplate>

마지막으로해야 할 일은 추적 로직을 활성화 할 적절한 장소를 찾는 것입니다. Vue에는 컴포넌트 라이프 사이클 후크가 포함되어 있으며 정확히 우리가 필요로하는 것, 특히 BeforeMount 후크입니다. 그러니 거기에 넣자.

 // ...
  beforemount () {
    this.activateActivityTracker ();
  },
// ...

우리가 할 수있는 일이 더 있습니다. Window에서 타임 아웃 및 등록 이벤트 리스너를 사용하고 있기 때문에 항상 우리 자신을 약간 정리하는 것이 좋습니다. 우리는 또 다른 수명주기 후크 인 BeforeDestroy에서 그렇게 할 수 있습니다. 우리가 등록한 모든 청취자를 제거하고 구성 요소의 수명주기가 끝날 때 모든 시간 초과를 지우겠습니다.

 // ...
  beforedestroy () {
    Window.removeEventListener ( "MousEmove", this.useractivitythrottler);
    window.removeEventListener ( "스크롤", this.userActivitythrottler);
    window.removeEventListener ( "keydown", this.useractivitythrottler);
    window.removeeventListener ( "resize", this.useractivitythrottler);
  
    ClearTimeout (this.userActivityTimeout);
    Cleartimeout (this.useractivitythrottlertimeout);
  }
// ...

그것은 랩입니다!

이 예제는 순전히 응용 프로그램과의 사용자 상호 작용을 감지하고 응용 프로그램에 반응하고 특정 기간 내에 상호 작용이 감지되지 않을 때 방법을 발사하는 데 집중합니다. 나는이 예제가 가능한 한 보편적이기를 원했기 때문에 비활성 사용자가 당신에게 감지했을 때 일어날 일의 구현을 떠난 이유입니다.

이 솔루션이 프로젝트에 유용하다는 것을 알게되기를 바랍니다!

위 내용은 비활성 사용자 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!