Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

  #  안전한 저장소
  flutter_secure_storage: ^5.0.0
  # provider (상태 공유 - 로그인 인증정보 공유)
  provider: ^6.1.1
  # http
  http: ^1.2.0
YAML
복사

models

•

user.dart

class User {
  int? no;
  String? userId;
  String? userPw;
  String? userPwCheck;
  String? name;
  String? email;
  DateTime? regDate;
  DateTime? updDate;
  int? enabled;
  List<Auth>? authList;

  User({
    this.no,
    this.userId,
    this.userPw,
    this.userPwCheck,
    this.name,
    this.email,
    this.regDate,
    this.updDate,
    this.enabled,
    this.authList,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      no: json['no'],
      userId: json['userId'],
      userPw: json['userPw'],
      userPwCheck: json['userPwCheck'],
      name: json['name'],
      email: json['email'],
      regDate: json['regDate'] != null ? DateTime.parse(json['regDate']) : null,
      updDate: json['updDate'] != null ? DateTime.parse(json['updDate']) : null,
      enabled: json['enabled'],
      authList: (json['authList'] as List<dynamic>)
          .map((authJson) => Auth.fromJson(authJson))
          .toList(),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'no': no,
      'userId': userId,
      'userPw': userPw,
      'userPwCheck': userPwCheck,
      'name': name,
      'email': email,
      'regDate': regDate?.toIso8601String(),
      'updDate': updDate?.toIso8601String(),
      'enabled': enabled,
      'authList': authList?.map((auth) => auth.toJson()).toList(),
    };
  }
}

class Auth {
  int? authNo;
  String? userId;
  String? auth;

  Auth({
    this.authNo,
    this.userId,
    this.auth,
  });

  factory Auth.fromJson(Map<String, dynamic> json) {
    return Auth(
      authNo: json['authNo'],
      userId: json['userId'],
      auth: json['auth'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'authNo': authNo,
      'userId': userId,
      'auth': auth,
    };
  }
}
Dart
복사

Provider

•

user_provider.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:jwp_app/models/user.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class UserProvider extends ChangeNotifier {
  // 로그인 정보
  late User _userInfo;
  // 로그인 상태
  bool _loginStat = false;

  // getter
  // get : getter 메소드를 정의하는 키워드
  User get userInfo => _userInfo;       // 전역변수
  bool get isLogin => _loginStat;       // 전역변수

  // 🔒 안전한 저장소
  final storage = const FlutterSecureStorage();

  /// 🔐 로그인 요청
  /// 1. 요청 및 응답
  /// ➡ username, password 
  /// ⬅ jwt token
  /// 
  /// 2. jwt 토큰을 SecureStorage 에 저장
  Future<void> login(String username, String password) async {
    const url = 'http://10.0.2.2:8080/login';
    final requestUrl = Uri.parse('$url?username=$username&password=$password');
    try {
      // 로그인 요청
      final response = await http.get(requestUrl);

      if (response.statusCode == 200) {
        print('로그인 성공...');

        // HTTP 요청이 성공했을 때
        final authorizationHeader = response.headers['authorization'];

        if (authorizationHeader != null) {
          // Authorization 헤더에서 "Bearer "를 제거하고 JWT 토큰 값을 추출
          final jwtToken = authorizationHeader.replaceFirst('Bearer ', '');

          // 여기서 jwtToken을 사용하면 됩니다.
          print('JWT Token: $jwtToken');

          // jwt 저장
          await storage.write(key: 'jwtToken', value: jwtToken);
          _loginStat = true;

        } else {
          // Authorization 헤더가 없는 경우 처리
          print('Authorization 헤더가 없습니다.');
        }
      } else if( response.statusCode == 403 ) {
        print('아이디 또는 비밀번호가 일치하지 않습니다...');

      } else {
        print('네트워크 오류 또는 알 수 없는 오류로 로그인에 실패하였습니다...');

      }

    } catch (error) {
      print("로그인 실패 $error");
    }
    // 공유된 상태를 가진 위젯 다시 빌드
    notifyListeners();   
  }


  /// 👩‍💼👨‍💼 사용자 정보 가져오기
  /// 1. 💍 jwt ➡ 서버
  /// 2. 클라이언트 ⬅ 👩‍💼👨‍💼
  /// 3. 👩‍💼👨‍💼(userInfo) ➡ _userInfo [provider] 저장
  Future<void> getUserInfo() async {
    final url = 'http://10.0.2.2:8080/users/info';
    try {
      // 저장된 jwt 가져오기
      String? token = await storage.read(key: 'jwtToken');
      print('사용자 정보 요청 전: jwt - $token');

      final response = await http.get(
                                    Uri.parse(url),
                                    headers: {
                                        'Authorization': 'Bearer $token',
                                        'Content-Type': 'application/json',
                                      },
                              );

      if (response.statusCode == 200) {
        // 성공적으로 데이터를 받아왔을 때의 처리
        var utf8Decoded = utf8.decode( response.bodyBytes );
        var result = json.decode(utf8Decoded);
        final userInfo = result;
        print('User Info: $userInfo');

        // provider 에 사용자 정보 저장
        // userInfo ➡ _userInfo 로 저장
        // provider  등록
        _userInfo = User.fromJson(userInfo);
        print(_userInfo);

      } else {
        // HTTP 요청이 실패했을 때의 처리
        print('HTTP 요청 실패: ${response.statusCode}');
        
        print('사용자 정보 요청 성공');
      } 
    }catch (error) {
      print('사용자 정보 요청 실패 $error');
    }
    notifyListeners();
  }


  // 로그아웃
  Future<void> logout() async {
    try {

      // ⬅👨‍💼 로그아웃 처리
      // jwt 토큰 삭제
      await storage.delete(key: 'jwtToken');
      // 사용자 정보 초기화
      _userInfo = User();
      // 로그인 상태 초기화
      _loginStat = false;

      print('로그아웃 성공');
    } catch (error) {
      print('로그아웃 실패');
    }
    notifyListeners();
  }




}
Dart
복사

main.dart

import 'package:flutter/material.dart';
import 'package:jwp_app/provider/user_provider.dart';
import 'package:jwp_app/screens/home_screen.dart';
import 'package:jwp_app/screens/login_screen.dart';
import 'package:provider/provider.dart';

void main() {

  runApp(
    // ✅✅✅ 프로바이더 추가
    ChangeNotifierProvider(
        create: (context) => UserProvider(),
        child: const MyApp()
    )

  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JWT 토큰 로그인',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: '/',
      routes: {
        '/' : (context) => HomeScreen(),
        '/login' : (context) => LoginScreen(),
      },
    );
  }
}
Dart
복사

