안녕하세요, 플러터 개발자 여러분! 이번 강좌에서는 Firebase를 이용한 사용자 인증 중에서도 Email 인증을 설정하는 방법에 대해 자세히 알아보겠습니다. Firebase는 데이터베이스, 호스팅, 스토리지 등 다양한 서비스를 제공하며, 특히 Firebase Auth는 사용자 인증을 처리하는데 매우 유용합니다. 이 강좌에서는 Firebase Auth 패키지를 설치하고, 이메일 인증을 설정하는 방법을 단계별로 안내하겠습니다.
1. Firebase 프로젝트 생성하기
Firebase를 사용하기 위해서는 먼저 Firebase 콘솔에서 프로젝트를 생성해야 합니다. 다음 단계를 따라 프로젝트를 만듭니다.
- Firebase 콘솔에 접속합니다.
- 오른쪽 상단에 있는 ‘프로젝트 추가’ 버튼을 클릭합니다.
- 프로젝트 이름을 입력하고, Google 애널리틱스 설정을 선택한 후 ‘프로젝트 만들기’를 클릭합니다.
2. Firebase Auth 설정하기
프로젝트가 생성되면 Firebase Auth를 설정해야 합니다.
- 왼쪽 메뉴에서 ‘인증’을 클릭합니다.
- ‘로그인 방법’ 탭으로 이동합니다.
- 이메일/비밀번호 로그인 옵션을 찾아 활성화합니다.
3. 플러터 프로젝트 생성하기
이제 플러터 프로젝트를 생성해보겠습니다. 아래의 명령어로 새로운 플러터 프로젝트를 생성합니다.
flutter create firebase_auth_example프로젝트 디렉토리로 이동합니다.
cd firebase_auth_example4. Firebase Core 및 Auth 패키지 설치하기
플러터에서 Firebase를 사용하기 위해 필요한 패키지를 추가해야 합니다. ‘pubspec.yaml’ 파일을 열고 다음 의존성을 추가합니다.
dependencies:
flutter:
sdk: flutter
firebase_core: ^2.0.0
firebase_auth: ^5.0.0
이제 패키지를 설치하기 위해 아래의 명령어를 입력합니다.
flutter pub get5. Firebase 초기화하기
패키지를 설치한 후, Firebase를 초기화해야 합니다. ‘main.dart’ 파일을 열고 다음 코드를 추가합니다.
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(
title: 'Firebase Auth Example',
home: HomeScreen(),
);
}
}6. 로그인 UI 만들기
이메일 인증을 위한 로그인 화면을 구축해보겠습니다. ‘HomeScreen’ 위젯을 추가하고, 이메일과 비밀번호 입력 필드 및 로그인 버튼을 포함합니다.
import 'package:firebase_auth/firebase_auth.dart';
// ...
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void signIn(String email, String password) async {
try {
UserCredential userCredential = await _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
print('User signed in: ${userCredential.user}');
} on FirebaseAuthException catch (e) {
print('Failed to sign in: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('로그인'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _emailController,
decoration: InputDecoration(labelText: '이메일'),
),
TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: '비밀번호'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
signIn(_emailController.text, _passwordController.text);
},
child: Text('로그인'),
),
],
),
),
);
}
} 7. 이메일 인증 요청하기
이메일 인증을 완료하기 위해 사용자가 로그인한 후 이메일 인증을 요청할 수 있습니다. 아래와 같이 코드를 추가합니다.
void sendVerificationEmail(User user) async {
if (!user.emailVerified) {
await user.sendEmailVerification();
print('Verification email sent to ${user.email}');
}
}
// signIn 메소드의 끝부분에 추가합니다.
if (userCredential.user != null) {
sendVerificationEmail(userCredential.user!);
}8. 이메일 인증 확인하기
사용자가 이메일을 확인했는지 상태를 확인하는 로직을 추가합니다. 로그인 후 사용자가 이메일을 확인했는지 확인할 수 있습니다.
void checkEmailVerification() async {
User? user = _auth.currentUser;
await user?.reload();
user = _auth.currentUser;
if (user != null && user.emailVerified) {
print('Email verified!');
// 인증된 사용자로 이동하는 로직 추가 가능
} else {
print('Email not verified yet.');
}
}
// 로그인 메소드 끝부분에 추가합니다.
checkEmailVerification();9. 완성된 코드
마지막으로 완성된 main.dart 코드는 다음과 같습니다.
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.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(
title: 'Firebase Auth Example',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void signIn(String email, String password) async {
try {
UserCredential userCredential = await _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
sendVerificationEmail(userCredential.user!);
checkEmailVerification();
} on FirebaseAuthException catch (e) {
print('Failed to sign in: $e');
}
}
void sendVerificationEmail(User user) async {
if (!user.emailVerified) {
await user.sendEmailVerification();
print('Verification email sent to ${user.email}');
}
}
void checkEmailVerification() async {
User? user = _auth.currentUser;
await user?.reload();
user = _auth.currentUser;
if (user != null && user.emailVerified) {
print('Email verified!');
} else {
print('Email not verified yet.');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('로그인'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _emailController,
decoration: InputDecoration(labelText: '이메일'),
),
TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: '비밀번호'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
signIn(_emailController.text, _passwordController.text);
},
child: Text('로그인'),
),
],
),
),
);
}
} 10. 결론
이제 플러터와 Firebase를 사용하여 이메일 인증을 설정하는 방법을 배웠습니다. 사용자 경험을 향상시키기 위해 사용자에게 이메일 인증을 요청하는 것은 중요한 기능입니다. 추가적인 보안을 위해 이 기능을 활용하시길 바랍니다. 다음 강좌에서는 소셜 로그인을 구현하는 방법을 다뤄보겠습니다. 감사합니다!