Colin's Blog
[flutter] Firebase Firestore를 사용한 로그인 및 회원가입 구현하기

Firebase Firestore는 Google에서 제공하는 클라우드 기반 NoSQL 데이터베이스입니다. Flutter와 함께 사용하면 로그인 및 회원가입과 같은 기능을 간편하게 구현할 수 있습니다.

목차

Firebase 프로젝트 설정

  1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
  2. 프로젝트 설정 페이지로 이동하여 “앱 추가” 버튼을 클릭합니다.
  3. Flutter 앱을 추가하고, 앱의 패키지 이름을 입력합니다.
  4. 구성 파일(google-services.json)을 다운로드하고, Flutter 프로젝트의 android/app 디렉토리에 이 파일을 복사합니다.

Firebase 인증 설정

  1. Firebase 콘솔에서 “인증” 메뉴로 이동합니다.
  2. “로그인 방법” 탭에서 “이메일/비밀번호”를 활성화합니다.

Firestore 데이터베이스 생성

  1. Firebase 콘솔에서 “데이터베이스” 메뉴로 이동합니다.
  2. “Firestore 데이터베이스 만들기” 버튼을 클릭하여 데이터베이스를 생성합니다.
  3. “시작 모드”를 “테스트 모드”로 선택하고, 데이터베이스 위치를 설정합니다.

로그인 구현하기

  1. Firebase 인증 및 Firestore 라이브러리를 pubspec.yaml에 추가합니다:
dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.20.1
  cloud_firestore: ^0.16.0
  1. Flutter 앱에서 Firebase를 초기화합니다:
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {
  // Firebase 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
  1. 로그인 화면을 만듭니다. 이메일과 비밀번호를 입력할 수 있는 필드와 로그인 버튼을 추가합니다.
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatelessWidget {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login(BuildContext context) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // 로그인 성공 시 다음 화면으로 이동
    } catch (e) {
      // 로그인 실패 시 에러 처리
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그인'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _emailController,
              decoration: InputDecoration(labelText: '이메일'),
            ),
            TextFormField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: '비밀번호'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

회원가입 구현하기

  1. 회원가입 화면을 만듭니다. 이메일과 비밀번호를 입력할 수 있는 필드와 회원가입 버튼을 추가합니다.
class SignupPage extends StatelessWidget {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _signup(BuildContext context) async {
    try {
      await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // 회원가입 성공 시 다음 화면으로 이동
    } catch (e) {
      // 회원가입 실패 시 에러 처리
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('회원가입'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _emailController,
              decoration: InputDecoration(labelText: '이메일'),
            ),
            TextFormField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: '비밀번호'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () => _signup(context),
              child: Text('회원가입'),
            ),
          ],
        ),
      ),
    );
  }
}

이제 Firebase Firestore를 사용하여 Flutter 앱에서 로그인 및 회원가입 기능을 구현할 수 있습니다. Firebase의 강력한 인증 및 데이터베이스 기능을 활용하여 앱에 보안 및 데이터 관리 기능을 추가할 수 있습니다.

더 자세한 정보는 Firebase 공식 문서를 참조하시기 바랍니다.

© 2018 Colin. All rights reserved.