Flutter认证UI插件appwrite_auth_ui的使用

免责声明

本库的最新版本设计用于与Appwrite 1.4.0配合使用。当前Appwrite云平台正在使用Appwrite 1.1.2版本。因此，本包使用的是Appwrite 9.0.1版本。您可以在此处跟踪该问题的进展：此处。

开始使用

在您的assets文件夹中创建一个名为config.json的文件，并添加以下字段：

{
  "APPWRITE_PROJECT_ID": "",
  "APPWRITE_MAGIC_LINK_URL": ""
}

运行您的应用时，请使用以下命令：

flutter run --dart-define-from-file=assets/config.json

邮箱认证

使用AppwriteEmailAuth小部件来创建邮箱和密码登录/注册表单。它还包含一个按钮以显示忘记密码的表单。

AppwriteEmailAuth(
  redirectUrl: const String.fromEnvironment('APPWRITE_MAGIC_LINK_URL'),
  onSignInComplete: (response) {
    Navigator.of(context).pushReplacementNamed('/home');
  },
  onSignUpComplete: (response) {
    Navigator.of(context).pushReplacementNamed('/home');
  },
  metadataFields: [
    MetaDataField(
      prefixIcon: const Icon(Icons.person),
      label: '用户名',
      key: 'username',
      validator: (val) {
        if (val == null || val.isEmpty) {
          return '请输入内容';
        }
        return null;
      },
    ),
  ],
)

魔法链接认证

使用AppwriteMagicAuth小部件来创建魔法链接登录表单。

AppwriteMagicAuth(
  onSuccess: (response) {
    // 执行一些操作，例如：
    // Navigator.of(context).pushReplacementNamed('/home');
  },
  onError: (error) {
    // 对错误进行处理
  },
  redirectUrl: kIsWeb
      ? null
      : 'io.appwrite.flutterquickstart://login-callback',
)

重置密码

使用AppwriteResetPassword来创建密码重置表单。

AppwriteResetPassword(
  onError: (error) {
    // 对错误进行处理
  },
  onSuccess: (response) {
    Navigator.of(context).pushReplacementNamed('/home');
  },
)

社交认证

使用AppwriteSocialsAuth来创建社交登录按钮列表。

AppwriteSocialsAuth(
  colored: true,
  socialProviders: SocialProviders.values,
  onSuccess: (session) {
    Navigator.of(context).pushReplacementNamed('/home');
  },
  onError: (error) {
    // 对错误进行处理
  },
)

主题定制

本库使用纯Flutter组件，因此您可以使用自己的主题控制组件的外观。

完整示例代码

import 'package:example/phone_sign_up.dart';
import 'package:flutter/material.dart';
import 'package:appwrite_auth_ui/appwrite_auth_ui.dart';

import './home.dart';
import './sign_in.dart';
import './magic_link.dart';
import './update_password.dart';
import 'phone_sign_in.dart';
import './verify_phone.dart';

late Client appwrite;

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

  appwrite = Client().setEndpoint('https://cloud.appwrite.io/v1').setProject(
        const String.fromEnvironment('APPWRITE_PROJECT_ID'),
      );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Appwrite Auth UI Demo',
      theme: ThemeData(
        colorSchemeSeed: const Color(0xfff02e65),
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const SignUp(),
        '/magic_link': (context) => const MagicLink(),
        '/update_password': (context) => const UpdatePassword(),
        '/phone_sign_in': (context) => const PhoneSignIn(),
        '/phone_sign_up': (context) => const PhoneSignUp(),
        '/verify_phone': (context) => const VerifyPhone(),
        '/home': (context) => const Home(),
      },
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute<void>(
          settings: settings,
          builder: (BuildContext context) => const Scaffold(
            body: Center(
              child: Text(
                '未找到',
                style: TextStyle(
                  fontSize: 42,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}