Flutter Firebase认证插件stacked_firebase_auth的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter Firebase认证插件stacked_firebase_auth的使用

stacked_firebase_auth 是一个与Stacked框架配合使用的Flutter插件,用于简化Firebase认证流程。它支持多种认证方式,包括Email/Password、Google、Apple、Facebook和匿名登录。

依赖项

该插件依赖以下包来支持不同的社交认证提供商:

使用步骤

1. 配置Firebase项目

  1. 访问Firebase控制台,创建一个新的项目。
  2. 在“Build”部分选择“Authentication”,点击“Get started”启用它。
  3. 根据需要启用不同的认证提供者。

2. 配置Flutter项目

  1. 安装必要的命令行工具:
    # 安装Firebase CLI
    curl -sL https://firebase.tools | bash
    
    # 登录Firebase
    firebase login
    
    # 安装FlutterFire CLI
    dart pub global activate flutterfire_cli
    
  2. 使用FlutterFire CLI配置项目:
    flutterfire configure
    
  3. 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. 安装并注册服务

  1. 更新iOS项目的Podfile以支持最低版本为12.0:
    platform :ios, '12.0'
    
  2. 更新Android项目的build.gradle文件,设置minSdkVersion为21:
    defaultConfig {
        ...
        minSdkVersion 21
        targetSdkVersion 33
        ...
    }
    
  3. 添加stacked_firebase_auth到依赖项:
    flutter pub add stacked_firebase_auth
    
  4. lib/app/app.dart中注册服务:
    [@StackedApp](/user/StackedApp)(
      routes: [ ... ],
      dependencies: [
        // 其他依赖项
        LazySingleton(classType: FirebaseAuthenticationService),
      ],
      bottomsheets: [ ... ],
      dialogs: [ ... ],
    )
    class App {}
    
  5. 再次生成应用:
    stacked generate
    

4. 集成社交认证提供者

Google

  1. Google Cloud Console创建OAuth应用。
  2. 在Firebase控制台激活Google Sign-in,并链接到你的OAuth应用。
  3. 运行flutterfire configure更新配置文件。
  4. 在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>
    
  5. 在Android中添加SHA1或SHA256签名到应用配置。

使用方法:

Future<FirebaseAuthenticationResult> signInWithGoogle({String? webLoginHint})

Apple

  1. Apple开发者账户注册App ID。
  2. 在Firebase控制台激活Apple Sign-in,并配置回调URL。
  3. 在XCode中激活“Sign in with Apple”功能。

使用方法:

Future<bool> isAppleSignInAvailable()
Future<FirebaseAuthenticationResult> signInWithApple({
  required String? appleRedirectUri,
  required String? appleClientId,
  bool askForFullName = true,
})

Facebook

  1. Facebook开发者平台创建并配置应用。
  2. 在Firebase控制台激活Facebook Sign-in,并链接到你的OAuth应用。
  3. 在iOS的Info.plist和Android的strings.xmlAndroidManifest.xml中添加必要信息。

使用方法:

Future<FirebaseAuthenticationResult> signInWithFacebook({String? webLoginHint})

5. Email/Password认证

  1. 在Firebase控制台启用Email/Password认证。
  2. 使用提供的方法进行登录、注册等操作:
    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. 匿名认证

  1. 在Firebase控制台启用匿名认证。
  2. 使用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

1 回复

更多关于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项目已经添加了Firebasestacked_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

  1. 创建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();
      }
    }
    
  2. 配置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认证操作,包括登录、注册和退出登录。你可以根据需要进一步扩展和定制这个示例。

回到顶部