LoginSignup
71

More than 3 years have passed since last update.

Flutterで顔認証/指紋認証を簡単に実装する

Last updated at Posted at 2019-05-01

Flutter | GW アドベントカレンダーの5日目の記事です。

顔認証/指紋認証を実装するために、Flutter公式のlocal_authプラグインを使用します。

完成形

以下のような感じで、顔認証/指紋認証を実装します。

顔認証

face.png

指紋認証

touch.png

Android

android_touch.png

顔認証/指紋認証の実装

1. プラグインとの紐付け

pubspec.yaml
dependencies:
  local_auth: ^0.4.0+1    // 追加

バージョンについては、local_authを参照してください。

2. 生体認証設定

iOSとAndroid側で以下を追加して、生体認証を行えるようにします。

iOS

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

Android

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

顔認証/指紋認証の実装

main.dart
  import 'package:local_auth/local_auth.dart';
端末の可能な生体認証タイプを取得
main.dart
  LocalAuthentication _localAuth = LocalAuthentication();

  Future<List<BiometricType>> _getAvailableBiometricTypes() async {
    List<BiometricType> availableBiometricTypes;
    try {
      availableBiometricTypes = await _localAuth.getAvailableBiometrics();
    } on PlatformException catch (e) {
      // TODO
    }
    return availableBiometricTypes;
  }
生体認証を要求
main.dart
  Future<bool> _authenticate() async {
    bool result = false;

    List<BiometricType> availableBiometricTypes = await _getAvailableBiometricTypes();

    try {
      if (availableBiometricTypes.contains(BiometricType.face)
          || availableBiometricTypes.contains(BiometricType.fingerprint)) {
        result = await _localAuth.authenticateWithBiometrics(localizedReason: "認証してください");
      }
    } on PlatformException catch (e) {
      // TODO
    }
    return result;
  }

指紋/顔を登録していない場合の挙動は?

以下のように、登録を促すダイアログを自動的に表示してくれます。
ここで、顔や指紋を登録せずに「OK」ボタンを押された際には、認証結果がfalseで返ってきます。

touch_setting.png

Android

android_touch_setting.png

まとめ

local_authプラグインを実装しているだけです。
指紋認証も顔認証もかなり簡単に実装できてしまいます。
念のため、githubにプロジェクトおいています
Flutterつよし!!!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
71