Flutterで生体認証を実装する

image

この記事は、【 可茂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
  1. 依存関係をインストールします。
flutter pub get

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

Android

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

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

図1

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

生体認証の実装

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

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});

  
  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});

  
  _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 ? '認証成功' : '認証失敗';
    });
  }

  
  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して、認証ボタンをタップすると以下のような生体認証ダイアログが表示されます。

図2

認証メソッド

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

 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に設定することで、生体認証以外のローカル認証をしないようになります。

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

成功

図3

失敗

図4

最後に

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

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

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

余談

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

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

参考文献

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

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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (96)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)VSCode (2)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)vscode (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More