【Flutter/Dart】local_authで生体認証機能を実装する方法!

【Flutter/Dart】local_authで生体認証機能を実装する方法!

この記事からわかること

  • Flutter/Dart生体認証機能の実装方法
  • local_auth使い方
  • iOSシミュレーター/Androidエミュレーターでの動作確認

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Flutterで生体認証機能を実行する

Flutterで開発しているiOS/Androidアプリに生体認証機能を実装したい場合local_authパッケージを使用します。これを使用することでデバイスの指紋認証・顔認証機能をアプリから利用することができるようになります。

iOS/Androidの生体認証機能を共通のAPIで実装することができるのでFlutterならではの大きなメリットでもあると思うます。

仕組みとしてはiOSではLocalAuthenticationをラップしているので仕様や詳細は以下の記事も参考になると思います。

導入方法

pub.dev:local_auth

Flutterでlocal_authを利用できるようにするために以下のコマンドを実行してパッケージを導入します。

$ flutter pub add local_auth

これでパッケージの導入が完了し、import文を追加すれば使用できるようになります。

import 'package:local_auth/local_auth.dart';

iOSの前準備

iOSアプリ側で生体認証機能を使用するためには「Info.plist」にNSFaceIDUsageDescriptionキーを追加し使用する理由を明記する必要があります。


<key>NSFaceIDUsageDescription</key>
<string>アプリのログイン機能に認証機能を利用するため</string>

Androidの前準備

Androidアプリ側で生体認証機能を使用するためには「MainActivity.kt」の継承をFlutterFragmentActivityに変更しておきます。


import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity()

続いて「AndroidManifest.xml」にandroid.permission.USE_BIOMETRICを追加しておきます。


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>

生体認証機能の実装方法

生体認証機能関連の操作LocalAuthenticationが担当します。このクラスで生体認証がサポートされているかどうかや実際に生体認証を行うことが可能です。

/// 生体認証機能操作基底クラス
final LocalAuthentication _auth = LocalAuthentication();

生体認証機能が有効かどうか

対象の端末で生体認証機能が有効かどうかを識別するためにはcanCheckBiometricsisDeviceSupportedプロパティを参照します。この2つがtrueなら問題なく生体認証機能を利用することが可能になります。

// 端末が生体認証機能を搭載しているかどうか
final canCheckBiometrics = await _auth.canCheckBiometrics;
// 端末が生体認証機能をサポートしているかどうか
final isDeviceSupported = await _auth.isDeviceSupported();

認証する

生体認証を行うにはauthenticateメソッドを使用します。これを実行することで生体認証を求めるダイアログが表示されユーザーが生体認証を行い認証されるtrueを返します。localizedReasonにはダイアログに表示される要求用途の説明文を指定します。

try {
  return await _auth.authenticate(
    localizedReason: '生体認証を利用してアプリにログインできます。',
    options: const AuthenticationOptions(
      stickyAuth: true,
    ),
  );
} catch (e) {
  debugPrint("生体認証エラー: $e");
  return false;
}
【Swift】LocalAuthenticationでTouch IDやFace IDでの認証機能を実装する方法!

optionsにはAuthenticationOptions型で細かい設定を変更することができます。iOSシミュレーターでbiometricOnlytrueにするとクラッシュしました。おそらくこれはシミュレーターでは生体認証が行えずパスコードのみでの認証なのでサポートされていないとクラッシュするのかなと思います。

const AuthenticationOptions({
  // エラー時にシステムのエラーダイアログを表示するかどうか
  this.useErrorDialogs = true,
  // アプリがバックグラウンドに行っても認証状態を維持するかどうか
  this.stickyAuth = false,
  // センシティブな取引
  this.sensitiveTransaction = true,
  // 生体認証のみを許可(iOSのパスコードは使わない)
  this.biometricOnly = false,
});

iOSシミュレーターで生体認証をテストする

iOSのシミュレーターでも生体認証のテストを行うことが可能です。ただ実際の指紋や顔認証は行えないのでパスコードを求められる認証方法になります。ここで入力するパスワードは何を入力しても認証成功になります。

【Swift】LocalAuthenticationでTouch IDやFace IDでの認証機能を実装する方法!

もしうまく動作しない場合はシミュレーターアプリの上部メニュー「Features」>「FaceID」>「Enrolled」にチェックを入れてみてください。Matching Faceで認証成功、Non-matching Faceで認証失敗の挙動を確認できるぽいのですがうまく動作はしませんでした。

Androidエミュレーターで生体認証をテストする

Androidのシミュレーターでも生体認証のテストを行うことが可能です。ただこちらも実際の指紋や顔認証は行えないのでパスコードを求められる認証方法になります。Androidの場合は事前のパスコードを設定しておく必要があります。

設定アプリ>「Security & Privacy」>「Device unlock」から認証を登録できるので先に登録しておきます。ここで登録できるのはパターンの登録です。

【Flutter/Dart】local_authで生体認証機能を実装する方法!

Device unlock」がONになっている(パターンが登録済み)でアプリで動作を確認すると以下のように認証要求が無事表示されるようになります。

【Flutter/Dart】local_authで生体認証機能を実装する方法!

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index