React Native(Expo) 환경에서 생체 인증 사용하기 (expo-local-authentication)Using Local Biometric Authentication in React Native(Expo) Environment (expo-local-authentication)
📅
🚀
들어가기 전에 🔗
✅
휴대폰 생체 인증 🔗
휴대폰의 생체 인증은 휴대폰의 보안을 강화하는데 큰 역할을 합니다. 휴대폰의 생체 인증은 지문, 얼굴, 홍채 등을 이용하여 사용자를 인증하는 방법입니다. 이러한 생체 인증은 사용자가 휴대폰을 사용할 때 편리하게 사용할 수 있도록 도와줍니다.
expo-local-authentication을 사용하면 생체 인식 프롬프트(Android) 또는 FaceID 및 TouchID(iOS)를 사용하여 지문 또는 얼굴 스캔으로 사용자를 인증할 수 있습니다.
🚀
expo-local-authentication 설치 🔗
expo install expo-local-authentication🚀
추가 설정 🔗
✅
Expo 환경 🔗
Expo 환경에서는 루트 디렉토리의
app.json 파일에 다음과 같이 설정을 추가해줍니다.{
"expo": {
"plugins": [
[
"expo-local-authentication",
{
"faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID."
}
]
]
}
}✅
React Native CLI 환경 🔗
react-native-local-authentication↗에서 추가 설정을 확인할 수 있습니다.
안드로이드의 경우
android/app/src/main/AndroidManifest.xml 파일에 다음과 같이 설정을 추가해줍니다.<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />ios의 경우 터미널에 다음 명령어를 입력하여 설정을 추가해줍니다.
npx pod-install추가적으로
ios/Info.plist 파일에 다음과 같이 설정을 추가해줍니다.<key>NSFaceIDUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to use FaceID</string>🚀
사용하기 🔗
import * as LocalAuthentication from 'expo-local-authentication';
import React from 'react';
import { Button, Text, View } from 'react-native';
export default function App() {
const handleAuthentication = async () => {
const hasHardware = await LocalAuthentication.hasHardwareAsync();
if (!hasHardware) {
alert('생체 인증을 사용할 수 없는 기기입니다.');
return;
}
const isEnrolled = await LocalAuthentication.isEnrolledAsync();
if (!isEnrolled) {
alert('생체 인증이 등록되어 있지 않습니다.');
return;
}
const result = await LocalAuthentication.authenticateAsync({
promptMessage: '생체 인증을 사용하여 로그인하세요.',
});
if (result.success) {
alert('로그인 성공!');
} else {
alert('로그인 실패!');
}
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>생체 인증을 사용하여 로그인하세요.</Text>
<Button title="로그인" onPress={handleAuthentication} />
</View>
);
}
지문 인증(안드로이드)
중간에 지문 인식은 보안상 캡쳐가 되지 않습니다.
각각의 함수 설명을 살펴보면 다음과 같습니다.
✅
LocalAuthentication.hasHardwareAsync 🔗
장치에서 얼굴 또는 지문 스캐너를 사용할 수 있는지 여부를 결정합니다. 반환값은
Promise<boolean>입니다.✅
LocalAuthentication.isEnrolledAsync 🔗
장치에 지문 또는 얼굴이 등록되어 있는지 여부를 결정합니다. 반환값은
Promise<boolean>입니다.✅
LocalAuthentication.authenticateAsync 🔗
지문/터치ID(또는 장치에서 사용 가능한 경우 FaceID)를 통해 인증을 시도합니다. parameter로
LocalAuthenticationOptions를 받습니다.
LocalAuthenticationOptions의 쓸만한 parameter 몇 가지를 살펴보면 다음과 같습니다.- promptMessage: string TouchID 또는 FaceID 프롬프트와 함께 표시되는 메시지입니다. 사용자에게 어떤 의도로 인증을 요청하는지 알려주는 메시지이므로 작성하는 것이 좋습니다.
- cancelLabel: string TouchID 또는 FaceID 프롬프트에서 취소 버튼의 레이블입니다. 기본값은 'Cancel'입니다.
- biometricsSecurityLevel: 'strong' | 'weak'
허용할 생체 인증의 보안 등급을 설정합니다.
strong은 Android 클래스 3 생체 인증만 허용합니다. 예를 들어 지문 또는 3D 얼굴 스캔이 있습니다.weak에서는 Android 클래스 3 및 클래스 2 생체인증을 모두 허용합니다. 클래스 2 생체인식은 클래스 3보다 보안성이 떨어집니다. 예를 들어 카메라 기반 얼굴 잠금 해제가 있습니다. - disableDeviceFallback: boolean 여러 번 실패하면 시스템이 디바이스 비밀번호로 폴백합니다. 이 설정을 사용하면 이 옵션을 비활성화하고 대신 직접 폴백을 처리할 수 있습니다. 이는 특정 사용자 지정 인증 워크플로에서 바람직할 수 있습니다.
따라서 전체적인 플로우는 다음과 같습니다.
hasHardwareAsync를 사용하여 생체 인증을 사용할 수 있는지 확인합니다.isEnrolledAsync를 사용하여 생체 인증이 등록되어 있는지 확인합니다.authenticateAsync를 사용하여 생체 인증을 시도합니다.
🚀
결론 🔗
결론적으로, Expo local authentication을 사용하는 React Native의 생체 인증은 사용자 인증을 위한 안전하고 편리한 솔루션을 제공합니다. 엑스포 로컬 인증의 기능을 활용하여 개발자는 생체인식 기능을 React Native 애플리케이션에 쉽게 통합하여 보안을 강화하고 사용자 경험을 개선할 수 있습니다. 생체 인증은 비밀번호 없이도 사용자 신원을 확인할 수 있는 신뢰할 수 있는 방법을 제공하여 데이터 유출의 위험을 줄여줍니다. 간편하고 효과적인 엑스포 로컬 인증을 사용한 생체 인증은 안전한 모바일 애플리케이션을 구축하는 데 유용한 도구입니다.
✅
더 생각해 보기 🔗
- 생체 인증을 사용하여 로그인하는 대신, 생체 인증을 사용하여 데이터를 암호화하거나 복호화하는 방법은 무엇일까요?
- expo secure store과의 연관성 expo-secure-store↗
✅