Flutter 애플리케이션 개발에서 사용자 인증은 거의 모든 프로젝트의 핵심 요소 중 하나입니다. 사용자 인증 시스템은 애플리케이션의 보안을 강화하고, 사용자 데이터를 보호하며, 개인화된 사용자 경험을 제공하는 데 중요한 역할을 합니다. 이 글에서는 Firebase Authentication을 사용하여 플러터 회원가입 및 인증 시스템을 구현하는 방법을 단계별로 살펴보겠습니다.
회원가입 로그인 채탱앱 만들기 추천영상
자세한 설명이 필요하시면 강의영상을 추천드립니다.
*해당 글의 내용과 영상제작 시기가 달라 내용의 차이가 있을 수 있습니다.
플러터 회원가입 방법
Firebase 프로젝트 설정
회원가입 기능을 구현하기 전에, Firebase 프로젝트를 설정하고 Flutter 앱에 연동하는 것이 필요합니다. Firebase 콘솔(https://console.firebase.google.com/)에 접속하여 새 프로젝트를 생성합니다. 프로젝트 설정에서 앱을 선택하고, Flutter 앱을 추가합니다. 자세한 내용은 아래글을 참고 하세요
Authentication 설정
Firebase 콘솔에서 Authentication 서비스를 설정하고, 이메일/비밀번호 인증 방법을 활성화합니다.
1. Firebase 콘솔의 사이드 메뉴에서 ‘Authentication’을 선택합니다.
2. ‘사용자’ 탭을 클릭한 후, ‘로그인 방법 설정’으로 활성화합니다.
3. 추가 제공업체를 Google을 선택하였습니다
4. 프로젝트 지원 이메일을 선택하고 저장합니다.
5. 최신 구성 파일을 다운로드 받습니다.
6. 다운로드 받은 파일을 ios/Runner/GoogleService-info.plist에 붙여넣기합니다. (또는 아래 명령어 실행시 자동으로 생성됩니다.)
flutterfire configure -p <프로젝트Id>
Firebase 연동
Firebase와 Flutter 앱을 연동하기 위해, 필요한 패키지를 Flutter 프로젝트에 추가해야 합니다.
dependencies:
flutter:
sdk: flutter
firebase_auth: ^4.17.8
firebase_core: ^2.7.0그리고, Firebase 초기화 코드를 앱에 추가합니다.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(SignUpPage());
}회원가입 기능 구현
이 코드는 사용자가 입력한 이메일과 비밀번호로 새로운 계정을 생성하는 기능을 수행합니다. 계정 생성이 성공하면 사용자에게 이메일 인증을 요청하는 이메일을 보냅니다. 이메일 인증 과정은 사용자가 제공한 이메일 주소의 유효성을 검증하고, 계정의 보안을 강화하는 데 도움이 됩니다. 만약 회원가입 과정에서 오류가 발생하면, 해당 오류 메시지를 사용자에게 보여주어 문제를 해결할 수 있도록 합니다.
Future<void> _signUp() async {
try {
// Firebase Auth를 사용하여 새로운 사용자 계정 생성
final UserCredential userCredential =
await _auth.createUserWithEmailAndPassword(
email: _emailController.text,
password: _passwordController.text,
);
// 이메일 인증 메일 보내기
if (userCredential.user != null && !userCredential.user!.emailVerified) {
await userCredential.user!.sendEmailVerification();
setState(() {
_statusMessage = '인증 이메일이 발송되었습니다. 이메일을 확인해주세요.';
});
}
} on FirebaseAuthException catch (e) {
setState(() {
_statusMessage = e.message ?? '회원가입 실패';
});
}
}회원가입 UI 구현
Flutter에서는 사용자 인터페이스를 쉽게 구현할 수 있습니다. 회원가입 폼을 포함한 간단한 UI를 만들고, 위에서 구현한 _signUp 함수를 호출하여 회원가입 기능을 연결합니다.
class SignUpPage extends StatefulWidget {
@override
_SignUpPageState createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _auth = FirebaseAuth.instance;
String _statusMessage = '';
... // _signUp() 위에서 회원가입 코드입니다.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Sign Up")),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: TextField(
controller: _emailController,
decoration: InputDecoration(labelText: "Email"),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: "Password"),
obscureText: true,
),
),
ElevatedButton(
onPressed: _signUp,
child: Text("Sign Up"),
),
SizedBox(height: 20),
Text(_statusMessage),
],
),
),
),
);
}
}
회원가입에 이메일을 입력하고 Sign Up버튼을 누르면 인증 이메일이 발송됩니다.
이메일을 확인하면 아래의 링크가 보이고 클릭시 verified되면서 가입이 됩니다.
메일의 메시지는 템플릿에서 수정할 수 있습니다.
마무리
이 글에서는 Flutter 앱에서 Firebase Authentication을 사용하여 안전하고 효율적인 회원가입 시스템을 구현하는 방법에 대해 자세히 살펴봤습니다. 다음 글은 로그인에 대한 내용입니다. 읽어주셔서 감사합니다.