Flutter认证界面插件flutter_auth_ui的使用

flutter_auth_ui 是一个非官方的 FirebaseUI 包，旨在为 Flutter 提供对 Android、iOS 和 Web 的支持。它允许用户通过电子邮件、电话号码、Google 账户等进行登录。

开始使用

该插件是基于 Android/iOS/Web 原生插件封装的。在使用之前，请确保已经按照文档设置了您的 Firebase 项目：

• iOS: FirebaseUI for iOS
• Android: FirebaseUI for Android
• Web: FirebaseUI for Web

使用方法

下面是一个完整的示例代码，展示了如何使用 flutter_auth_ui 插件来创建一个包含多种登录方式的应用程序：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_auth_ui/flutter_auth_ui.dart';

import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        materialTapTargetSize: MaterialTapTargetSize.padded,
      ),
      home: const MyPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          children: [
            FilledButton(
              onPressed: () async {
                final messenger = ScaffoldMessenger.of(context);

                final providers = [
                  AuthUiProvider.anonymous,
                  AuthUiProvider.email,
                  AuthUiProvider.phone,
                  AuthUiProvider.apple,
                  AuthUiProvider.github,
                  AuthUiProvider.google,
                  AuthUiProvider.microsoft,
                  AuthUiProvider.yahoo,
                ];

                final result = await FlutterAuthUi.startUi(
                  items: providers,
                  tosAndPrivacyPolicy: const TosAndPrivacyPolicy(
                    tosUrl: "https://www.google.com",
                    privacyPolicyUrl: "https://www.google.com",
                  ),
                  androidOption: const AndroidOption(
                    enableSmartLock: false, // default true
                    showLogo: true, // default false
                    overrideTheme: true, // default false
                  ),
                  emailAuthOption: const EmailAuthOption(
                    requireDisplayName: true, // default true
                    enableMailLink: false, // default false
                    handleURL: '',
                    androidPackageName: '',
                    androidMinimumVersion: '',
                  ),
                );

                messenger.showSnackBar(
                  SnackBar(
                    content: Text(
                      result ? 'Success sign-in' : 'Failed sign-in',
                    ),
                  ),
                );
              },
              child: const Text('Sign in'),
            ),
            FilledButton.tonal(
              onPressed: () async {
                final messenger = ScaffoldMessenger.of(context);
                await FlutterAuthUi.signOut();
                messenger.showSnackBar(
                  const SnackBar(
                    content: Text('Success sign-out'),
                  ),
                );
              },
              child: const Text('Sign out'),
            ),
            OutlinedButton(
              onPressed: () async {
                final user = FirebaseAuth.instance.currentUser;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(
                      user == null
                          ? 'No user is signed in'
                          : '${user.uid} is signed in',
                    ),
                  ),
                );
              },
              child: const Text('Check sign-in status'),
            ),
          ],
        ),
      ),
    );
  }
}

需求

• Flutter 3.13.0 或更高版本
• firebase_auth 5.0.0 或更高版本

Android 特定需求

• minSdkVersion 21
• compileSdkVersion 34

iOS 特定需求

• iOS 13 或更高版本

相关链接

• flutter_auth_ui介绍

小贴士

EmailLink

为了实现 EmailLink 登录，您需要提前准备；请先查阅 Firebase 文档。

Android

要处理动态链接，在 onCreate 和 onNewIntent 方法中添加 FlutterAuthUiPlugin.catchEmailLink（如果您不使用 EmailLink，则不需要添加）。

import android.content.Intent;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.dr1009.app.flutter_auth_ui.FlutterAuthUiPlugin;

import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 检查 intent
        FlutterAuthUiPlugin.catchEmailLink(this, getIntent());
    }

    @Override
    protected void onNewIntent(@NonNull Intent intent) {
        super.onNewIntent(intent);

        // 检查 intent
        FlutterAuthUiPlugin.catchEmailLink(this, intent);
    }
}

国际化

Android

无需特殊设置即可支持。

iOS

请参考 更新 iOS 应用包。

Web

请参考 安装选项 1：CDN - 国际化小部件。

更改 Android 上的 AppBar 标题

将字符串值作为 app_name 或 fui_default_toolbar_title 添加到应用程序的 strings.xml 文件中。行为取决于 FirebaseUI-Android。

显示 Logo (Android)

1. 将您的 Logo 资源文件添加到 android/app/src/main/res/drawable/flutter_auth_ui_logo.xml 或 android/app/src/main/res/drawable-{m~xxxhdpi}/flutter_auth_ui_logo.png
2. 启用 AndroidOption.showLogo

更改 AppBar 和链接颜色 (Android)

1. 在 android/app/src/main/res/values/style.xml 中添加 flutter_auth_ui_style 样式。
2. 启用 AndroidOption.overrideTheme

希望这些信息能帮助您更好地理解和使用 flutter_auth_ui 插件！如果有任何问题或需要进一步的帮助，请随时提问。