当前位置：首页 > article >正文

Flutter 指纹识别

article 2024/12/2 20:48:56

在这篇博客中，我们将介绍如何使用 Flutter 的 local_auth 插件在 Android 和 iOS 设备上实现指纹识别功能。通过这一步一步的实现，我们将学习如何检查设备是否支持生物识别、如何触发指纹验证，并处理可能出现的错误。

效果图（因为录屏时系统不能录制指纹页面，所以黑屏；实际跑起来是正常的：

1. 安装 local_auth 插件

插件地址：https://pub.dev/packages/local_auth

在 pubspec.yaml 文件中添加了 local_auth 插件依赖：

dependencies:
  flutter:
    sdk: flutter
  local_auth: ^2.1.3

2. 修改 Android 配置

2.1 在 AndroidManifest.xml 文件中添加权限，以允许应用访问生物识别硬件：

<uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>

2.2 MainActivity 继承自 FlutterFragmentActivity，并且注册插件引擎

package com.example.test1

import io.flutter.embedding.android.FlutterFragmentActivity;
import io.flutter.plugins.GeneratedPluginRegistrant
import io.flutter.embedding.engine.FlutterEngine

class MainActivity: FlutterFragmentActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

2.3 在android/app/src/main/res/values/styles.xml 文件下这样改：

<style name="LaunchTheme" parent="Theme.AppCompat.DayNight">

3. 实现指纹识别功能

接下来，我们编写 Flutter 代码，使用 local_auth 插件实现指纹识别。我们的应用将包含以下功能：

检查设备是否支持指纹识别。
在支持指纹识别的设备上执行身份验证。

以下是主要的 Flutter 代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:local_auth/local_auth.dart';
import 'package:flutter/services.dart';
import 'package:local_auth_ios/local_auth_ios.dart';
import 'package:local_auth_android/local_auth_android.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '指纹识别 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FingerprintDemo(),
    );
  }
}

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

  @override
  _FingerprintDemoState createState() => _FingerprintDemoState();
}

class _FingerprintDemoState extends State<FingerprintDemo> {
  final LocalAuthentication auth = LocalAuthentication();
  String _message = "请点击按钮进行指纹识别";
  bool haveFingerprint = false;

  // 检查设备是否支持生物识别--手机必须要设置密码和开启指纹功能
  Future<void> _checkBiometricSupport() async {
    haveFingerprint = await isSupportBiometric();

    setState(() {
      if (haveFingerprint) {
        _message = "设备支持指纹识别";
      } else {
        _message = "该设备不支持指纹识别";
      }
    });
  }

  // 尝试进行指纹识别
  Future<void> _authenticateWithFingerprint() async {
    try {
      bool authenticated = await auth.authenticate(
          localizedReason: ' ',
          authMessages: [
            const AndroidAuthMessages(
              biometricHint: '扫描指纹进行身份验证',
              cancelButton: '取消',
              signInTitle: '指纹验证',
            ),
            const IOSAuthMessages(
              lockOut: '验证身份失败，请重新验证',
              cancelButton: '取消',
            )
          ],
          options: const AuthenticationOptions(
            useErrorDialogs: false,
            biometricOnly: true,
          ));


      setState(() {
        if (authenticated) {
          _message = "指纹验证成功";
        } else {
          _message = "指纹验证失败";
        }
      });
    } on PlatformException catch (e) {
      setState(() {
        _message = "错误: ${e.message}";
      });
    }
  }

  isSupportBiometric() async {

    late List<BiometricType> availableBiometrics;
    try {
      availableBiometrics = await auth.getAvailableBiometrics();
      print(availableBiometrics);
      if (availableBiometrics.isNotEmpty) {
        if (Platform.isIOS) {
          if (availableBiometrics.contains(BiometricType.fingerprint)) {
            return true;
          }
        } else {
          return true;
        }
      }
    } on PlatformException catch (e) {
      availableBiometrics = <BiometricType>[];
      print(e);
    }
    return false;
  }

  @override
  void initState() {
    super.initState();
    _checkBiometricSupport();  // 启动时检查设备支持情况
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("指纹识别 Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _message,
              style: const TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _authenticateWithFingerprint,
              child: const Text("使用指纹验证"),
            ),
          ],
        ),
      ),
    );
  }
}

4.代码解析

注意：只有手机设置了密码和开启了指纹功能才可以用这个功能

_checkBiometricSupport：首先检查设备是否支持指纹识别。通过调用 auth.getAvailableBiometrics() 来获取设备支持的生物识别类型。如果设备支持指纹识别或面部识别，将更新 _message。
_authenticateWithFingerprint：触发指纹验证。如果设备支持并且用户点击按钮，应用会弹出指纹识别对话框，并根据用户的验证结果更新 _message。
isSupportBiometric：通过调用 auth.getAvailableBiometrics() 来获取设备支持的生物识别类型。如果设备支持指纹或面部识别，返回 true。
AuthenticationOptions：配置 local_auth 插件的一些选项，如禁用默认的错误对话框（useErrorDialogs: false）和只允许使用生物识别进行验证（biometricOnly: true）。