Flutter Firebase Authentication
Hướng dẫn tích hợp Firebase Authentication vào ứng dụng Flutter để quản lý người dùng

Firebase Authentication là một giải pháp xác thực người dùng mạnh mẽ và an toàn được phát triển bởi Google. Nó cung cấp các phương thức xác thực phổ biến như email/mật khẩu, xác thực qua mạng xã hội (Google, Facebook, Twitter,...), xác thực qua số điện thoại và nhiều phương thức khác. Trong bài viết này, chúng ta sẽ tìm hiểu cách tích hợp Firebase Authentication vào ứng dụng Flutter để xây dựng hệ thống quản lý người dùng hoàn chỉnh.
Mục lục
- Thiết lập dự án Firebase
- Cài đặt các gói phụ thuộc cần thiết
- Cấu hình Firebase cho ứng dụng Flutter
- Xây dựng các màn hình xác thực
- Xác thực với Email và Mật khẩu
- Xác thực với Google
- Xác thực với Facebook
- Xác thực với Số điện thoại
- Quản lý trạng thái người dùng
- Phân quyền và Bảo mật
- Các kỹ thuật nâng cao
- Xử lý lỗi
- Kết luận
1. Thiết lập dự án Firebase
Bước 1: Tạo dự án Firebase
- Truy cập Firebase Console
- Nhấp vào "Thêm dự án" (hoặc "Add project")
- Nhập tên dự án, ví dụ: "Flutter Auth Demo"
- Tùy chọn bật Google Analytics cho dự án (khuyến nghị)
- Nhấp "Tiếp tục" và làm theo các bước để hoàn thành quá trình tạo dự án
Bước 2: Bật Firebase Authentication
- Trong Firebase Console, chọn dự án vừa tạo
- Từ menu bên trái, chọn "Authentication"
- Nhấp vào tab "Sign-in method"
- Bật các phương thức xác thực mà bạn muốn sử dụng (ví dụ: Email/Password, Google, Facebook, Phone)
- Cấu hình thêm các thông tin cần thiết cho từng phương thức

