사용자가 회원가입하기 위한 정보를 입력하기 전에 앱 권한 설정과 본인 인증 확인이 필요하다. 이번 시간에는 전화번호를 입력하여 본인 인증 기능을 구현하려고 한다.
기본적인 화면 UI는 아래와 같이 TextInput과 버튼이 전부이다.
이를 좀 더 세부적으로 구현하기 위해, TextInput은 전화번호를 입력하기 위해 11개의 번호만 입력할 수 있도록 제한시켰고, 11개가 입력되었을 때만 버튼의 disabled에 false 값을 주었다.
버튼은 TouchableOpcity로 구현했으며 키보드를 제외한 영역을 터치했을 시 키보드가 자동으로 사라지기 위해 TouchableWithoutFeedback을 사용해서 onPress에 Keyboard.dismiss() 함수를 넣어줬다. 그러나 TouchableWithoutFeedback를 사용했을 때 버튼의 onPress가 작동하지 않는 것을 확인하여 다시 삭제했다. 키보드가 자동으로 내려가는 것을 대체할 코드가 필요하다.
전화번호 본인 인증을 어떻게 구현하는지 감이 오질 않아 간단한 서칭을 진행했다. 대부분 Firebase를 통해 구현하는 것으로 강좌들과 자료들이 나왔는데 백엔드 친구에게 물어본 결과 백에서 파베 안써도 충분히 구현가능하다고 한다. 하단 사진은 구현 로직에 대해 잘 정리가 되어있어 첨부한다.
정리하자면,
- 프론트에서 전화번호를 백으로 .post 전송
- 백에서 작업 처리 후, 프론트는 난수 .get
- 받은 난수와 사용자가 입력할 난수(인증번호) 비교.
- 비교 결과, 동일하다면 본인인증 확인하고 인증 여부를 백으로 .post 전송
전화번호 본인인증 구현에 대한 정리는 여기까지 하고 백엔드 친구와 작업이 이루어진 다음에 마저 추가할 계획이다.
휴대폰 인증 로직 구현하기
이번 로그에서는 허위유저의 가입을 방지하기 위해 회원가입을 위한 절차 중 SMS를 이용한 휴대폰 인증 기능을 구현한 것에 대해 다뤄보고자 한다. 휴대폰 인증 개요 부동산 앱의 특성상 개인정
velog.io
//참고 블로그
+ 매일 같이 조회수가 나오는 게시글인데,,,, 업무에 허덕이느라 구현, 정리를 못하고 있어요,,ㅠㅠ
'Frontend > Auth' 카테고리의 다른 글
| 앱 권한에 대한 것 / react-native-permissions (3) | 2022.01.19 |
|---|---|
| 사용자 유입에 대한 플로우 정리 (0) | 2022.01.19 |
| 애플 소셜 로그인(1) / @invertase/react-native-apple-authentication (0) | 2022.01.19 |
| 구글 소셜 로그인(2) / @react-native-google-signin/google-signin (0) | 2021.12.24 |
| 구글 소셜 로그인(1) / @react-native-google-signin/google-signin (2) | 2021.12.24 |