Flutter에서 생체 인증 구현

생체 인증을 통해 앱 사용자의 생물학적 특성을 기반으로 앱 사용자를 확인할 수 있습니다. 이는 사용자의 지문 또는 얼굴이 전화기의 지문/얼굴 ID와 일치하는지 확인하여 수행할 수 있습니다. 이 인증 방법은 최근 특히 높은 수준의 보안이 필요한 핀테크 앱에서 인기를 얻었습니다. 그들은 그것을 사용하여 사용자가 실제로 그들이 말하는 사람인지 확인합니다. 지문과 얼굴의 고유성으로 인해 생체 인증은 사용자의 신원을 확인하는 가장 안전한 방법 중 하나입니다.
로그인 화면, 가입 화면, 홈페이지의 3개 화면으로 구성된 간단한 프로젝트를 생성합니다.
프로젝트의 전체 코드를 사용할 수 있습니다here.
인증에는 firebase을, 일부 애니메이션에는 Lottie package을 사용하여 앱을 멋지게 꾸밀 것입니다. 그런 다음 이 패키지를 프로젝트 폴더의 루트에 있는 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  lottie:

이제 생체 인식 인증이라는 주요 논의 주제로 넘어갑니다. 이를 위해 로그인 정보를 안전하게 저장할 수 있는 flutter_secure_storage 패키지를 사용해야 합니다. 우리의 경우에는 이메일과 비밀번호여야 합니다. 이 패키지는 데이터 보안을 보장하는 AES 암호화 표준을 사용합니다.
다음은 local_auth 패키지입니다. 우리는 이것을 사용하여 사용자를 위한 로컬 장치 인증 메커니즘에 액세스합니다. Android에서는 지문 생체 인증 방법이고 IOS에서는 터치 코드, Face ID 또는 잠금 코드 인증 메커니즘입니다. 그런 다음 이를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  local_auth:
  flutter_secure_storage:

local_auth 패키지가 IOS에서 작동하려면 앱에서 Face ID를 사용할 수 있도록 사용자 기본 권한을 추가해야 합니다. 이것은 [project]/ios/Runner/info.plist에 있는 info.plist 파일에 추가되어야 합니다.

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

또한 패키지가 Android에서 작동하려면 [project]/android/app/main/java/MainActivity.java에 있는 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"));
    }
}

또한 [project]/android/app/src/main/AndroidManifest.xml에 있는 AndroidManifest.xml 파일에 USE_FINGERPRINT 및 USE_BIOMETRIC 권한을 추가해야 합니다.

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

또한 flutter_secure_storage가 작동하도록 하려면 [project]/android/app/build.gradle의 minSdkVersion을 >= 18로 설정해야 합니다.

android {
    ...

    defaultConfig {
        ...
        minSdkVersion 18
        ...
    }

}

먼저 가입 화면에서 Firebase 인증을 사용하여 앱에서 새 사용자를 생성합니다.

class AuthService{
 signUp(String email, String password, context) async {
    try {
      await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password);
    } on FirebaseAuthException catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(e.message.toString())));
    }
  }
}

다음으로 생체 인식 인증 논리의 대부분을 포함할 로그인 페이지를 만듭니다. 페이지 전체에서 사용할 localauth 및 storage 변수를 생성합니다.

final LocalAuthentication localAuth = LocalAuthentication();
final storage = const FlutterSecureStorage();

이제 장치가 생체 인식 인증을 지원하는지 확인해야 합니다.

final canCheck = await localAuth.canCheckBiometrics;
final deviceIsSupported = await localAuth.isDeviceSupported();

그런 다음 장치에서 사용 가능한 생체 인식을 얻습니다.

List<BiometricType> availableBiometrics =
    await auth.getAvailableBiometrics();

if (Platform.isIOS) {
    if (availableBiometrics.contains(BiometricType.face)) {
        // Face ID.
    } else if (availableBiometrics.contains(BiometricType.fingerprint)) {
        // Touch ID.
    }
}

사용자가 처음 로그인할 때 생체 인식 인증을 사용하도록 선택했는지 여부를 확인하는 부울 플래그bool _useTouchId = false;를 사용하고, 그렇다면 저장을 위해 사용자의 이메일 및 비밀번호 값을 flutter_secure_storage에 기록하고 생체 인식을 사용하는 경우 나중에 검색합니다. 입증.

  final authenticated = await localAuth.authenticate(
                localizedReason: 'Enable Face ID to sign in more easily',
                useErrorDialogs: true,
                stickyAuth: true);

            if (authenticated) {
              storage.write(key: 'email', value: email);
              storage.write(key: 'password', value: password);
              storage.write(key: 'usingBiometric', value: 'true');
            }

후속 로그인에서 생체 인증을 사용하려는 경우 인증을 위해 flutter_secure_storage에서 이메일 및 비밀번호 값을 읽어야 합니다.

 final authenticated = await localAuth.authenticate(
                localizedReason: 'Enable Face ID to sign in more easily');

            if (authenticated) {
              String? userStoredEmail = await storage.read(
                key: 'email',
              );
              String? userStoredPassword = await storage.read(
                key: 'password',
              );
              AuthService()
                  .signIn(userStoredEmail!, userStoredPassword!, context);
            }

그리고 그게 다야 !!! 남은 일은 로그아웃 버튼이 있는 간단한 홈 화면을 만드는 것입니다.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

import 'loginpage.dart';

class HomePage extends StatelessWidget {
   HomePage({Key? key}) : super(key: key);
final _auth=FirebaseAuth.instance;
Color greenColor = const Color(0xFF00AF19);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  Center(
        child: Text('Home screen',style: TextStyle(color: greenColor,fontWeight: FontWeight.w700,fontSize: 35),),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: greenColor,
        onPressed: ()async {
          await _auth.signOut();
          Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => LoginPage()));
        },
        child:const  Icon(Icons.logout,),
      ),
    );
  }
}

그리고 짜잔!!! 우리 앱에는 안정적이고 안전한 생체 인증 시스템이 있습니다.
다음은 프로젝트source code이며 최종 결과는 다음과 같습니다.
끝까지 읽어주셔서 감사합니다. 앞으로 더 많은 플러터 팁을 기대해 주세요.