Flutter Firebase认证插件katana_auth_firebase的使用

Katana Auth

[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]

简介

Firebase Authentication 在处理认证时非常有用。

通过它可以轻松实现多种类型的认证，包括通过电子邮件地址、电话号码和社交媒体账户进行认证。

然而，即使以后计划使用 Firebase 认证，也可能会有在创建应用原型时不想连接到服务器进行认证的情况，或者在测试代码中实现认证的需求。

因此，我实现了一个包，可以使用适配器在 Firebase 和本地认证之间切换，就像我在 katana_model 中所做的那样。

此外，接口经过改进，使得根据应用程序的不同，可以轻松地在 Google 登录和 Apple 登录之间切换。

安装

导入以下包：

flutter pub add katana_auth

如果你使用了 Firestore，还需要一起导入以下包：

flutter pub add katana_auth_firebase

实现

准备工作

始终将 <code>AuthAdapterScope</code> 小部件放置在应用的根附近。

传递一个适配器参数，如 <code>RuntimeAuthAdapter</code>。

// main.dart
import 'package:flutter/material.dart';
import 'package:katana_auth/katana_auth.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return AuthAdapterScope(
      adapter: const RuntimeAuthAdapter(),
      child: MaterialApp(
        home: const AuthPage(),
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );
  }
}

创建认证对象

要执行认证，首先创建一个 <code>Authentication</code> 并将其保持在某个地方。

<code>Authentication</code> 对象可以获取以下数据以检查认证状态：

• <code>isSignedIn</code>：如果已认证则返回 <code>true</code>。
• <code>isAnonymously</code>：对于匿名认证返回 <code>true</code>。
• <code>userId</code>：返回用户 ID。
• <code>userEmail</code>：如果进行了电子邮件认证等，则返回用户的电子邮件地址。
• <code>userPhoneNumber</code>：如果进行了电话号码验证，则返回用户的电话号码。

此外，由于 <code>Authentication</code> 继承自 ChangeNotifier，可以通过使用 <code>addListener</code> 或 riverpod 的 <code>ChangeNotifierProvider</code> 来监视更新。

// auth_page.dart
import 'package:flutter/material.dart';
import 'package:katana_auth/katana_auth.dart';

class AuthPage extends StatefulWidget {
  const AuthPage({super.key});

  @override
  State<StatefulWidget> createState() => AuthPageState();
}

class AuthPageState extends State<AuthPage> {
  final auth = Authentication();

  @override
  void initState() {
    super.initState();
    auth.addListener(_handledOnUpdate);
  }

  void _handledOnUpdate() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    auth.removeListener(_handledOnUpdate);
    auth.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("App Demo")),
      body: ListView(
        children: [
          ListTile(
            title: Text("SignedIn: ${auth.isSignedIn}"),
          ),
          ListTile(
            title: Text("Anonymously: ${auth.isAnonymously}"),
          ),
          ListTile(
            title: Text("ID: ${auth.userId}"),
          ),
          ListTile(
            title: Text("Email: ${auth.userEmail}"),
          ),
          ListTile(
            title: Text("Phone: ${auth.userPhoneNumber}"),
          ),
        ],
      ),
    );
  }
}

用户注册与登录

使用 <code>auth.register</code> 方法来注册用户。

必须传递 <code>RegisterAuthProvider</code> 参数。

<code>RegisterAuthProvider</code> 应该通过具有 <code>register</code> 方法的 <code>AuthQuery</code> 获得。（AuthQuery 详见下文。）

await auth.register(
  EmailAndPasswordAuthQuery.register(
    email: "test@email.com",
    password: "12345678",
  ),
);

同样，使用 <code>auth.signIn</code> 进行登录。

必须传递 <code>SignInAuthProvider</code> 参数，并且应该通过具有 <code>signIn</code> 方法的 <code>AuthQuery</code> 获得。

await auth.signIn(
  EmailAndPasswordAuthQuery.signIn(
    email: "test@email.com",
    password: "12345678",
  ),
);

使用 <code>auth.confirmSignIn</code> 来确认认证，例如进行邮件链接认证或短信认证。

await auth.confirmSignIn(
  SmsAuthQuery.confirmSignIn(
    code: "012345",
  ),
);

更改用户信息

使用 <code>auth.change</code> 来更改用户信息。

必须传递 <code>ChangeAuthProvider</code> 参数，但根据要更改的内容，AuthQuery 方法可能不同。

• <code>EmailAndPasswordAuthQuery.changeEmail</code>：更改电子邮件地址。
• <code>EmailAndPasswordAuthQuery.changePassword</code>：更改密码。
• <code>SmsAuthQuery.changePhoneNumber</code>：更改电话号码。

await auth.change(
  EmailAndPasswordAuthQuery.changeEmail(
    email: "changed@email.com"
  ),
);

（仅在登录后可用。）

注销

使用 <code>auth.signOut</code> 进行注销。

仅在登录后可用，无需参数。

await auth.signOut();