Flutter에서 자동 로그아웃을 구현하는 방법

자동 로그아웃은 특정 기간 동안 사용자 측에서 활동이 없을 때 사용자를 자동으로 로그아웃시키기 위해 다양한 앱 및 웹 사이트에 구현된 기능입니다. 활동은 마우스 이동, 터치, 클릭, API 호출 등이 될 수 있으며 자동 로그아웃은 백엔드와 프런트엔드에서 구현됩니다. 이 기사에서는 프런트 엔드에서 이를 구현하는 방법에 대해 이야기할 것입니다.

자동 로그아웃 구현



자동 로그아웃은 사용자 활동이 감지되고 새 타이머가 시작될 때마다 재설정되는 지정된 기간 동안 타이머를 사용하여 작동합니다. 사용자 활동이 없는 경우 사용자는 로그아웃되고 해당 메시지가 사용자에게 표시됩니다. 따라서 Flutter 앱에 두 가지 기능(사용자 활동 감지 및 타이머 관리자 서비스)을 추가하면 인증 부분이 이미 설정되어 있다고 가정하면 모든 Flutter 앱에 자동 로그아웃 지원이 추가됩니다.

타이머 관리자 서비스를 추가하는 것부터 시작해 보겠습니다AutoLogoutService. 이 서비스는 사용자 활동에 따라 로그아웃 타이머를 설정/재설정하는 유틸리티를 제공합니다. 다음은 동일한 코드 스니펫입니다.




이제 사용자 활동 감지기 래퍼 위젯을 추가할 것입니다. 위젯은 기본적으로 전체 앱에 대한 래퍼 역할을 하고 앱에서 클릭/탭 이벤트를 감지하고 활동이 감지되면 호출AutoLogoutService합니다. 다음은 이에 대한 코드 스니펫입니다.




<script id="gist-ltag"src="https://gist.github.com/eshankvaish/8b2b7811b2e035238655d93c43f5f5f2.js"/>


이 모든 작업이 완료되면 MaterialAppUserActivityDetector로 래핑하기만 하면 자동 로그아웃 기능이 실행됩니다.




@override
Widget build(BuildContext context) {
  return **UserActivityDetector(**
    **child: **MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    ),
  **)**;
}


이제 앱에서 탭/클릭 이벤트가 감지될 때마다 사용자 활동 감지기가 호출됩니다. 다음은 Github에서 전체 구현에 대한 링크입니다.



Thanks for reading. Want to connect? React out on , or in the comments below!

좋은 웹페이지 즐겨찾기