728x90
React Native의 생체인증을 사용하기 위해서 라이브러리를 설치하였다.
사용한 라이브러리는 react-native-biometrics다.
Face Id 인증 구현 예시
import ReactNativeBiometrics, {BiometryTypes} from 'react-native-biometrics';
const onClickAuth = useCallback(async () => {
const rnBiometrics = new ReactNativeBiometrics({
allowDeviceCredentials: true,
});
const {biometryType} = await rnBiometrics.isSensorAvailable();
console.log('biometryType', biometryType);
if (biometryType === BiometryTypes.FaceID) {
rnBiometrics
.simplePrompt({promptMessage: 'Confirm FaceID'})
.then(resultObject => {
const {success} = resultObject;
if (success) {
console.log('successful biometrics provided');
} else {
console.log('user cancelled biometric prompt');
}
})
.catch(() => {
console.log('biometrics failed');
});
}
}, []);
에시로 아이폰의 face id 기능을 테스트해봤다.
로직의 순서로는
1. 기기가 face id를 지원하는지 확인
2. face id를 사용하기 위한 prompt를 띄운다.
3. 사용자가 face id 인증한 결과에 따라서 다른 로직을 실행한다.
처음에는 react-native-keychain을 사용하여 해당 기능을 구현하고자 하였는데, 생각처럼 잘 작동하지 않아 다른 라이브러리를 사용하여 생체 인증을 구현하기로 하였다.
728x90
'React Native' 카테고리의 다른 글
React Native 앱 Drawer 구현하기 (react-native-gesture-handler) (0) | 2023.05.26 |
---|---|
ignite - React Native의 boilerplate (0) | 2023.05.20 |
React Native 에서 Redux 디버깅하기 (redux-flipper) (0) | 2023.04.19 |
React Navigation 중첩 라우팅 구현하기 (0) | 2023.04.16 |
React Native에서 Keyframe 사용하기 (react-native-reanimated) (0) | 2023.04.01 |