Zenn
📱

local_authの生体認証を使ってみる。

2022/04/26に公開
Flutter
tech

はじめに

今回はFlutterのパッケージであるlocal_authを使用して生体認証を実装してみたいと思います。

今回使用しているバージョンは以下の通りです。

インストール

pubspec.yaml
  dependencies:
    local_auth: ^2.0.0 //追加

基本設定

iOSの設定

以下の設定を追加します。

Info.plist
  <key>NSFaceIDUsageDescription</key>
　　　　<string>生体認証を使用する目的を記述</string>

Androidの設定

以下のコードを追加します。

MainActivity.kt
  import io.flutter.embedding.android.FlutterFragmentActivity
  import io.flutter.embedding.engine.FlutterEngine
  import io.flutter.plugins.GeneratedPluginRegistrant

  class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
     }
  }
AndroidManifest.xml
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
    <uses-permission android:name="android.permission.USE_FINGERPRINT"/> //追加
  <manifest>

コントローラーの作成

以下のように生体認証のメソッドを持つコントローラーを作成します。
※riverpodを使用しています。

auth_controller.dart
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:local_auth/local_auth.dart';

final localAuthenticationProvider = Provider<LocalAuthentication>(
  (ref) => LocalAuthentication(),
);

final authControllerProvider = Provider<AuthControllerProvider>(
  (ref) => AuthControllerProvider(ref.read),
);

class AuthControllerProvider {
  AuthControllerProvider(this._read);

  final Reader _read;

  LocalAuthentication get _auth => _read(localAuthenticationProvider);

  Future<bool> get canCheckBiometrics => _auth.canCheckBiometrics;

  Future<bool> didAuthenticate() async {
    final availableBiometrics = await _auth.getAvailableBiometrics();
    var result = false;
    if (availableBiometrics.contains(BiometricType.face) ||
        availableBiometrics.contains(BiometricType.fingerprint)) {
      result = await _auth.authenticate(
        localizedReason: 'Please authenticate to show account balance',
        options: const AuthenticationOptions(
          useErrorDialogs: true,
          stickyAuth: true,
          biometricOnly: true,
        ),
      );
    }
    return result;
  }
}

メソッドの詳細

端末に利用可能な生体認証が搭載されているかどうかを確認するメソッド。

//参考: final localAuth = LocalAuthentication();

bool canCheckBiometrics = await localAuth.canCheckBiometrics

利用可能な生体認証の種類（顔認証、指紋認証）を取得するメソッド。

//参考: final auth = LocalAuthentication()

List<BiometricsType> availableBiometrics = await auth.getAvailableBiometrics();

//BiometricsTypeは生体認証が利用可能であれば、BiometricsType.faceかBiometricsType.fingerprintを返す
//どれも使用できない場合は空の配列を返す

認証を実行するメソッド。

//参考: final localAuth = LocalAuthentication();

bool didAuthenticate = await localAuth.authenticate(
localizedReason: ‘認証を実行してください。’,
//optionで指定 biometricsOnly: true, 生体認証のみを利用する場合trueにする。
);

生体認証を実行する

先ほど定義したメソッドを呼び出します。呼び出すことで生体認証を実行することができます。

home_page.dart
class HomePage extends ConsumerWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('local_auth'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
	  //生体認証を実行
            await ref.read(authControllerProvider).didAuthenticate();
          },
          child: const Text('生体認証'),
        ),
      ),
    );
  }
}

終わりに

記事の中で誤った情報などがあればコメントで指摘していただけますと幸いです。よろしくお願いいたします。

Discussion