Flutter Firebase认证插件stacked_firebase_auth的使用
Flutter Firebase认证插件stacked_firebase_auth的使用
stacked_firebase_auth
是一个与Stacked框架配合使用的Flutter插件,用于简化Firebase认证流程。它支持多种认证方式,包括Email/Password、Google、Apple、Facebook和匿名登录。
依赖项
该插件依赖以下包来支持不同的社交认证提供商:
使用步骤
1. 配置Firebase项目
- 访问Firebase控制台,创建一个新的项目。
- 在“Build”部分选择“Authentication”,点击“Get started”启用它。
- 根据需要启用不同的认证提供者。
2. 配置Flutter项目
- 安装必要的命令行工具:
# 安装Firebase CLI curl -sL https://firebase.tools | bash # 登录Firebase firebase login # 安装FlutterFire CLI dart pub global activate flutterfire_cli
- 使用FlutterFire CLI配置项目:
flutterfire configure
- 在
lib/main.dart
中初始化Firebase:import 'package:example/firebase_options.dart'; import 'package:firebase_core/firebase_core.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); await setupLocator(); setupDialogUi(); setupBottomSheetUi(); runApp(const MainApp()); }
3. 安装并注册服务
- 更新iOS项目的
Podfile
以支持最低版本为12.0:platform :ios, '12.0'
- 更新Android项目的
build.gradle
文件,设置minSdkVersion
为21:defaultConfig { ... minSdkVersion 21 targetSdkVersion 33 ... }
- 添加
stacked_firebase_auth
到依赖项:flutter pub add stacked_firebase_auth
- 在
lib/app/app.dart
中注册服务:[@StackedApp](/user/StackedApp)( routes: [ ... ], dependencies: [ // 其他依赖项 LazySingleton(classType: FirebaseAuthenticationService), ], bottomsheets: [ ... ], dialogs: [ ... ], ) class App {}
- 再次生成应用:
stacked generate
4. 集成社交认证提供者
- 在Google Cloud Console创建OAuth应用。
- 在Firebase控制台激活Google Sign-in,并链接到你的OAuth应用。
- 运行
flutterfire configure
更新配置文件。 - 在iOS的
Info.plist
中添加必要信息:<key>GIDClientID</key> <string>[YOUR IOS CLIENT ID]</string> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <string>com.googleusercontent.apps.[REVERSED_CLIENT_ID]</string> </array> </dict> </array>
- 在Android中添加SHA1或SHA256签名到应用配置。
使用方法:
Future<FirebaseAuthenticationResult> signInWithGoogle({String? webLoginHint})
Apple
- 在Apple开发者账户注册App ID。
- 在Firebase控制台激活Apple Sign-in,并配置回调URL。
- 在XCode中激活“Sign in with Apple”功能。
使用方法:
Future<bool> isAppleSignInAvailable()
Future<FirebaseAuthenticationResult> signInWithApple({
required String? appleRedirectUri,
required String? appleClientId,
bool askForFullName = true,
})
- 在Facebook开发者平台创建并配置应用。
- 在Firebase控制台激活Facebook Sign-in,并链接到你的OAuth应用。
- 在iOS的
Info.plist
和Android的strings.xml
及AndroidManifest.xml
中添加必要信息。
使用方法:
Future<FirebaseAuthenticationResult> signInWithFacebook({String? webLoginHint})
5. Email/Password认证
- 在Firebase控制台启用Email/Password认证。
- 使用提供的方法进行登录、注册等操作:
loginWithEmail({required String email, required String password}) createAccountWithEmail({required String email, required String password}) sendResetPasswordLink(String email) validatePassword(String password) updatePassword(String password) updateEmail(String email) updateDisplayName(String displayName) updatePhotoURL(String photoUrl)
6. 匿名认证
- 在Firebase控制台启用匿名认证。
- 使用
loginAnonymously()
方法进行匿名登录。
7. 注销
使用logout()
方法注销用户,并清理相关数据。
示例代码
以下是完整的示例代码,展示如何在Flutter应用中集成stacked_firebase_auth
:
import 'package:example/app/app.bottomsheets.dart';
import 'package:example/app/app.dialogs.dart';
import 'package:example/app/app.locator.dart';
import 'package:example/app/app.router.dart';
import 'package:example/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:stacked_services/stacked_services.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
await setupLocator();
setupDialogUi();
setupBottomSheetUi();
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: Routes.startupView,
onGenerateRoute: StackedRouter().onGenerateRoute,
navigatorKey: StackedService.navigatorKey,
navigatorObservers: [
StackedService.routeObserver,
],
);
}
}
通过上述步骤和示例代码,您可以在Flutter应用中轻松实现Firebase认证功能。希望这些内容对您有所帮助!
更多关于Flutter Firebase认证插件stacked_firebase_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter Firebase认证插件stacked_firebase_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用stacked_firebase_auth
插件进行Firebase认证的示例代码。stacked_firebase_auth
是一个基于Firebase Authentication
的Flutter库,它使用了Stacked Architecture
来简化认证流程。
首先,你需要确保你的Flutter项目已经添加了Firebase
和stacked_firebase_auth
依赖。在pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter:
sdk: flutter
firebase_core: ^1.10.0
firebase_auth: ^3.3.3
stacked: ^2.2.0
stacked_firebase_auth: ^0.5.0 # 请注意版本号,确保使用最新版本
然后运行flutter pub get
来安装依赖。
接下来,你需要配置Firebase项目。这包括在Firebase控制台中创建项目,并下载google-services.json
文件放置在你的android/app/
目录下(对于iOS,你需要相应的配置文件)。
配置Firebase
在android/app/build.gradle
文件中添加以下内容:
dependencies {
// ... 其他依赖
implementation platform('com.google.firebase:firebase-bom:30.1.0')
implementation 'com.google.firebase:firebase-auth'
}
// 在文件的底部添加以下应用插件
apply plugin: 'com.google.gms.google-services'
在android/build.gradle
文件中确保有Google服务插件:
buildscript {
repositories {
// ... 其他仓库
google()
}
dependencies {
// ... 其他依赖
classpath 'com.google.gms:google-services:4.3.10' // 确保使用最新版本
}
}
使用Stacked Firebase Auth
-
创建ViewModel
创建一个新的ViewModel来处理认证逻辑。
import 'package:stacked/stacked.dart'; import 'package:stacked_firebase_auth/stacked_firebase_auth.dart'; class AuthViewModel extends BaseViewModel { final FirebaseAuthService _authService; AuthViewModel(this._authService); // 登录方法 void signInWithEmailAndPassword(String email, String password) async { try { await _authService.signInWithEmailAndPassword(email, password); } catch (e) { setError(e.message ?? "Authentication Failed"); } } // 注册方法 void createUserWithEmailAndPassword(String email, String password) async { try { await _authService.createUserWithEmailAndPassword(email, password); } catch (e) { setError(e.message ?? "Registration Failed"); } } // 退出登录方法 void signOut() async { await _authService.signOut(); } }
-
配置FirebaseAuthService
在你的
main.dart
或任何其他合适的文件中配置FirebaseAuthService
。import 'package:flutter/material.dart'; import 'package:stacked/stacked.dart'; import 'package:stacked_firebase_auth/stacked_firebase_auth.dart'; import 'viewmodels/auth_viewmodel.dart'; // 假设你的ViewModel放在这里 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Firebase Auth', theme: ThemeData( primarySwatch: Colors.blue, ), home: ViewModelProvider.withConsumer( viewModels: { ViewModelKey.authViewModel: ViewModelFactory(() => AuthViewModel( FirebaseAuthService() )) }, builder: (context, viewModels, widget) => AuthView(viewModels.authViewModel), ), ); } } class AuthView extends StatelessWidget { final AuthViewModel authViewModel; AuthView(this.authViewModel); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Firebase Authentication'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( decoration: InputDecoration(labelText: 'Email'), onSubmitted: (email) => _login(email, _passwordController.text), ), TextField( obscureText: true, controller: _passwordController, decoration: InputDecoration(labelText: 'Password'), ), ElevatedButton( onPressed: () => _login(_emailController.text, _passwordController.text), child: Text('Login'), ), ElevatedButton( onPressed: () => _register(_emailController.text, _passwordController.text), child: Text('Register'), ), ElevatedButton( onPressed: () => authViewModel.signOut(), child: Text('Sign Out'), ), ], ), ), ); } final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); void _login(String email, String password) { authViewModel.signInWithEmailAndPassword(email, password); } void _register(String email, String password) { authViewModel.createUserWithEmailAndPassword(email, password); } }
这个示例展示了如何使用stacked_firebase_auth
插件进行基本的Firebase认证操作,包括登录、注册和退出登录。你可以根据需要进一步扩展和定制这个示例。