Flutter - SecureStorage를 이용한 자동 로그인

이번 시간에는 Open Rest API를 통해서 로그인을 구현해보고 SecureStorage를 이용한 자동 로그인 기능을 구현해보겠습니다!

왜 Secure Storage를 써야하는가

어플리케이션에서 어떻게 하면 사용자가 로그인 했다는 정보를 가지고 있을까?

flutter 에서 디바이스 내부에 정보를 저장하기 위해서 일반적으로는 shared_preferences 패키지를 사용합니다.
하지만 그대로 shared_preference에 저장하게 되면 보안에 취약한 앱이 됩니다.

안드로이드 위험성

안드로이드에서는 루팅을 통해 쉽게 제약을 풀어 쉽게 볼 수 있다.

IOS 위험성

IOS는 탈옥을 통해서 샌드박스 제한을 풀어서 타 회사에서 사용하는 서명되지 않은 코드를 실행할 수 있다.

FlutterSecureStorage

하지만 해당 라이브러리를 사용하게 되면 Android에서는 keystore 영역에, iOS에서는 keychain라는 내부 저장소 영역을 사용하게 되어 안전하게 데이터를 사용할 수 있습니다.

예시 코드

1. pubspec.yaml 파일에 SecureStorage 추가

dependencies:
  flutter:
  flutter_secure_storage: ^5.0.2 # flutter_secure_storage 관련 패키지
  

2. 사용하고자 하는 파일 위에서 SecureStorage 호출

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

3. FlutterSecureStorage를 storage로 저장

final storage = FlutterSecureStorage(); // FlutterSecureStorage storage 저장

4. Provider 클래스안에 Login 메서드 작성

/// 로그인
  Future<void> login() async {
    final storage = FlutterSecureStorage();

    try {
      token = await _authModel.login(email, password);

      if (token != null) {
        print('토큰과 함께 요청 성공: $token');

        storage.deleteAll(); // 기존 토큰 삭제
        storage.write(key: 'token', value: token);
        notifyListeners();

      } else {
        print('로그인 실패');
        token = null;
        storage.deleteAll(); // 기존 토큰 삭제
        notifyListeners();

      }
    } catch (e) {
      print('예외 발생: $e');
      throw Exception('데이터 로드에 실패했습니다');
    }
  }

5. 로그인 화면에서 자동 로그인 구현

/// 로그인 페이지
class LoginPage extends StatefulWidget {
  LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final storage = FlutterSecureStorage();

  _asyncMethod() async {
    if (await storage.read(key: "token") != null) {
      if(!mounted) return;
      Navigator.push(context, MaterialPageRoute(builder: (context) => MainList()));
    }
  }

  @override
  void initState() {
    super.initState();
    _asyncMethod(); // SecureStorage에서 로그인 유무 확인
  }

... 

실행 화면

자동 로그인이 구현 되는 것을 확인할 수 있습니다

결론

오늘은 SecureStorage를 통해서 토큰을 안전하게 보관하고 간단한 자동 로그인 로직을 작성해봤습니다. UI 공부도 자세하게 해야하는데 아키텍처 패턴이나 동작 방식이 더 재미있네요 ㅋㅋㅋㅋ

다음에는 플러터의 MVVM 패턴에 대해서 작성하도록 하겠습니다. 긴 글 읽어주셔서 감사합니다!