點燈坊

失くすものさえない今が強くなるチャンスよ

local_auth 啟動生物辨識登入

Sam Xiao's Avatar 2024-10-15

生物辨識登入 已經成為手機登入的標配,local_auth啟動 該裝置的生物辨識登入。

Version

Flutter 3.24
local_auth 3.2

Flutter

authenticate01

local_auth

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

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

  
  State<Home> createState() {
    return _Home();
  }
}

class _Home extends State<Home> {
  final _auth = LocalAuthentication();
  var _isAuthenticated = false;

  Future<bool> _hasBiometrics() async {
    var canCheckBiometrics = false;
    var isDeviceSupported = false;

    try {
      canCheckBiometrics = await _auth.canCheckBiometrics;
      isDeviceSupported = await _auth.isDeviceSupported();
    } on PlatformException catch (e) {
      if (kDebugMode) {
        print(e);
      }
      return false;
    }

    return canCheckBiometrics && isDeviceSupported;
  }

  Future<bool> _authenticate() async {
    try {
      return await _auth.authenticate(
        localizedReason: 'Authenticate by biometrics',
      );
    } catch (e) {
      if (kDebugMode) {
        print(e);
      }
      return false;
    }
  }

  
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('local_auth'));

    var elevatedButton = ElevatedButton(
        onPressed: () async {
          final isAuthAvailable = await _hasBiometrics();

          if (!isAuthAvailable) return;

          final isAuthenticated = await _authenticate();

          setState(() {
            _isAuthenticated = isAuthenticated;
          });
        },
        child: const Text('auth.authenticate'));

    var body = Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        elevatedButton,
        Text('Biometrics Authenticate: $_isAuthenticated'),
      ],
    ));

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 19

Future<bool> _hasBiometrics() async {
  var canCheckBiometrics = false;
  var isDeviceSupported = false;

  try {
    canCheckBiometrics = await _auth.canCheckBiometrics;
    isDeviceSupported = await _auth.isDeviceSupported();
  } on PlatformException catch (e) {
    if (kDebugMode) {
      print(e);
    }
    return false;
  }

  return canCheckBiometrics && isDeviceSupported;
}
  • 偵測是否有可用的生物辨識
  • auth.canCheckBiometrics硬體 是否支援生物辨識
  • auth.isDeviceSupported用戶 是否有設定生物辨識
  • canCheckBiometricsisDeviceSupported 都為 true 時,才表示能啟動生物辨識登入

Line 36

Future<bool> _authenticate() async {
  try {
    return await _auth.authenticate(
      localizedReason: 'Authenticate by biometrics',
    );
  } catch (e) {
    if (kDebugMode) {
      print(e);
    }
    return false;
  }
}
  • _auth.authenticate:啟動生物辨識登入
    • localizedReason:iOS 必須傳入 localizedReason

Line 54

onPressed: () async {
  final isAuthAvailable = await _hasBiometrics();

  if (!isAuthAvailable) return;

  final isAuthenticated = await _authenticate();

  setState(() {
    _isAuthenticated = isAuthenticated ;
  });
}
  • 整合 _hasBiometrics()_authenticate() 啟動生物辨識登入
  • isAuthAvailabletrue 時,才會真正啟動生物辨識登入

Conclusion

  • 要啟動生物辨識前,必須先判斷裝置是否支持生物辨識,且用戶也已設定好生物辨識

Reference

pub.dev, local_auth 2.3.0
Flutter Packages, local_auth
Vinayak, Enabling Local Authentication for your Flutter Application
Hussain Mustafa, Flutter Local Authentication Tutorial