Flutter Firebase认证插件corbado_auth_firebase的使用

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

Flutter Firebase认证插件corbado_auth_firebase的使用

概述

corbado_auth_firebase 是一个Flutter包,允许你在Firebase项目中使用passkeys进行用户认证。此包需与 firebase_auth 一起使用,并支持为现有用户添加passkey登录功能。它还提供了电子邮件OTP代码作为备用登录机制。

平台支持

Android iOS Linux macOS Web Windows
支持 未测试

功能

  • 允许新用户通过passkeys注册和登录。
  • 允许现有用户设置passkey并用其登录。
  • 使用电子邮件OTP代码作为备用登录机制(例如在设备上没有可用passkeys时)。

架构

该系统由四个主要部分组成:

  1. Flutter App:你的Flutter应用,需使用 firebase_auth 进行认证。
  2. Firebase Authentication:由Firebase提供的后端服务。
  3. Firebase Functions:用于生成自定义Firebase令牌,需要部署到你的Firebase项目。
  4. Relying Party Server:Corbado充当依赖方服务器,处理所有passkey相关操作。

准备和配置

为了使该包正常工作,你需要完成以下步骤:

部署Firebase扩展

  1. 访问 Firebase扩展中心 安装扩展。
  2. 安装完成后,按照POSTINSTALL.md 的说明追加 “Service Account Token Creator” 到你的服务账户。

添加包到Flutter应用

  1. pubspec.yaml 中添加 corbado_auth_firebase 包:
    dependencies:
      corbado_auth_firebase: ^latest_version
    
  2. 创建并初始化 CorbadoAuthFirebase 实例。

配置Corbado项目

根据 iOSAndroid 的文档进行配置。

示例代码

以下是一个完整的示例demo,展示了如何在Flutter应用中集成 corbado_auth_firebase

import 'package:corbado_auth_firebase/corbado_auth_firebase.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // 初始化CorbadoAuthFirebase
  final corbadoAuth = CorbadoAuthFirebase();
  await corbadoAuth.init('us-central1');

  runApp(MyApp(corbadoAuth: corbadoAuth));
}

class MyApp extends StatelessWidget {
  final CorbadoAuthFirebase corbadoAuth;

  const MyApp({super.key, required this.corbadoAuth});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Passkeys Demo', corbadoAuth: corbadoAuth),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  final CorbadoAuthFirebase corbadoAuth;

  const MyHomePage({super.key, required this.title, required this.corbadoAuth});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 调用登录或注册方法
                try {
                  await widget.corbadoAuth.signInWithPasskey(email: 'user@example.com');
                  print('登录成功');
                } catch (e) {
                  print('登录失败: $e');
                }
              },
              child: Text('使用Passkey登录'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter Firebase认证插件corbado_auth_firebase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Firebase认证插件corbado_auth_firebase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter应用中使用corbado_auth_firebase插件进行Firebase认证的代码示例。假设你已经设置好了Firebase项目并获取了相关的配置信息。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加corbado_auth_firebase依赖:

dependencies:
  flutter:
    sdk: flutter
  corbado_auth_firebase: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Firebase

确保你已经在Firebase控制台中添加了你的Flutter应用的配置,并下载了google-services.json(对于Android)和GoogleService-Info.plist(对于iOS)文件,并将它们放置在相应的项目目录下。

3. 初始化Firebase认证

在你的main.dart文件或适当的初始化文件中,配置Firebase认证:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:corbado_auth_firebase/corbado_auth_firebase.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Firebase应用
  await Firebase.initializeApp();
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(),
    );
  }
}

4. 使用corbado_auth_firebase进行认证

创建一个AuthScreen组件来处理用户认证。这里我们展示如何使用Email和密码认证:

import 'package:flutter/material.dart';
import 'package:corbado_auth_firebase/corbado_auth_firebase.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _auth = FirebaseAuth.instance;
  String _email = '';
  String _password = '';
  String _errorMessage = '';

  void _signIn() async {
    setState(() {
      _errorMessage = '';
    });
    try {
      UserCredential result = await _auth.signInWithEmailAndPassword(
        email: _email,
        password: _password,
      );
      User? user = result.user;
      // 处理成功登录的用户
      print('User (email: ${user!.email}) signed in with ${user.providerId}');
    } catch (e) {
      setState(() {
        _errorMessage = e.message ?? 'Authentication Failed.';
      });
    }
  }

  void _signUp() async {
    setState(() {
      _errorMessage = '';
    });
    try {
      UserCredential result = await _auth.createUserWithEmailAndPassword(
        email: _email,
        password: _password,
      );
      User? user = result.user;
      // 处理新注册的用户
      print('User (email: ${user!.email}) signed up with ${user.providerId}');
    } catch (e) {
      setState(() {
        _errorMessage = e.message ?? 'Sign Up Failed.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Authentication'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.emailAddress,
              autofocus: true,
              decoration: InputDecoration(labelText: 'Email'),
              onChanged: (value) {
                _email = value;
              },
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(labelText: 'Password'),
              onChanged: (value) {
                _password = value;
              },
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: _signIn,
              child: Text('Sign In'),
            ),
            SizedBox(height: 12),
            ElevatedButton(
              onPressed: _signUp,
              child: Text('Sign Up'),
            ),
            SizedBox(height: 12),
            Text(
              _errorMessage,
              style: TextStyle(color: Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

确保你已经正确配置了Firebase项目,并且你的设备或模拟器已经连接到了正确的Firebase项目。运行你的Flutter应用,你应该能够使用Email和密码进行用户认证。

这个示例展示了如何使用corbado_auth_firebase插件进行基本的Email和密码认证。你可以根据需求扩展此功能,例如添加社交登录(Google, Facebook等)或实现密码重置功能。

回到顶部