플러터에서 자동 로그인 구현하기: 간단하고 안전한 방법

오늘은 사용자 경험을 크게 향상시킬 수 있는 기능인 자동 로그인 구현 방법에 대해 알아보겠습니다.

자동 로그인을 통해 사용자는 앱을 재실행할 때마다 로그인 정보를 입력하지 않아도 되어 편리함을 느낄 수 있습니다.

1. 필요한 패키지

먼저, 안전한 데이터 저장을 위해 `flutter_secure_storage` 패키지를 사용하겠습니다. 이 패키지는 암호화된 저장소를 제공하여 민감한 정보를 안전하게 보관할 수 있습니다.

pubspec.yaml에 다음을 추가하세요:

dependencies:
  flutter_secure_storage: ^5.0.2

2. 로그인 정보 저장하기

사용자가 로그인에 성공했을 때, 로그인 정보(예: 토큰)를 저장합니다.

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class AuthService {
  final storage = FlutterSecureStorage();

  Future<void> login(String username, String password) async {
    // 서버에 로그인 요청을 보내고 토큰을 받아옵니다.
    String token = await fetchTokenFromServer(username, password);
    
    // 토큰을 안전하게 저장합니다.
    await storage.write(key: 'auth_token', value: token);
  }

  Future<String?> fetchTokenFromServer(String username, String password) async {
    // 실제 서버 통신 로직을 구현하세요.
    // 이 예제에서는 간단히 더미 토큰을 반환합니다.
    return 'dummy_token';
  }
}

3. 자동 로그인 구현하기

앱이 시작될 때 저장된 토큰이 있는지 확인하고, 있다면 자동으로 로그인 상태로 전환합니다.

class AuthService {
  // ... 이전 코드 ...

  Future<bool> tryAutoLogin() async {
    String? token = await storage.read(key: 'auth_token');
    if (token != null) {
      // 토큰의 유효성을 서버에서 확인합니다.
      bool isValid = await validateTokenOnServer(token);
      return isValid;
    }
    return false;
  }

  Future<bool> validateTokenOnServer(String token) async {
    // 실제 서버 통신 로직을 구현하세요.
    // 이 예제에서는 항상 유효하다고 가정합니다.
    return true;
  }
}

4. 메인 앱에서 자동 로그인 사용하기

앱의 시작점에서 자동 로그인을 시도합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthWrapper(),
    );
  }
}

class AuthWrapper extends StatefulWidget {
  @override
  _AuthWrapperState createState() => _AuthWrapperState();
}

class _AuthWrapperState extends State<AuthWrapper> {
  final AuthService _authService = AuthService();
  bool _isLoading = true;
  bool _isLoggedIn = false;

  @override
  void initState() {
    super.initState();
    _checkLoginStatus();
  }

  Future<void> _checkLoginStatus() async {
    bool isLoggedIn = await _authService.tryAutoLogin();
    setState(() {
      _isLoggedIn = isLoggedIn;
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return Scaffold(body: Center(child: CircularProgressIndicator()));
    } else if (_isLoggedIn) {
      return HomeScreen();
    } else {
      return LoginScreen();
    }
  }
}

5. 로그아웃 구현

사용자가 로그아웃할 때는 저장된 토큰을 삭제합니다.

class AuthService {
  // ... 이전 코드 ...

  Future<void> logout() async {
    await storage.delete(key: 'auth_token');
  }
}

결론

이렇게 Flutter에서 자동 로그인을 구현할 수 있습니다. 

`flutter_secure_storage`를 사용하여 토큰을 안전하게 저장하고, 앱 시작 시 저장된 토큰의 유효성을 확인하여 자동 로그인을 수행합니다. 

이 방식은 사용자 경험을 크게 향상시키면서도 보안을 유지할 수 있는 좋은 방법입니다.

주의할 점은 토큰의 유효기간 설정과 주기적인 갱신, 그리고 서버 측에서의 적절한 토큰 검증입니다. 

또한, 사용자의 개인정보 보호를 위해 필요한 경우 자동 로그인 기능을 끌 수 있는 옵션을 제공하는 것도 좋습니다.

이 글이 여러분의 Flutter 앱에 자동 로그인 기능을 구현하는 데 도움이 되었기를 바랍니다. 

추가 질문이나 의견이 있으시면 댓글로 남겨주세요!

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg