Implementasi Autentikasi Fingerprint Pada Flutter

Ada kalanya kita perlu mengimplementasikan autentikasi berupa sidik jari (fingerprint) dalam aplikasi yang kita kembangkan. Dalam flutter implementasi sidik jari dapat dengan mudah digunakan. Tersedia plugin yang di maintain langsung oleh tim Flutter sendiri. Plugin yang kita gunakan adalah local_auth.

Untuk mulai mengimplementasikan :

• Tambah plugin local_auth dalam pubspec.yaml

dependencies:
local_auth: “^0.0.1”

• Lalu pada flutter, membuat file yang akan menampilkan scan fingerprint berupa popup :

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

class AuthorizePage extends StatefulWidget {
  @override
  _AuthorizePageState createState() =>_AuthorizePageState();
}

class _AuthorizePageState extends State<AuthorizePage> {
  final LocalAuthentication localAuth = LocalAuthentication();
  bool _canCheckBiometric = false;
  String _authorizeText = 'Not Authorized!';

  List availableBiometrics = List();

  Future _authorize() async {
    bool _isAuthorized = false;
    try {
      _isAuthorized = await localAuth.authenticateWithBiometrics(
        localizedReason: 'Please authenticate to Complete this process',
        useErrorDialogs: true,
        stickyAuth: true,
      );
    } on PlatformException catch (e) {
      print(e);
    }

    if (!mounted) return;

    setState(() {
      if (_isAuthorized) {
        _authorizeText = "Authorized Successfully!";
      } else {
        _authorizeText = "Not Authorized!";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Touch ID Auth Example')),
      body: Center(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(_authorizeText),
          ),
          RaisedButton(
            child: Text('Authorize'),
            color: Colors.red,
            onPressed: _authorize,
          )
        ],
      )),
    );
  }
}

Integrasi Android

Untuk dapat berjalan di android, kita perlu mengubah/menambah beberapa :

Tambahkan permission untuk mengakses fingerprint pada AndroidManifest.xml

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

Selanjutnya ubah file MainActivity.java atau MainActivity.kt yang berada di struktur project android dengan mengubah implementasinya dari FlutterActivity ke FlutterFragmentActivity, seperti :

import android.os.Bundle;
import io.flutter.app.FlutterFragmentActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterFragmentActivity {
 Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   GeneratedPluginRegistrant.registerWith(this);
}

Integrasi di iOS

Sementara untuk di ios diperlukan permission juga ke dalam file info.plist berupa :

NSFaceIDUsageDescription
Why is my app authenticating using face id?

maka akan menampilkan seperti ini :