레이블이 touchid인 게시물을 표시합니다. 모든 게시물 표시
레이블이 touchid인 게시물을 표시합니다. 모든 게시물 표시

20210427

react native 생체인식

http://www.npmjs.com/package/react-native-touch-id


Install

npm i --save react-native-touch-id
npm i --save react-native-touch-id

or
yarn add react-native-touch-idyarn add react-native-touch-id

Android

react-native version < 0.60 이면
react-native link react-native-touch-id
react-native link react-native-touch-id

으로 link 해준다.

AndroidManifest.xml


AndroidManifest.xml에
<uses-permission android:name="android.permission.USE_FINGERPRINT" />
추가 -> 핸드폰 지문인식 권한 추가
<uses-permission android:name="android.permission.USE_FINGERPRINT" />

코드

import TouchID from 'react-native-touch-id'; 


const optionalConfigObject = 
{   title'Authentication Required'// 타이틀   
    imageColor: '#e00606'// 지문인식 기본 컬러   
    imageErrorColor: '#ff0000'// 지문인식 실패 컬러   
    sensorDescription: 'Touch sensor'// 터치센서 
    description Text 변경   sensorErrorDescription: 'Failed'// 터치센서 Fail Text 변경   
    cancelText: 'Cancel'// Android // 취소버튼 Text 변경   
    fallbackLabel: 'Show Passcode'// ios ( 비어있으면 레이블이 숨겨짐 )   
    unifiedErrors: false// 통합 오류 메시지 사용 ( 기본값 false)   
    passcodeFallback: false  // ios-faceId / touch 사용할 수 없는 경우 기기비밀번호 사용여부 
    } 
    
    TouchID.authenticate('description', optionalConfigObject)
    .then(success => {     
    console.log("지문인식 성공"); // 지문인식 성공했을 때 코드를 넣으면 됨   
    })   	
    .catch(error => {     	
    console.log("지문인식 실패"); // 실패했을 때 코드를 넣으면 됨.   
    });

isSupported ()

import TouchID from 'react-native-touch-id'; 

const optionalConfigObject = {  
	unifiedErrorsfalse  // 통합 오류 메시지 사용 ( 기본값 false )
	passcodeFallback: false // true가 전달되면 기기가 touch id / face id 등에 등록되지 않은
    경우 isSupported에서 오류를 반환하도록 허용합니다. 
    그렇지 않으면 사용자가 등록되지 않은 경우에도 지원되는 방법 만 알려줍니다.(기본값 false) 
    } 
    
    
TouchID.isSupported(optionalConfigObject).then(biometryType => {
    // Success code 
    if (biometryType === 'FaceID'){         
    	console.log('faceId 지원')     
    } 
    else {     
    	console.log('TouchID 지원.');     
    }  
    })
    .catch(error => {
    	// Failure code
    	console.log(error); // 실패했을 때 에러 로그 찍어보기  
    });

Articles