[Android(Flutter)]Firebase authentication을 사용한 이메일/비번 서비스 구현

Firebase Authentication을 사용하여 이메일과 비밀번호로 로그인하는 기능을 Flutter 앱에 구현하는 방법. Firebase Authentication은 Google에서 제공하는 서비스로, 다양한 인증 방법을 쉽게 구현할 수 있는 기능을 제공합니다. Flutter와 Firebase를 연동하여 이메일/비밀번호 인증 기능을 구현

준비

 

먼저 프로젝트에서 Firebase를 사용할 수 있도록 몇 가지 준비가 필요

• Flutter 환경이 설치되어 있어야 합니다.(저는 android studio에서 진행)
• Firebase 프로젝트를 생성하고, Firebase Authentication을 활성화

https://firebase.google.com/

Firebase | Google's Mobile and Web App Development Platform

 

• Firebase SDK를 Flutter 프로젝트에 통합해야 합니다.

Firebase 프로젝트 설정

1. Firebase 프로젝트 생성하기

• Firebase Console에 접속하여 새로운 프로젝트를 생성합니다.
• 프로젝트 생성 후, "Authentication" 섹션으로 가서 이메일/비밀번호 로그인 방법을 활성화

1. Firebase 앱 설정
   • Firebase Console에서 "앱 추가" 버튼을 눌러 Flutter 앱을 등록.
   • iOS와 Android 설정을 진행하며, 각 플랫폼에 맞는 설정 파일(google-services.json 또는 GoogleService-Info.plist)을 다운로드하여 프로젝트에 추가(android/app에 Json파일을 복사, JSON파일은 Firebase에서 프로젝트를 생성하면서 있음 또는 설정에 들어가길 바람)

Firebase 플러그인 설치

 

Firebase Authentication을 Flutter 앱에서 사용하려면 firebase_auth와 firebase_core 플러그인을 설치해야 합니다. firebase_core는 Firebase와 Flutter 간의 기본적인 연결을 담당하며, firebase_auth는 인증 관련 기능을 제공합니다.

pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^3.3.0
  firebase_auth: ^5.1.4
  provider: ^6.0.0

 

이후 아래 명령어로 의존성들을 설치.(저는 provider기능을 사용하여 구현하였기에 추가한 것.)

 

Firebase 초기화

 

Firebase를 사용하기 위해서는 앱 시작 시 Firebase를 초기화해야함.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); // Firebase 초기화
  runApp(MyApp());
}

---

AuthProvider 생성

 

AuthProvider는 로그인, 회원가입, 로그아웃 등을 관리하는 ChangeNotifier 클래스로, Firebase의 인증 기능을 캡슐화하여, 클래스에서는 Firebase Authentication을 이용해 로그인, 회원가입, 로그아웃 기능을 구현함.(밑에 코드는 구현 일부분입니다.)

  // Firebase 인증 상태 리스닝
  AuthProvider() {
    _firebaseAuth.authStateChanges().listen((User? user) {
      notifyListeners(); // 상태 변경 시 리스너 호출
    });
  }

  // 이메일/비밀번호 로그인
  Future<String?> signInWithEmailPassword(String email, String password) async {
    try {
      await _firebaseAuth.signInWithEmailAndPassword(email: email, password: password);
      return null; // 로그인 성공
    } on FirebaseAuthException catch (e) {
      return e.message; // 에러 메시지 반환
    }
  }

  // 이메일/비밀번호로 회원가입
  Future<String?> signUpWithEmailPassword(String email, String password) async {
    try {
      await _firebaseAuth.createUserWithEmailAndPassword(email: email, password: password);
      return null; // 회원가입 성공
    } on FirebaseAuthException catch (e) {
      return e.message; // 에러 메시지 반환
    }
  }

---

로그인 화면 구현

 

SignInPage는 사용자가 이메일과 비밀번호로 로그인할 수 있는 화면을 제공. 로그인 폼에는 이메일과 비밀번호 입력 필드가 포함됩니다. 사용자가 로그인을 시도하면, AuthProvider의 signInWithEmailPassword 메서드를 호출하여 Firebase와 인증을 처리함.(밑에 코드는 일부분입니다.)

// 로그인 버튼
                  ElevatedButton(
                    onPressed: () async {
                      if (_formKey.currentState!.validate()) {
                        // 폼이 유효한지 검사
                        final email = _emailController.text.trim();
                        final password = _passwordController.text.trim();

                        try {
                          await authProvider.signInWithEmailPassword(email, password); // 로그인 시도
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('Sign in successful!')),
                          );
                          Navigator.pushNamedAndRemoveUntil(context, '/home', (route) => false); // 홈 페이지로 이동
                        } catch (e) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('Error signing in: $e')),
                          );
                        }
                      }
                    },
                    child: const Text('Sign In'),
                  ),

 

회원가입 화면 구현

                  // 회원가입 버튼
                  ElevatedButton(
                    onPressed: () async {
                      if (_formKey.currentState!.validate()) {
                        // 폼이 유효한지 검사
                        final email = _emailController.text.trim();
                        final password = _passwordController.text.trim();

                        try {
                          final result = await authProvider.signUpWithEmailPassword(email, password); // 회원가입 시도
                          if (result == null) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(content: Text('Sign up successful!')),
                            );
                            Navigator.pushReplacementNamed(context, '/home'); // 홈 페이지로 이동
                          } else {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(content: Text('Error signing up: $result')),
                            );
                          }
                        } catch (e) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('Error: $e')),
                          );
                        }
                      }
                    },
                    child: const Text('Sign Up'),
                  ),