Flutter生物识别认证与密码保护插件passcode_biometric_auth的使用

介绍

passcode_biometric_auth 是一个用于 Flutter 应用的插件，它结合了密码认证和生物识别认证两种方式。用户可以使用指纹或面部识别来验证身份，同时也可以设置并使用密码进行认证。

使用方法

导入包

首先，在你的 pubspec.yaml 文件中添加依赖项：

dependencies:
  passcode_biometric_auth: ^版本号

然后运行 flutter pub get 来安装该包。

基本示例

以下是一个基本的使用示例，展示了如何在应用中集成 passcode_biometric_auth 插件。

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

void main() {
  runApp(const MaterialApp(home: App()));
}

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  // 创建一个 PasscodeBiometricAuthUICached 实例
  final auth = PasscodeBiometricAuthUICached(
    forceCreatePasscode: true, // 强制创建密码
    title: 'Passcode', // 标题
    checkConfig: const CheckConfig(
      maxRetries: 5, // 最大尝试次数
      retryInSecond: 30, // 重试间隔时间（秒）
      content: 'Input Passcode', // 输入提示
      incorrectText:
          'This passcode is incorrect (max: @{counter}/@{maxRetries} times)\n'
          'You have to wait for @{retryInSecond}s to try again when the max number of retries is exceeded', // 错误提示
      forgotButtonText: 'Forgot your passcode?', // 忘记密码按钮文本
      useBiometricCheckboxText: 'Use biometric authentication', // 使用生物识别认证的复选框文本
      maxRetriesExceededText:
          'Maximum number of retries is exceeded\nPlease try again in @{second}s', // 超过最大尝试次数的提示
      biometricReason: 'Please authenticate to use this feature', // 生物识别认证的理由
    ),
    createConfig: const CreateConfig(
      content: 'Create Passcode', // 创建密码提示
      subcontent: 'Please remember your passcode. '
          'When you forget your passcode, you can reset it but '
          'all your cards will be removed from your local storage '
          'and your Google account will be signed out.', // 创建密码时的附加信息
    ),
    onForgotPasscode: (context, authUI) async {
      // 处理忘记密码逻辑
      if (await _forgotPasscode(context)) {
        return true;
      }
      return false;
    },
  );

  // 忘记密码对话框
  static Future<bool> _forgotPasscode(BuildContext context) async {
    final result = await showDialog<bool>(
        context: context,
        builder: (ctx) {
          return AlertDialog(
            title: const Text('Forget Passcode'),
            content: const Text(
              'All of your local data will be removed when reset the passcode. Would you like to continue?',
              textAlign: TextAlign.justify,
            ),
            actions: [
              OutlinedButton(
                child: const Text('No'),
                onPressed: () {
                  Navigator.pop(ctx, false);
                },
              ),
              ElevatedButton(
                child: const Text('Yes'),
                onPressed: () {
                  Navigator.pop(ctx, true);
                },
              ),
            ],
          );
        });

    return result == true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Passcode Biometric Auth'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 认证按钮
            ElevatedButton(
              onPressed: () {
                auth.authenticate(context);
              },
              child: const Text('Authenticate'),
            ),
            const SizedBox(height: 20),
            // 更改密码按钮
            ElevatedButton(
              onPressed: () {
                auth.changePasscode(context);
              },
              child: const Text('Change Passcode'),
            ),
          ],
        ),
      ),
    );
  }
}

详细说明

基本方法

• 认证

  auth.authenticate(context);
  

• 更改密码

  auth.changePasscode(context);
  

自定义UI

PasscodeBiometricAuth 和 PasscodeBiometricAuthUI 类提供了更多自定义的方法，你可以根据需要扩展和修改这些类来实现更复杂的功能。

/// Base biometric auth
class PasscodeBiometricAuth {
  /// 检查当前设备是否支持生物识别认证
  Future<bool> isBiometricAvailable();

  /// `true`: 已认证
  /// `false`: 未认证或不可用
  Future<bool> isBiometricAuthenticated({
    String biometricReason = 'Please authenticate to use this feature',
  });

  /// 检查密码 `code` 是否正确
  bool isPasscodeAuthenticated(String code);

  /// 检查是否存在密码
  bool isAvailablePasscode();
}

/// Base UI
class PasscodeBiometricAuthUI {
  /// 此方法将自动处理密码和生物识别认证。
  /// 如果 `forceCreatePasscode` 设置为 `true`，则应用程序会请求创建密码，如果不存在的话。
  /// 如果 `false`，则应用程序只会请求创建密码，如果生物识别认证在设备上不可用。
  /// 默认值由全局配置决定。
  ///
  /// 如果 `isUseBiometric` 设置为 `true`，则应用程序将尝试使用可用的生物识别认证。
  /// 默认值由全局配置决定。
  Future<bool> authenticate(
    BuildContext context, {
    bool? forceCreatePasscode,
    bool? isUseBiometric,
  });

  /// 检查当前设备是否支持生物识别认证
  Future<bool> isBiometricAvailable();

  /// 手动通过生物识别认证
  Future<bool> authenticateWithBiometric();

  /// 手动通过密码认证
  Future<bool> authenticateWithPasscode(BuildContext context);

  /// 更改密码
  Future<bool> changePasscode(BuildContext context);

  /// 检查密码 `code` 是否正确
  Future<bool> isPasscodeAuthenticated(String code);

  /// 设置 `isUseBiometric` 的值
  Future<void> useBiometric(bool isUse);

  /// 移除当前密码
  Future<void> removePasscode();

  /// 检查是否存在密码
  FutureOr<bool> isAvailablePasscode();
}

PasscodeBiometricAuthUICached

PasscodeBiometricAuthUICached 是 PasscodeBiometricAuthUI 的一种带有内置 onRead 和 onWrite 方法的实现，它使用了 SharedPreferences 来缓存数据。如果你需要更安全的方式来缓存数据，则应使用 PasscodeBiometricAuthUI。

final auth = PasscodeBiometricAuthUICached(
  forceCreatePasscode: true,
  title: 'Passcode',
  checkConfig: const CheckConfig(
    maxRetries: 5,
    retryInSecond: 30,
    content: 'Input Passcode',
    incorrectText: 'This passcode is incorrect (max: @{counter}/@{maxRetries} times)\nYou have to wait for @{retryInSecond}s to try again when the max number of retries is exceeded',
    forgotButtonText: 'Forgot your passcode?',
    useBiometricCheckboxText: 'Use biometric authentication',
    maxRetriesExceededText: 'Maximum number of retries is exceeded\nPlease try again in @{second}s',
    biometricReason: 'Please authenticate to use this feature',
  ),
  createConfig: const CreateConfig(
    content: 'Create Passcode',
    subcontent: 'Please remember your passcode. When you forget your passcode, you can reset it but all your cards will be removed from your local storage and your Google account will be signed out.',
  ),
  onForgotPasscode: (context, authUI) async {
    if (await _forgotPasscode(context)) {
      return true;
    }
    return false;
  },
);