2. Cài đặt các gói phụ thuộc cần thiết
Mở file pubspec.yaml
của dự án Flutter và thêm các gói sau:
dependencies:
flutter:
sdk: flutter
firebase_core: ^2.13.0
firebase_auth: ^4.6.1
google_sign_in: ^6.1.0
flutter_facebook_auth: ^5.0.11
provider: ^6.0.5
Chạy lệnh sau để cài đặt các gói:
3. Cấu hình Firebase cho ứng dụng Flutter
Cấu hình cho Android
Bước 1: Đăng ký ứng dụng Android
- Trong Firebase Console, chọn dự án của bạn
- Nhấp vào biểu tượng Android để thêm ứng dụng Android
- Nhập ID gói của ứng dụng Android (ví dụ:
com.example.flutter_auth_demo
)
- (Tùy chọn) Nhập nickname cho ứng dụng
- Đăng ký ứng dụng
Bước 2: Tải xuống file cấu hình
- Tải xuống file
google-services.json
- Đặt file này vào thư mục
android/app
của dự án Flutter
Bước 3: Cập nhật Gradle
Mở file android/build.gradle
và thêm:
buildscript {
dependencies {
// ... other dependencies
classpath 'com.google.gms:google-services:4.3.15'
}
}
Mở file android/app/build.gradle
và thêm:
// Bottom of the file
apply plugin: 'com.google.gms.google-services'
Cấu hình cho iOS
Bước 1: Đăng ký ứng dụng iOS
- Trong Firebase Console, chọn dự án của bạn
- Nhấp vào biểu tượng iOS để thêm ứng dụng iOS
- Nhập ID gói của ứng dụng iOS (ví dụ:
com.example.flutterAuthDemo
)
- (Tùy chọn) Nhập nickname cho ứng dụng
- Đăng ký ứng dụng
Bước 2: Tải xuống file cấu hình
- Tải xuống file
GoogleService-Info.plist
- Sử dụng Xcode, thêm file này vào thư mục Runner của dự án (đảm bảo chọn "Copy items if needed")
Bước 3: Cập nhật Podfile
Mở file ios/Podfile
và thêm:
4. Xây dựng các màn hình xác thực
Chúng ta sẽ xây dựng các màn hình xác thực cơ bản cho ứng dụng:
Màn hình đăng nhập (login_screen.dart)
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../services/auth_service.dart';
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final AuthService _authService = AuthService();
final _formKey = GlobalKey<FormState>();
String _email = '';
String _password = '';
String _error = '';
bool _isLoading = false;
void _signInWithEmailAndPassword() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isLoading = true;
_error = '';
});
try {
await _authService.signInWithEmailAndPassword(_email, _password);
} catch (e) {
setState(() {
_error = _handleFirebaseAuthError(e);
_isLoading = false;
});
}
}
}
String _handleFirebaseAuthError(dynamic e) {
if (e is FirebaseAuthException) {
switch (e.code) {
case 'user-not-found':
return 'Không tìm thấy tài khoản với email này.';
case 'wrong-password':
return 'Sai mật khẩu.';
case 'invalid-email':
return 'Email không hợp lệ.';
case 'user-disabled':
return 'Tài khoản đã bị vô hiệu hóa.';
default:
return 'Đăng nhập thất bại: ${e.message}';
}
}
return 'Đã xảy ra lỗi không xác định.';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Đăng nhập'),
),
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
'assets/images/logo.png',
height: 100,
),
SizedBox(height: 48.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập email';
}
return null;
},
onChanged: (value) {
_email = value.trim();
},
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Mật khẩu',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập mật khẩu';
}
return null;
},
onChanged: (value) {
_password = value;
},
),
SizedBox(height: 24.0),
if (_error.isNotEmpty)
Padding(
padding: EdgeInsets.only(bottom: 16.0),
child: Text(
_error,
style: TextStyle(color: Colors.red),
textAlign: TextAlign.center,
),
),
ElevatedButton(
onPressed: _isLoading ? null : _signInWithEmailAndPassword,
child: _isLoading
? CircularProgressIndicator(color: Colors.white)
: Text('ĐĂNG NHẬP'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
SizedBox(height: 16.0),
OutlinedButton.icon(
icon: Image.asset(
'assets/images/google_logo.png',
height: 24.0,
),
label: Text('Đăng nhập với Google'),
onPressed: _isLoading
? null
: () async {
setState(() {
_isLoading = true;
_error = '';
});
try {
await _authService.signInWithGoogle();
} catch (e) {
setState(() {
_error = 'Đăng nhập Google thất bại: $e';
_isLoading = false;
});
}
},
style: OutlinedButton.styleFrom(
padding: EdgeInsets.symmetric(vertical: 12.0),
),
),
SizedBox(height: 16.0),
TextButton(
child: Text('Chưa có tài khoản? Đăng ký ngay'),
onPressed: () {
Navigator.pushNamed(context, '/register');
},
),
],
),
),
),
),
);
}
}
Màn hình đăng ký (register_screen.dart)
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../services/auth_service.dart';
class RegisterScreen extends StatefulWidget {
@override
_RegisterScreenState createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
final AuthService _authService = AuthService();
final _formKey = GlobalKey<FormState>();
String _email = '';
String _password = '';
String _confirmPassword = '';
String _error = '';
bool _isLoading = false;
void _registerWithEmailAndPassword() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isLoading = true;
_error = '';
});
try {
await _authService.registerWithEmailAndPassword(_email, _password);
} catch (e) {
setState(() {
_error = _handleFirebaseAuthError(e);
_isLoading = false;
});
}
}
}
String _handleFirebaseAuthError(dynamic e) {
if (e is FirebaseAuthException) {
switch (e.code) {
case 'email-already-in-use':
return 'Email này đã được sử dụng.';
case 'invalid-email':
return 'Email không hợp lệ.';
case 'operation-not-allowed':
return 'Đăng ký với email và mật khẩu chưa được bật.';
case 'weak-password':
return 'Mật khẩu quá yếu.';
default:
return 'Đăng ký thất bại: ${e.message}';
}
}
return 'Đã xảy ra lỗi không xác định.';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Đăng ký'),
),
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
'assets/images/logo.png',
height: 100,
),
SizedBox(height: 48.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập email';
}
return null;
},
onChanged: (value) {
_email = value.trim();
},
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Mật khẩu',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập mật khẩu';
}
if (value.length < 6) {
return 'Mật khẩu phải có ít nhất 6 ký tự';
}
return null;
},
onChanged: (value) {
_password = value;
},
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: 'Xác nhận mật khẩu',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock_outline),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng xác nhận mật khẩu';
}
if (value != _password) {
return 'Mật khẩu không khớp';
}
return null;
},
onChanged: (value) {
_confirmPassword = value;
},
),
SizedBox(height: 24.0),
if (_error.isNotEmpty)
Padding(
padding: EdgeInsets.only(bottom: 16.0),
child: Text(
_error,
style: TextStyle(color: Colors.red),
textAlign: TextAlign.center,
),
),
ElevatedButton(
onPressed: _isLoading ? null : _registerWithEmailAndPassword,
child: _isLoading
? CircularProgressIndicator(color: Colors.white)
: Text('ĐĂNG KÝ'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
SizedBox(height: 16.0),
TextButton(
child: Text('Đã có tài khoản? Đăng nhập ngay'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
),
);
}
}
5. Xác thực với Email và Mật khẩu
Tạo một service class để xử lý xác thực (lib/services/auth_service.dart
):
import 'package:firebase_auth/firebase_auth.dart';
class AuthService {
final FirebaseAuth _auth = FirebaseAuth.instance;
User? get currentUser => _auth.currentUser;
Stream<User?> get authStateChanges => _auth.authStateChanges();
Future<UserCredential> signInWithEmailAndPassword(String email, String password) async {
try {
return await _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
} catch (e) {
rethrow;
}
}
Future<UserCredential> registerWithEmailAndPassword(String email, String password) async {
try {
return await _auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
} catch (e) {
rethrow;
}
}
Future<void> signOut() async {
await _auth.signOut();
}
Future<void> resetPassword(String email) async {
await _auth.sendPasswordResetEmail(email: email);
}
}
6. Xác thực với Google
Bổ sung phương thức đăng nhập với Google vào AuthService:
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
class AuthService {
Future<UserCredential> signInWithGoogle() async {
try {
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
if (googleUser == null) {
throw FirebaseAuthException(
code: 'sign_in_canceled',
message: 'Đăng nhập bị hủy bởi người dùng',
);
}
final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
final credential = GoogleAuthProvider.credential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
return await FirebaseAuth.instance.signInWithCredential(credential);
} catch (e) {
rethrow;
}
}
}
Cấu hình Google Sign-In cho Android
Thêm vào file android/app/build.gradle
:
android {
defaultConfig {
// ...
// Thêm dòng này
multiDexEnabled true
}
}
Cấu hình Google Sign-In cho iOS
Thêm vào file ios/Runner/Info.plist
:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_REVERSED_CLIENT_ID</string>
</array>
</dict>
</array>
7. Xác thực với Facebook
Bổ sung phương thức đăng nhập với Facebook vào AuthService:
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
class AuthService {
Future<UserCredential> signInWithFacebook() async {
try {
final LoginResult result = await FacebookAuth.instance.login();
if (result.status != LoginStatus.success) {
throw FirebaseAuthException(
code: 'facebook_login_failed',
message: 'Đăng nhập Facebook thất bại: ${result.message}',
);
}
final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.token);
return await FirebaseAuth.instance.signInWithCredential(credential);
} catch (e) {
rethrow;
}
}
}
Cấu hình Facebook Login cho Android
Thêm vào file android/app/src/main/res/values/strings.xml
(tạo nếu chưa có):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>
</resources>
Thêm vào file android/app/src/main/AndroidManifest.xml
:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.your_app">
<application>
<meta-data
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<meta-data
android:name="com.facebook.sdk.ClientToken"
android:value="@string/facebook_client_token"/>
<activity
android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>
</application>
</manifest>
Cấu hình Facebook Login cho iOS
Thêm vào file ios/Runner/Info.plist
:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fbYOUR_FACEBOOK_APP_ID</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_FACEBOOK_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>
8. Xác thực với Số điện thoại
Bổ sung phương thức đăng nhập với số điện thoại vào AuthService:
class AuthService {
Future<void> verifyPhoneNumber({
required String phoneNumber,
required Function(PhoneAuthCredential) verificationCompleted,
required Function(FirebaseAuthException) verificationFailed,
required Function(String, int?) codeSent,
required Function(String) codeAutoRetrievalTimeout,
}) async {
await _auth.verifyPhoneNumber(
phoneNumber: phoneNumber,
verificationCompleted: verificationCompleted,
verificationFailed: verificationFailed,
codeSent: codeSent,
codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
timeout: Duration(seconds: 60),
);
}
Future<UserCredential> signInWithPhoneCredential(PhoneAuthCredential credential) async {
try {
return await _auth.signInWithCredential(credential);
} catch (e) {
rethrow;
}
}
}
Tạo màn hình xác thực số điện thoại (phone_auth_screen.dart
):
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../services/auth_service.dart';
class PhoneAuthScreen extends StatefulWidget {
@override
_PhoneAuthScreenState createState() => _PhoneAuthScreenState();
}
class _PhoneAuthScreenState extends State<PhoneAuthScreen> {
final AuthService _authService = AuthService();
final _formKey = GlobalKey<FormState>();
String _phoneNumber = '';
String _smsCode = '';
String _verificationId = '';
String _error = '';
bool _isLoading = false;
bool _codeSent = false;
void _verifyPhoneNumber() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isLoading = true;
_error = '';
});
try {
await _authService.verifyPhoneNumber(
phoneNumber: _phoneNumber,
verificationCompleted: (PhoneAuthCredential credential) async {
try {
await _authService.signInWithPhoneCredential(credential);
} catch (e) {
setState(() {
_error = 'Xác thực thất bại: $e';
_isLoading = false;
});
}
},
verificationFailed: (FirebaseAuthException e) {
setState(() {
_error = 'Xác thực thất bại: ${e.message}';
_isLoading = false;
});
},
codeSent: (String verificationId, int? resendToken) {
setState(() {
_verificationId = verificationId;
_codeSent = true;
_isLoading = false;
});
},
codeAutoRetrievalTimeout: (String verificationId) {
_verificationId = verificationId;
},
);
} catch (e) {
setState(() {
_error = 'Lỗi gửi mã: $e';
_isLoading = false;
});
}
}
}
void _signInWithSmsCode() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isLoading = true;
_error = '';
});
try {
PhoneAuthCredential credential = PhoneAuthProvider.credential(
verificationId: _verificationId,
smsCode: _smsCode,
);
await _authService.signInWithPhoneCredential(credential);
} catch (e) {
setState(() {
_error = 'Xác thực thất bại: $e';
_isLoading = false;
});
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Đăng nhập với Số điện thoại'),
),
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
'assets/images/logo.png',
height: 100,
),
SizedBox(height: 48.0),
if (!_codeSent) ...[
TextFormField(
decoration: InputDecoration(
labelText: 'Số điện thoại (định dạng: +84...)',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.phone),
),
keyboardType: TextInputType.phone,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập số điện thoại';
}
return null;
},
onChanged: (value) {
_phoneNumber = value.trim();
},
),
] else ...[
TextFormField(
decoration: InputDecoration(
labelText: 'Mã xác thực (OTP)',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.sms),
),
keyboardType: TextInputType.number,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập mã xác thực';
}
return null;
},
onChanged: (value) {
_smsCode = value.trim();
},
),
],
SizedBox(height: 24.0),
if (_error.isNotEmpty)
Padding(
padding: EdgeInsets.only(bottom: 16.0),
child: Text(
_error,
style: TextStyle(color: Colors.red),
textAlign: TextAlign.center,
),
),
ElevatedButton(
onPressed: _isLoading
? null
: (_codeSent ? _signInWithSmsCode : _verifyPhoneNumber),
child: _isLoading
? CircularProgressIndicator(color: Colors.white)
: Text(_codeSent ? 'XÁC THỰC' : 'GỬI MÃ XÁC THỰC'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(vertical: 16.0),
),
),
if (_codeSent) ...[
SizedBox(height: 16.0),
TextButton(
child: Text('Gửi lại mã'),
onPressed: _isLoading ? null : _verifyPhoneNumber,
),
],
],
),
),
),
),
);
}
}
9. Quản lý trạng thái người dùng
Sử dụng Provider để quản lý trạng thái người dùng trong ứng dụng (lib/providers/auth_provider.dart
):
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../services/auth_service.dart';
class AuthProvider with ChangeNotifier {
final AuthService _authService = AuthService();
User? _user;
bool _isLoading = false;
AuthProvider() {
_init();
}
void _init() {
_authService.authStateChanges.listen((User? user) {
_user = user;
notifyListeners();
});
}
User? get user => _user;
bool get isAuthenticated => _user != null;
bool get isLoading => _isLoading;
void setLoading(bool value) {
_isLoading = value;
notifyListeners();
}
Future<void> signInWithEmailAndPassword(String email, String password) async {
try {
setLoading(true);
await _authService.signInWithEmailAndPassword(email, password);
} finally {
setLoading(false);
}
}
Future<void> registerWithEmailAndPassword(String email, String password) async {
try {
setLoading(true);
await _authService.registerWithEmailAndPassword(email, password);
} finally {
setLoading(false);
}
}
Future<void> signInWithGoogle() async {
try {
setLoading(true);
await _authService.signInWithGoogle();
} finally {
setLoading(false);
}
}
Future<void> signInWithFacebook() async {
try {
setLoading(true);
await _authService.signInWithFacebook();
} finally {
setLoading(false);
}
}
Future<void> signOut() async {
try {
setLoading(true);
await _authService.signOut();
} finally {
setLoading(false);
}
}
}
Cập nhật main.dart
để sử dụng Provider:
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:provider/provider.dart';
import 'providers/auth_provider.dart';
import 'screens/login_screen.dart';
import 'screens/register_screen.dart';
import 'screens/home_screen.dart';
import 'screens/phone_auth_screen.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => AuthProvider()),
],
child: Consumer<AuthProvider>(
builder: (context, authProvider, _) {
return MaterialApp(
title: 'Flutter Firebase Auth',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialRoute: authProvider.isAuthenticated ? '/home' : '/login',
routes: {
'/login': (context) => LoginScreen(),
'/register': (context) => RegisterScreen(),
'/home': (context) => HomeScreen(),
'/phone': (context) => PhoneAuthScreen(),
},
);
},
),
);
}
}
10. Phân quyền và Bảo mật
Để bảo vệ các tuyến đường chỉ cho người dùng đã xác thực, tạo một auth_guard.dart
:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/auth_provider.dart';
class AuthGuard extends StatelessWidget {
final Widget child;
final String redirectRoute;
const AuthGuard({
Key? key,
required this.child,
this.redirectRoute = '/login',
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Consumer<AuthProvider>(
builder: (context, authProvider, _) {
if (authProvider.isAuthenticated) {
return child;
} else {
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.of(context).pushReplacementNamed(redirectRoute);
});
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
},
);
}
}
Sử dụng trong tuyến đường cần bảo vệ:
@override
Widget build(BuildContext context) {
return AuthGuard(
child: Scaffold(
appBar: AppBar(
title: Text('Trang chủ'),
actions: [
IconButton(
icon: Icon(Icons.exit_to_app),
onPressed: () {
Provider.of<AuthProvider>(context, listen: false).signOut();
},
),
],
),
body: Center(
child: Text('Đã đăng nhập thành công!'),
),
),
);
}
11. Các kỹ thuật nâng cao
11.1. Quản lý thông tin người dùng với Firestore
Tạo một service để quản lý thông tin người dùng trong Firestore (user_service.dart
):
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
class UserService {
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
final FirebaseAuth _auth = FirebaseAuth.instance;
Future<void> createUserProfile(User user, {Map<String, dynamic>? additionalData}) async {
final Map<String, dynamic> userData = {
'email': user.email,
'displayName': user.displayName,
'photoURL': user.photoURL,
'phoneNumber': user.phoneNumber,
'lastLogin': FieldValue.serverTimestamp(),
'createdAt': FieldValue.serverTimestamp(),
...?additionalData,
};
await _firestore.collection('users').doc(user.uid).set(userData, SetOptions(merge: true));
}
Future<DocumentSnapshot> getUserProfile(String userId) async {
return await _firestore.collection('users').doc(userId).get();
}
Future<void> updateUserProfile(String userId, Map<String, dynamic> data) async {
await _firestore.collection('users').doc(userId).update(data);
}
Stream<DocumentSnapshot> getUserProfileStream(String userId) {
return _firestore.collection('users').doc(userId).snapshots();
}
Future<void> updateCurrentUserProfile(Map<String, dynamic> data) async {
final user = _auth.currentUser;
if (user != null) {
await updateUserProfile(user.uid, data);
} else {
throw Exception('Không có người dùng đang đăng nhập');
}
}
}
11.2. Xử lý phiên đăng nhập
Bổ sung chức năng xác thực lại sau một khoảng thời gian nhất định:
class AuthService {
Future<void> reauthenticateUser(String password) async {
try {
User? user = _auth.currentUser;
if (user == null || user.email == null) {
throw Exception('Không thể xác thực lại. Không có thông tin người dùng.');
}
AuthCredential credential = EmailAuthProvider.credential(
email: user.email!,
password: password,
);
await user.reauthenticateWithCredential(credential);
} catch (e) {
rethrow;
}
}
Future<void> changePassword(String newPassword) async {
try {
User? user = _auth.currentUser;
if (user == null) {
throw Exception('Không có người dùng đang đăng nhập');
}
await user.updatePassword(newPassword);
} catch (e) {
rethrow;
}
}
Future<bool> isSessionValid(int maxAgeMinutes) async {
try {
User? user = _auth.currentUser;
if (user == null) {
return false;
}
await user.getIdToken(true);
final metadata = await user.metadata;
final lastSignInTime = metadata.lastSignInTime;
if (lastSignInTime == null) {
return false;
}
final now = DateTime.now();
final diff = now.difference(lastSignInTime).inMinutes;
return diff <= maxAgeMinutes;
} catch (e) {
return false;
}
}
}
11.3. Xác thực hai yếu tố (2FA)
class AuthService {
Future<String> enableTwoFactorAuth() async {
try {
User? user = _auth.currentUser;
if (user == null) {
throw Exception('Không có người dùng đang đăng nhập');
}
final appName = 'YourAppName';
final email = user.email ?? user.uid;
final secret = _generateSecret();
final uri = 'otpauth://totp/$appName:$email?secret=$secret&issuer=$appName';
await FirebaseFirestore.instance.collection('users').doc(user.uid).update({
'twoFactorEnabled': true,
'twoFactorSecret': secret,
});
return uri;
} catch (e) {
rethrow;
}
}
Future<bool> verifyOtp(String otp) async {
try {
User? user = _auth.currentUser;
if (user == null) {
throw Exception('Không có người dùng đang đăng nhập');
}
final doc = await FirebaseFirestore.instance.collection('users').doc(user.uid).get();
final secret = doc.data()?['twoFactorSecret'];
if (secret == null) {
throw Exception('Xác thực hai yếu tố chưa được bật');
}
return _verifyOtp(secret, otp);
} catch (e) {
rethrow;
}
}
}
12. Xử lý lỗi
Tạo một helper class để xử lý các lỗi liên quan đến Firebase Auth (auth_error_handler.dart
):
class AuthErrorHandler {
static String handleAuthError(dynamic error) {
if (error is FirebaseAuthException) {
switch (error.code) {
case 'email-already-in-use':
return 'Email này đã được sử dụng bởi một tài khoản khác.';
case 'invalid-email':
return 'Email không hợp lệ.';
case 'user-disabled':
return 'Tài khoản này đã bị vô hiệu hóa.';
case 'user-not-found':
return 'Không tìm thấy tài khoản với email này.';
case 'wrong-password':
return 'Sai mật khẩu.';
case 'weak-password':
return 'Mật khẩu quá yếu.';
case 'operation-not-allowed':
return 'Phương thức đăng nhập này không được cho phép.';
case 'invalid-phone-number':
return 'Số điện thoại không hợp lệ.';
case 'missing-phone-number':
return 'Vui lòng nhập số điện thoại.';
case 'quota-exceeded':
return 'Đã vượt quá giới hạn SMS, vui lòng thử lại sau.';
case 'session-expired':
return 'Phiên xác thực đã hết hạn, vui lòng gửi lại mã.';
case 'invalid-verification-code':
return 'Mã xác thực không hợp lệ.';
case 'account-exists-with-different-credential':
return 'Đã tồn tại tài khoản với email này nhưng sử dụng phương thức đăng nhập khác.';
case 'invalid-credential':
return 'Thông tin xác thực không hợp lệ.';
case 'operation-not-supported-in-this-environment':
return 'Phương thức xác thực này không được hỗ trợ trên nền tảng hiện tại.';
case 'popup-blocked':
return 'Cửa sổ đăng nhập bị chặn. Vui lòng cho phép cửa sổ bật lên và thử lại.';
case 'popup-closed-by-user':
return 'Cửa sổ đăng nhập đã bị đóng trước khi hoàn tất quá trình xác thực.';
case 'network-request-failed':
return 'Lỗi kết nối mạng. Vui lòng kiểm tra kết nối của bạn và thử lại.';
case 'too-many-requests':
return 'Quá nhiều yêu cầu không thành công. Vui lòng thử lại sau.';
case 'internal-error':
return 'Đã xảy ra lỗi nội bộ. Vui lòng thử lại sau.';
default:
return 'Đã xảy ra lỗi: ${error.message}';
}
}
return 'Đã xảy ra lỗi không xác định.';
}
}
13. Kết luận

