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

百度已收录   阅读次数: 114
2021-08-1222:33:00 发表评论
摘要

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

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

开篇寄语

现在的智能手机,一般是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>

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

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

接下来是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"/>

如下图所示:

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

好的,做完这些之后,返回到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(),
      ],
    );
  }
}

运行后效果如下图所示:

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

点击click就会进入指纹识别或者人脸识别模式,因为并没有在真机上运行,所以无法看到效果,如果在真机演示是可以看到效果的,类似于这样(以一个例子的图来说):

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

当点击指纹后,出现弹窗提示,要求进行指纹识别,如下图所示:

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

指纹识别成功后,如下图所示:

Flutter如何让你的App实现本地指纹识别或者人脸识别
分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: