Flutter如何让你的App实现本地指纹识别或者人脸识别

2021-08-1222:33:00 发表评论

摘要

现在的智能手机，一般是Android或者是iOS系统，都是支持指纹识别或者是面部识别的，对应的一些应用就会利用此功能进行隐私保护，比如银行类的App，黄色影视类的App等等都会应用这些功能，以增强隐私，让用户用着放心。在flutter中就有一个插件，名字叫做local_auth，可以很容易实现这类需求。那么该如何实现呢？请看本篇文章……

分享至：

开篇寄语

前情提要

内容详情

以下内容是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

首先是安装local_auth这个依赖库，在terminal中输入以下命令：

flutter pub add local_auth

回车后就开始安装了，安装完成后，则需要开启iOS和Android的使用权限。

先来说一下在iOS中，如果想要开启人脸识别的话，则需要添加下面这行代码：

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

具体位置可以参看下面这张图片：

接下来是Android，找到如下位置：android/app/src/main/kotlin/com/MainActivity.kt，更新代码为：

package com.example.my_app
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import io.flutter.embedding.android.FlutterActivity

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

接着在进入这个位置：android/app/src/main/AndroidManifest.xml，增加以下一条权限：

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

如下图所示：

好的，做完这些之后，返回到main.dart这个文件，哦，忘了说了，再提前安装一个简单的动态过渡动画，在terminal输入以下命令：

flutter pub add transparent_image

安装完成后，将main.dart文件换上下面的代码：

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:local_auth/local_auth.dart';
import 'package:transparent_image/transparent_image.dart' show kTransparentImage;

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Example',
      home: LocalAuthExample(),
    );
  }
}

class LocalAuthExample extends StatefulWidget {
  const LocalAuthExample({Key? key}) : super(key: key);

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

class _LocalAuthExampleState extends State<LocalAuthExample> {
  bool _authSuccess = false;
  late LocalAuthentication _localAuth;

  @override
  void initState() {
    super.initState();
    _localAuth = LocalAuthentication();
  }

  Future<bool> _auth() async {
    setState(() => _authSuccess = false);
    if (await _localAuth.canCheckBiometrics == false) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Your device is NOT capable of checking biometrics.\n'
              'This demo will not work on your device!\n'
              'You must have android 6.0+ and have fingerprint sensor.'),
        ),
      );
      return false;
    }
    try {
      final authSuccess = await _localAuth.authenticate(
          localizedReason: 'Auth in to see hidden image', biometricOnly: true);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('authSuccess=$authSuccess')),
      );
      return authSuccess;
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(e.toString())),
      );
      return false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(padding: EdgeInsets.only(top: 20)),
        ElevatedButton(
          child: Text('Click Me'),
          onPressed: () async {
            final authSuccess = await _auth();
            setState(() => _authSuccess = authSuccess);
          },
        ),
        if (_authSuccess)
          FadeInImage(
            placeholder: MemoryImage(kTransparentImage),
            image: const AssetImage('assets/images/dartlearning.jpg'),
          )
        else
          const Placeholder(),
      ],
    );
  }
}

运行后效果如下图所示：