Firebase Authentication cung cấp một giải pháp xác thực mạnh mẽ và linh hoạt cho ứng dụng Flutter của bạn. Việc tích hợp Firebase Authentication giúp bạn:
- Tiết kiệm thời gian phát triển: Không cần xây dựng hệ thống xác thực từ đầu
- Bảo mật cao: Firebase cung cấp các cơ chế bảo mật tiên tiến
- Hỗ trợ nhiều phương thức xác thực: Email/mật khẩu, Google, Facebook, số điện thoại,...
- Dễ dàng mở rộng: Liên kết với Firebase Firestore để lưu trữ thông tin người dùng
- Quản lý người dùng đơn giản: Giao diện Firebase Console thân thiện
Bằng cách tích hợp Firebase Authentication vào ứng dụng Flutter, bạn đã xây dựng một hệ thống xác thực toàn diện, bảo mật, và dễ dàng mở rộng. Hệ thống này có thể đáp ứng nhu cầu của các ứng dụng từ đơn giản đến phức tạp, giúp bạn tập trung vào phát triển các tính năng cốt lõi của ứng dụng.
Hãy luôn cập nhật các gói Firebase mới nhất để đảm bảo ứng dụng của bạn luôn nhận được các cải tiến và bản vá bảo mật mới nhất.
Tài nguyên học tập thêm:
Chúc bạn thành công trong việc xây dựng hệ thống xác thực cho ứng dụng Flutter!