동도리 개발 로그

플러터(Flutter) - 지문인식 테스트 본문

개발/Flutter

플러터(Flutter) - 지문인식 테스트

동돌이 2022. 1. 14. 14:12
반응형

플러터 앱에서 현재 핸드폰에 내장되어있는 지문/ faceId를 사용하기 위해 찾아보던 중 local_auth 패키지가 지원해준다는 것을 알고 테스트 해보았다. 

 

우선 local_auth 패키지 주소 는 아래 링크에서 확인할 수 있다.

 

local_auth | Flutter Package

Flutter plugin for Android and iOS devices to allow local authentication via fingerprint, touch ID, face ID, passcode, pin, or pattern.

pub.dev

 

Flutter에서 사용하기 

 pubspec.yaml 에 아래와 같이 local_auth 를 추가 (작성일 최신 버전 v1.1.10)

pubspec.yaml

 

 

중요한것!

<<android/.../MainActivity.java는

import android.os.Bundle;
import io.flutter.app.FlutterFragmentActivity;
import io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin;
import io.flutter.plugins.localauth.LocalAuthPlugin;

public class MainActivity extends FlutterFragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FlutterAndroidLifecyclePlugin.registerWith(
                registrarFor(
                        "io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin"));
        LocalAuthPlugin.registerWith(registrarFor("io.flutter.plugins.localauth.LocalAuthPlugin"));
    }
}

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 안에

    <uses-permission android:name="android.permission.USE_FINGERPRINT"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.USE_BIOMETRIC"/>

를 추가 해줘야 한다. 

 

추가 하지 않고 빌드를 하면 오류가 발생한다.  >>

 

 

위 링크에서 example을 가져와서 내 환경에 복사하였다.

 

local_auth 도큐먼트에 나와있는 코드 일부이다.

StatefulWidget을 상속 받아서 작성되어있다.

 

해당 example을 그대로 사용하여도 잘 동작 하지만 

나는 GetX를 이용하여 상태관리를 할 것이고, 비지니스로직은 controller 파일로 따로 관리하고싶어서 변경작업을 하였다. 

 

main.dart

위와 같이 변경하였다. 

 

main()에서 MyApp()을 실행하는게 아닌 App()을 실행하여 똑같은 결과지만 GetX를 이용하고, 비지니스로직이 분리된 코드로 만들었다.

body의 변경사항을 보자면 컨트롤러에 있는 controller.변수명.value를 비교하거나,

Obx(() =>) 를 이용하여 보여주게 되어있는데 이후에 설명하도록 하겠다.

 

그리고 main()에서

LocalAuthentication auth = LocalAuthentication();
await Get.put<LocalAuthentication>(auth);

이부분은 local_auth를 앱실행 전 받아와서 Get이 관리 하는 영역에 넣어주기위함이다. 

 

어느 곳에서나

 LocalAuthentication auth = Get.find();

를 이용하여 Get에 있는 LocalAuthenication 클래스를 사용할 수 있다.

 

 

main.controller.dart

final로 선언된 데이터들 뒤에 .obs가 붙어있는데 GetX를 이용하여  state 가 변경되는 것을 관리해주기위해서 붙여준다. 

기존에 state를 변경하기위해 setState(()=>) 사용했지만 그런것 없이 변수.value를 바로 변경해주면 반영된다. (꿀)

 

* onInit() 에서의 supportState.value를 변경하는 부분은 적용이안됨...ㅠㅠ

 

결과물은 같지만 상태관리가 다른 지문인식 예제 프로그램이 만들어진다. 

반응형