Screens

•

home_screen.dart

•

login_screen.dart

•

home_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:jwp_app/provider/user_provider.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // FlutterSecureStorage : 안전한 저장소
  final storage = const FlutterSecureStorage();
  String jwtToken = "";

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

    loadJwtToken();
  }

  /**
   * 💍 저장된 JWT 토큰 읽어오기
   */
  Future<void> loadJwtToken() async {
    // 저장된 JWT 토큰 읽기
    String? token = await storage.read(key: 'jwtToken');
    
    // 저장된 토큰이 없으면 ➡ 로그인 화면으로
    if( token == null || token == '' ) {
      print('미리 저장된 jwt 토큰 없음');
      print('로그인 화면으로 이동...');
      Navigator.pushReplacementNamed(context, '/login');
      return;
    }
    // 저장된 토큰이 있으면 ➡ 서버로 사용자 정보 요청

    setState(() {
      jwtToken = token ?? "";
    });
  }

  Future<void> saveJwtToken(String token) async {
    await storage.write(key: 'jwtToken', value: token);
  }

  @override
  Widget build(BuildContext context) {
    // listen: (provider 구독여부)
    // - true : provider 에서 notifyListeners() 호출 시, consumer 리렌더링 ⭕
    // - false : provider 에서 notifyListeners() 호출 시, consumer 리렌더링 ❌
    UserProvider userProvider = Provider.of<UserProvider>(context, listen: true);

    return Scaffold(
      appBar: AppBar(
        title: Text('JWT 토큰'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('사용자 정보'),
            Text('userId : ${userProvider.userInfo.userId ?? '없음'}'),
            Text('name : ${userProvider.userInfo.name ?? '없음'}'),
            Text('email : ${userProvider.userInfo.email ?? '없음'}'),
            Text('JWT Token: $jwtToken'),
            !userProvider.isLogin ? 
                ElevatedButton(
                  onPressed: () async {
                    print('로그인 화면으로 이동...');
                    Navigator.pushReplacementNamed(context, '/login');
                  },
                  child: Text('로그인'),
                )
              :
                ElevatedButton(
                  onPressed: () async {
                    print('로그아웃 처리...');
                    userProvider.logout();
                  },
                  child: Text('로그아웃'),
                ),
          ],
        ),
      ),
    );
  }
  
}
Dart
복사

•

login_screen.dart

import 'package:flutter/material.dart';
import 'package:jwp_app/provider/user_provider.dart';
import 'package:provider/provider.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    UserProvider userProvider = Provider.of<UserProvider>(context, listen: false);

    
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(
                labelText: 'Username',
              ),
            ),
            SizedBox(height: 16.0),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
            ),
            SizedBox(height: 32.0),
            ElevatedButton(
              onPressed: () {
                // 로그인 버튼 클릭
                _performLogin(userProvider);
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }


  // 보류
  void _performLogin(UserProvider userProvider) async {
    // 여기에 실제 로그인 로직을 구현
    String username = _usernameController.text;
    String password = _passwordController.text;

    print('Username: $username');
    print('Password: $password');

    await userProvider.login(username, password);
    if( userProvider.isLogin ) {
      print('로그인 여부 : ${userProvider.isLogin}');
      await userProvider.getUserInfo();
      print('유저정보 저장 완료...');
      print( userProvider.userInfo );
      Navigator.pushReplacementNamed(context, '/');
    }


    
  }
}
Dart
복사