Flutter의 Firebase Auth 사용법

Firebase Auth는 Firebase에서 제공하는 강력한 인증 서비스로, Flutter 애플리케이션에서 사용자 인증을 간편하게 구현할 수 있도록 도와줍니다. 이메일 및 비밀번호 로그인, 소셜 로그인, 익명 로그인 등 다양한 인증 방법을 지원합니다. 이번 글에서는 Flutter에서 Firebase Auth를 사용하여 사용자 인증을 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Firebase 프로젝트 설정

Firebase Auth를 사용하려면 먼저 Firebase 콘솔에서 프로젝트를 생성하고 설정해야 합니다.

1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
2. Android 및 iOS 애플리케이션을 Firebase 프로젝트에 추가합니다.
3. Firebase 프로젝트 대시보드에서 "Authentication" 섹션으로 이동하여 인증 방법을 설정합니다. (이메일 및 비밀번호 로그인, Google 로그인 등)

2. Firebase 플러그인 설치

Firebase Auth를 Flutter 프로젝트에 통합하려면 firebase_core 및 firebase_auth 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.3.0
  firebase_auth: ^4.2.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Firebase 초기화

Firebase를 사용하려면 애플리케이션을 초기화해야 합니다. main.dart 파일에서 Firebase를 초기화합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Auth Example')),
      body: Center(
        child: Text('Welcome to Firebase Auth Example!'),
      ),
    );
  }
}

 

위 코드는 Firebase를 초기화하고 기본 홈 화면을 설정합니다.

4. 이메일 및 비밀번호 인증 구현

이제 이메일 및 비밀번호를 사용하여 사용자 인증을 구현해보겠습니다.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  String message = '';

  Future<void> _register() async {
    try {
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      setState(() {
        message = 'Registration successful: ${userCredential.user!.email}';
      });
    } catch (e) {
      setState(() {
        message = 'Registration failed: $e';
      });
    }
  }

  Future<void> _login() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      setState(() {
        message = 'Login successful: ${userCredential.user!.email}';
      });
    } catch (e) {
      setState(() {
        message = 'Login failed: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _register,
              child: Text('Register'),
            ),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
            SizedBox(height: 20),
            Text(message),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 이메일 및 비밀번호를 사용하여 사용자를 등록하고 로그인하는 예제입니다. FirebaseAuth 인스턴스를 사용하여 사용자 인증을 처리합니다.

 

 

반응형

 

 

5. Google 인증 구현

Google 로그인을 구현하려면 google_sign_in 패키지를 추가로 설치해야 합니다.

dependencies:
  google_sign_in: ^5.4.2

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  String message = '';

  Future<void> _signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
      final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;
      
      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth?.accessToken,
        idToken: googleAuth?.idToken,
      );

      UserCredential userCredential = await _auth.signInWithCredential(credential);
      setState(() {
        message = 'Google sign-in successful: ${userCredential.user!.email}';
      });
    } catch (e) {
      setState(() {
        message = 'Google sign-in failed: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _signInWithGoogle,
              child: Text('Sign in with Google'),
            ),
            SizedBox(height: 20),
            Text(message),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 Google 로그인을 구현한 예제입니다. GoogleSignIn 인스턴스를 사용하여 Google 로그인을 처리하고, FirebaseAuth 인스턴스를 사용하여 Firebase와 연동합니다.

6. 사용자 로그아웃

사용자가 로그인 상태를 유지하는 동안 언제든지 로그아웃할 수 있습니다. 로그아웃은 간단하게 signOut 메서드를 호출하여 처리할 수 있습니다.

Future<void> _logout() async {
  await _auth.signOut();
  setState(() {
    message = 'User logged out';
  });
}

 

위 코드는 사용자 로그아웃을 처리하는 예제입니다.

결론

Firebase Auth를 사용하면 Flutter 애플리케이션에서 다양한 인증 방법을 간편하게 구현할 수 있습니다. 이메일 및 비밀번호 인증, Google 인증 등을 통해 사용자 인증을 처리할 수 있으며, Firebase의 강력한 보안 기능을 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Firebase Auth를 효율적으로 사용해보세요. Firebase Auth를 통해 애플리케이션의 사용자 인증을 간편하게 구현하고, 사용자 경험을 향상시킬 수 있습니다.