Flutterで生体認証（FaceID,TouchID)を実装してみる

2022 6/07

2021.10.10 2022.06.07

こんにちは、株式会社Pentagonでエンジニアをしている日浦です。

この記事の内容

・今回はFaceIDやTouchIDを利用した生体認証の実装についてまとめたいと思います。

まず初めにPackageをインストール

pubspec.yaml の dependencies に追加しpubGetします。

dependencies:
  local_auth: ^1.1.7

生体認証を利用するための設定

生体認証を利用するために各プラットフォームで利用許可を求めます。

■iOS

info.plist

<key>NSFaceIDUsageDescription</key>
<string>FaceID認証を使う理由を記載</string>

■Android

AndroidManifest.xml

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

Flutterでの実装

生体認証が使えるかどうかチェック

このデバイスで使用可能なローカル認証があるかどうかを確認します。

Future<void> _checkBiometrics() async {
    late bool canCheckBiometrics;
    try {
      canCheckBiometrics = await auth.canCheckBiometrics;
    } on PlatformException catch (e) {
      canCheckBiometrics = false;
      print(e);
    }
    if (!mounted) return;

    setState(() {
      _canCheckBiometrics = canCheckBiometrics;
    });
  }

生体認証のTypeを取得

デバイスによってFaceID、TouchIDでの認証なのかを取得します。
- BiometricType.face
- BiometricType.fingerprint

 Future<void> _getAvailableBiometrics() async {
    late List<BiometricType> availableBiometrics;
    try {
      availableBiometrics = await auth.getAvailableBiometrics();
    } on PlatformException catch (e) {
      availableBiometrics = <BiometricType>[];
      print(e);
    }
    if (!mounted) return;

    setState(() {
      _availableBiometrics = availableBiometrics;
    });
  }

FaceIDかTouchIDか識別することも可能

if (Platform.isIOS) {
    if (availableBiometrics.contains(BiometricType.face)) {
        // Face ID.
    } else if (availableBiometrics.contains(BiometricType.fingerprint)) {
        // Touch ID.
    }
}

生体認証を要求

下記のコードで生体認証を起動させ、認証結果を取得します。

Future<void> _authenticate() async {
    bool authenticated = false;
    try {
      setState(() {
        _isAuthenticating = true;
        _authorized = 'Authenticating';
      });
      authenticated = await auth.authenticate(
          localizedReason: 'Let OS determine authentication method',
          useErrorDialogs: true,
          stickyAuth: true,
          biometricOnly: true);
      setState(() {
        _isAuthenticating = false;
      });
    } on PlatformException catch (e) {
      print(e);
      setState(() {
        _isAuthenticating = false;
        _authorized = "Error - ${e.message}";
      });
      return;
    }
    if (!mounted) return;

    setState(
        () => _authorized = authenticated ? 'Authorized' : 'Not Authorized');
  }

biometricOnly: trueを指定することで生体認証のみの認証を行える。
※ falseの場合、パスコードの認証も可

生体認証が登録されていない場合

useErrorDialogs: trueに設定しているとエラーメッセージを表示してくれます。

まとめ

local_auth　を利用すれば簡単に生体認証を実装できました。
local_auth　についてまとめられている記事は他にもありますが、コードが古かったので、
新しいバージョンのサンプルコードで試しました。