Flutterで生体認証を実装する

この記事は、【 可茂IT塾 Advent Calendar 2023 】の18日目の記事です。

開発環境

• Flutter 3.16.4
• Dart 3.2.3
• local_auth: ^2.1.7

はじめに

この記事では、Flutterアプリケーションに生体認証（指紋認証や顔認証など）を組み込む方法について説明します。

生体認証を実装することで、セキュリティを強化したユーザー体験を提供できます。

local_authパッケージのセットアップ

1. pubspec.yaml ファイルに local_auth パッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  local_auth: ^2.1.7

2. 依存関係をインストールします。

flutter pub get

プラットフォーム固有の設定

Android

android/app/src/main/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>

iOS

Info.plistに以下の記述を追加し、プライバシーの説明を記述します。

<key>NSFaceIDUsageDescription</key>
<string>このアプリではFace IDを使用して認証を行います</string>

設定したメッセージは以下のように表示されます。

生体認証を実装する上での下準備が完了したところで、いよいよアプリ側での実装を行なっていきます。

生体認証の実装

以下がアプリ全体のコードとなってます。

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:local_auth/local_auth.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BioAuth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final LocalAuthentication auth = LocalAuthentication();
  String _authorized = '未認証';

  Future<void> _authenticate() async {
    bool authenticated = false;
    try {
      authenticated = await auth.authenticate(
        localizedReason: '生体認証でログインしてください',
        options: const AuthenticationOptions(
          stickyAuth: true,
          biometricOnly: true,
        ),
      );
    } catch (e) {
      print(e);
    }
    if (!mounted) return;

    setState(() {
      _authorized = authenticated ? '認証成功' : '認証失敗';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BioAuth Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('認証状態: $_authorized'),
            const Gap(20),
            ElevatedButton(
              onPressed: _authenticate,
              child: const Text('認証'),
            ),
          ],
        ),
      ),
    );
  }
}

上記をbuildして、認証ボタンをタップすると以下のような生体認証ダイアログが表示されます。

認証メソッド

認証周りのメソッドは以下の部分です。

 Future<void> _authenticate() async {
    bool authenticated = false;
    try {
      authenticated = await auth.authenticate(
        localizedReason: '生体認証でログインしてください',
        options: const AuthenticationOptions(
          stickyAuth: true,
          biometricOnly: true,
        ),
      );
    } catch (e) {
      print(e);
    }
    if (!mounted) return;

    setState(() {
      _authorized = authenticated ? '認証成功' : '認証失敗';
    });
  }

上記の実装において、一部コードの説明を行なっていきます。

stickyAuth: true,

stickyAuthは、trueに設定することで、システムによってアプリがバックグラウンドになってもプラグイン側が認証失敗を返さないようにすることができます。 つまり、認証時に電話や他のアプリを開いた状態から、再度認証画面に戻ってきた際に、認証を再試行されます。

biometricOnly: true,

biometricOnlyは、trueに設定することで、生体認証以外のローカル認証をしないようになります。

生体認証に成功した場合と失敗した場合は以下のように表示されます。

成功

失敗

最後に

いかがでしたでしょうか？

生体認証の実装はlocal_authのパッケージを使用することで、手軽に実装することができたと思います。

生体認証の実装を考えられている方の手助けになれば幸いです。

余談

普段よく使われている方も多いのではないかと思いますが、今回のUIの実装で使ったGapというパッケージはすごく便利ですよね。

widget同士の距離の指定の際に、Gapだとwidthやheightを指定しなくて済むのは、デベロッパーファーストでありがたいです。

参考文献

https://pub.dev/packages/local_auth (生体認証のドキュメント)

https://pub.dev/packages/gap/example (Gapのドキュメント)