✔️학습내용 요약

1. Firebase 설치 - 8/14 진행

Firebase 준비

• Firebase Console 접속 - https://console.firebase.google.com/
• 프로젝트 생성(아래 이미지 빨간 박스 클릭)
  • 프로젝트 이름 작성
  • Firebase 프로젝트를 위한 AI 지원: [계속] 클릭
  • Firebase 프로젝트를 위한 Google 애널리틱스: [계속] 클릭
  • Google 애널리틱스 구성: 계정 선택OR만들기
  • Firebase 프로젝트가 준비되었습니다: [계속] 클릭

App에 Firebase Project 연결하기

• [앱 추가] 클릭하고,
• 맨 왼쪽에 Flutter 로고 클릭!

Firebase CLI 설치 - Windows

• Firebase CLI 설치 및 로그인
  (프로젝트 디렉토리에서 아래 명령어 실행해서 문제 없는지 파악)
  1️⃣ nvm-windows를 설치(nvm-setup.exe download)
  2️⃣ nvm 확인- PowerShell을 열고 nvm 수행
  3️⃣ nvm을 이용해 node설치 - nvm install 20.11.0 입력 후 node-v→ npm -v로 확인
  4️⃣ Firebase CLI 설치 - npm install -g firebase-tools
  5️⃣ PowerShell을 관리자로 실행해서 변경 동의 - Set-ExecutionPolicy RemoteSigned→ [A] 모두 예(A) 입력
  6️⃣ Firebase CLI login

firebase login:list 
firebase projects:list

• FlutterFire CLI 설치

dart pub global activate flutterfire_cli

• flutterfire 명령어를 찾을 수 없다는 경고가 나오면:
  ▪️시스템 환경 변수 편집→ 사용자 환경변수 추가→ path 항목에 다음 추가
  C:/Users/User/AppData/Local/Pub/Cache/bin
  ▪️terminal 응용 프로그램을 껐다가 재실행
  (bash 환경)

  export PATH="$PATH:C:/Users/User/AppData/Local/Pub/Cache/bin"
  alias flutterfire=flutterfire.bat

  (PowerShell 환경)

  $env:Path += ";$env:LOCALAPPDATA\Pub\Cache\bin"

• flutterfire 버전 잘 나오면 된 것!flutterfire --version

App에 Firebase Project 연결

• 아래 명령어 넣고, ENTER 계속 누름

flutterfire configure --project=[projectname]

Firebase 초기화 및 플러그인 추가

1️⃣ 필요한 package 추가 - firebase_core: ^4.13.0
2️⃣ main.dart에 package 추가

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
. . .//code 줄임 표시


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

3️⃣ 콘솔로 이동하기

platform 버전 오류 - Android

• 프로젝트의 android/app/build.gradle.kts 파일로 들어가서
  minSdk = flutter.targetSdkVersion→ minSdk = 23으로 바꿔주세요.

2. Authentication 설정

Firebase Authentication Enable

• Firebase 콘솔 왼쪽 [보안]→ [Authentication]→ [시작하기]

Package 추가 후 pub get을 수행

#filename:pubspec.yaml
firebase_auth: ^6.5.7

firebase authentication 기능 구성 목표:

• Login, Registration 등
• 앞으로 3~5로 할 예정

3. Login Form

Login 코드 넣기 (구현 생략)

// filename: login_page.dart
//... code 줄임표시

