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认证操作,包括登录、注册和退出登录。你可以根据需要进一步扩展和定制这个示例。
        
      
            
            
            