class LoginPage extends StatelessWidget {
  LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    TextTheme textTheme = Theme.of(context).textTheme;
    ColorScheme colorScheme = Theme.of(context).colorScheme;

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'My perfect workout mate',
                style: textTheme.titleMedium?.copyWith(
                  fontWeight: FontWeight.w700,
                  color: colorScheme.primary,
                ),
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    'Workout\nTracker',
                    style: textTheme.displayLarge?.copyWith(
                      fontWeight: FontWeight.w700,
                      color: colorScheme.primary,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(bottom: 10),
                    child: Image.asset(
                      'assets/runner_icon.png',
                      width: 32,
                      color: colorScheme.primary,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

TextFormField

• 텍스트 입력 위젯
  • 텍스트 입력 시 주로 TextField와 TextFormField 사용
  • 여러 입력값을 하나의 폼으로 관리할 때 TextFormField 사용
• TextFormField 사용 방법
  • 일반적으로 Form 위젯과 함께 사용
  • Form에 key를 등록하여 내부 TextFormField의 상태 추적
  • 등록한 key를 통한 입력값 저장 및 유효성 검사
• 변수 정의
  • 이메일과 비밀번호 입력을 위한 email, password 변수 정의
  • Form 내부 입력값 저장 및 유효성 검사를 위한 _formKey 정의
• obscureText: true 프로퍼티 : 비밀번호 입력시 화면에 *로 보이도록 해주는 기능
• validator, onSaved 프로퍼티 활용해서 유효성 검사 관리
  • TextFormField 사용하는 이유: 유효성 검사를 쉽게 관리 가능
  • _formKey.currentState?.validate()를 호출하여 각 TextFormField의 validator 실행
  • _formKey.currentState?.save()를 호출하여 모든 TextFormField의 onSaved 실행
  • onSaved를 통해 사용자 입력값을 email, password 변수에 할당

currentState

• GlobalKey와 연결된 위젯의 현재 State 객체
• 해당 위젯의 실제 상태와 메서드에 접근하기 위해 사용
• FormState의 validate(), save(), reset() 등의 메서드 호출 가능

//filename: login_page.dart
//...code 줄임표시
class LoginPage extends StatelessWidget {
  LoginPage({super.key});
  final _formKey = GlobalKey<FormState>();

  String? email;
  String? password;
  
  @override
  Widget build(BuildContext context) {
   . . .//code 줄임표시
     Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                'My perfect workout mate',
                style: textTheme.titleMedium?.copyWith(. . .),
              ),
              Row(. . .),
              SizedBox(height: 50),
              TextFormField(
                style: TextStyle(color: Colors.black),
                decoration: InputDecoration(
                  labelText: 'Email',
                  labelStyle: TextStyle(
                  	color: Colors.black, 
                    fontWeight: FontWeight.w500,
                    ),
                  filled: true,
                  fillColor: Colors.grey.shade200,
                  hintText: 'example@example.com',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide.none,
                  ),
                  prefixIcon: Icon(Icons.email_outlined),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                style: TextStyle(color: Colors.black),
                decoration: InputDecoration(
                  labelText: 'Password',
                  labelStyle: TextStyle(
                  	color: Colors.black, 
                    fontWeight: FontWeight.w500,
                    ),
                  filled: true,
                  fillColor: Colors.grey.shade200,
                  prefixIcon: Icon(Icons.lock_outline, color: Colors.black),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide.none,
                  ),
                ),
                obscureText: true,
                validator: (value){
                    if(value==null || value.isEmpty){
                      return '패스워드를 입력하세요';
                    }
                    if(value.length < 6){
                      return '6자리 이상 입력하세요';
                    } // firebase가 6자리 이하는 지원하지 않음
                    return null;
                  },
                onSaved: (value){
                  password=value;
                },
              ),
              SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () {
                      if(_formKey.currentState?.validate() ?? false){
                        _formKey.currentState?.save();
                    
                      }
                    },
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.symmetric(vertical: 15),
                      backgroundColor: colorScheme.primary,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                    child: Text(
                      '로그인',
                      style: textTheme.titleLarge?.copyWith(
                        color: colorScheme.onPrimary,
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

FittedBox

• FittedBox
  • 영역에 맞게 Text 위젯의 크기 자동 조절
• Flexible
  • 키보드가 열릴 때 로고와 텍스트 영역의 크기 자동 조절
  • 화면 공간 부족으로 발생하는 overflow 방지

//filename: login_page.dart
//. . .code 줄임표시
Flexible(
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
      'My perfect workout mate',
      style: textTheme.titleMedium?.copyWith(
        fontWeight: FontWeight.w700,
        color: colorScheme.primary,
      ),
    ),
  ),
),
Flexible(
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Text(
          'Workout\nTracker',
          style: textTheme.displayLarge?.copyWith(
            fontWeight: FontWeight.w700,
            color: colorScheme.primary,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(bottom: 10),
          child: Image.asset(
            'assets/runner_icon.png',
            width: 32,
            color: colorScheme.primary,
          ),
        ),
      ],
    ),
  ),
),
//. . .code 줄임표시

4. Registration Form

• registration_page.dart 파일에 RegistrationPage StatelessWidget 생성
• my_router.dart에 회원가입 페이지 추가
• context.go활용해서 login_page.dart에서 Sign up 버튼 클릭하면 RegistrationPage로 이동하게 설정
• 비밀번호 field를 추가(+controller) : final TextEditingController _passwordController = TextEditingController();
• 비밀번호 field에 helperText를 통해 비밀번호 규칙을 설명
• 나머지는 LoginPage랑 비슷하게 구현이니 참고

// filename: registration_page.dart
//  . . .code 줄임표시
class RegistrationPage extends StatelessWidget {
  RegistrationPage({super.key});
  String? name;
  String? email;
  String? password;
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('회원가입'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child:     Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(. . . ),
          TextFormField(. . .),//이름 field
          TextFormField(. . .),//이메일 field
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(
              labelText: '비밀번호',
              labelStyle:  textTheme.headlineSmall,
              hintText: '비밀번호를 입력하세요',
              helperText: '*비밀번호는 6자 이상 입력해주세요.',
              helperStyle: textTheme.bodySmall?.copyWith(
                color: colorScheme.primary,
              ),
              border: UnderlineInputBorder(),
              floatingLabelBehavior: FloatingLabelBehavior.always,
            ),
            obscureText: true,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '비밀번호를 입력하세요';
              }
              if (value.length < 6) {
                return '비밀번호는 6자 이상이어야 합니다';
              }
              return null;
            },
            onSaved: (value) {
              password = value;
            },
          ),
        ],
      ),
    ),        
  }
}

5. Authentication Service

• Firebase Authentication 기능
  • signUpWithEmail : 회원가입
  • signInWithEmail : 로그인
  • signOut : 로그아웃
  • resetPassword : 비밀번호 재설정
  • Profile : 수정
  • deleteAccount : 탈퇴

FirebaseAuthService

• 필요한 package 추가: firebase_auth: ^6.5.7
• firebase_auth_service.dart 파일에 FirebaseAuthService class 정의
  • instance 언어를 kr 설정: _auth.setLanguageCode('kr');

//filename:firebase_aut_service.dart
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseAuthService {
  final FirebaseAuth _auth;
  FirebaseAuthService() : _auth = FirebaseAuth.instance {
    _auth.setLanguageCode('kr');
  }
  Future<void> signUpWithEmail() async {
    //회원가입 코드 작성
  }

  Future<void> signInWithEmail() async {
    //로그인 코드 작성
  }

  Future<void> resetPassword(String email) async {
    // 비밀번호 재설정 코드 작성
  }

  Future<void> signOut() async {
    //로그아웃 코드 작성
  }

  Future<void> deleteAccount() async {
    //계정삭제 코드 작성
  }
}

signUp

• signUpWithEmail 함수
• 이름,이메일, 비밀번호 parameter 정의
  • createUserWithEmailAndPassword method: 회원가입 처리
  • updateDisplayName() method: 이름 저장
  • sendEmailVerification method: 이메일 verification(자동으로 이메일 발송)

//filename:firebase_auth_service.dart
//. . .code 줄임표시
Future<void> signUpWithEmail({
  required String email,
  required String password,
  String? name,
}) async {
  await _auth.createUserWithEmailAndPassword(email: email, password: password);
  await _auth.currentUser?.updateDisplayName(name);
  await _auth.currentUser?.sendEmailVerification();
}

error handling

• 예외사항은 주로 try-catch 구문을 통해 handling
• 발생할 수 있는 예외사항:
  • 이미 동일한 email을 가진 회원이 있음 : email-already-in-use
  • password가 기준에 못 미침 : weak-password

//filename:firebase_aut_service.dart
//. . .code 줄임표시
  Future<void> signUpWithEmail({
    required String email,
    required String password,
    String? name,
  }) async {
    String? errorMessage;
    try {
      await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      await _auth.currentUser?.updateDisplayName(name);
      await _auth.currentUser?.sendEmailVerification();
    } on FirebaseAuthException catch (error) {
      switch (error.code) {
        case 'weak-password':
          errorMessage = '취약한 패스워드입니다. 최소 6자리 이상의 문자를 입력하세요.';
          break;
        case 'email-already-in-use':
          errorMessage = '이미 사용 중인 이메일입니다. 다른 이메일을 입력하세요.';
          break;
        case 'invalid-email':
          errorMessage = '유효하지 않은 이메일입니다.';
          break;
        default:
          errorMessage = error.message ?? '알 수 없는 에러 발생';
      }
    } catch (error) {
      errorMessage = '알 수 없는 에러 발생';
    }
    if (errorMessage != null) {
      throw Exception(errorMessage);
    }
  }

snackbar 함수 생성

• show_snackbar.dart 작성해서 함수로 refactoring

// filename: show_snackbar.dart
import 'package:flutter/material.dart';

void showSnackBar(BuildContext context, String text) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(text),
    ),
  );
}

• showSnackBar 함수 이용하도록 수정

// filename: registration_page.dart
import 'show_snackbar.dart';
	. . .//code줄임표시
class RegistrationPage extends StatelessWidget {
	. . .//code줄임표시
  final _auth = FirebaseAuthService();
  // ...code 줄임 표시
  ElevatedButton(
    onPressed: () {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
        _auth.signUpWithEmail(
          email: email!,
          password: password!,
          name: name!,
        )
        .then((_) {
          showSnackBar(context, '회원가입이 완료되었습니다.');
          context.go('/workout_home');
        })
        .catchError((error) {
          showSnackBar(context, error.toString());
        });
      }
    },
  ),
  // ...code 줄임 표시

정상/비정상 회원가입 시도

• 사용자 추가된 것 확인: firebase authentication web console→ Authentication→ User
• 이미 가입된 이메일로 snackbar로 에러메세지 나오는지 확인

Login

• signInWithEmail 메소드 작성
• signInWithEmailAndPassword() method로 login절차 진행
  → await _auth.signInWithEmailAndPassword(email: email, password: password);

Logout