728x90

Frontend : React Native/Auth 6

휴대폰 본인인증 구현

사용자가 회원가입하기 위한 정보를 입력하기 전에 앱 권한 설정과 본인 인증 확인이 필요하다. 이번 시간에는 전화번호를 입력하여 본인 인증 기능을 구현하려고 한다.기본적인 화면 UI는 아래와 같이 TextInput과 버튼이 전부이다.이를 좀 더 세부적으로 구현하기 위해, TextInput은 전화번호를 입력하기 위해 11개의 번호만 입력할 수 있도록 제한시켰고, 11개가 입력되었을 때만 버튼의 disabled에 false 값을 주었다. 버튼은 TouchableOpcity로 구현했으며 키보드를 제외한 영역을 터치했을 시 키보드가 자동으로 사라지기 위해 TouchableWithoutFeedback을 사용해서 onPress에 Keyboard.dismiss() 함수를 넣어줬다. 그러나 TouchableWithout..

앱 권한에 대한 것 / react-native-permissions

앱 권한은 사용자가 특정 화면에서 이용할 수 있는 서비스에 대한 권한을 의미한다. 앱 권한은 사용자가 앱에 정보를 입력하면서 모든 권한에 대한 허용 메세지를 띄우거나, 특정 서비스를 직접 접근했을 때 메세지를 띄우기도 한다. 필자가 보기에는 카메라/앨범/위치 추적 관련 서비스를 이용하기 직전에 권한 허용 메세지를 띄우는 것이 합리적으로 보이나 최근에 살펴본 여러 앱에서는 회원가입할 때 모든 권한에 대한 메세지를 연달아 띄우는 것도 보았다. 어느 것이 더 효율적이냐는 사용자 입장에서 굉장히 세부적인 차이로 어느게 더 편리하고 접근성이 좋은지에 따라 결정하면 된다. 앱 권한에 대한 구현을 다루기 앞서, 사용자의 대응 방식에 대해서도 생각해볼 필요가 있다. 위 패턴은 사용자가 앱 권한에 대해 허용하지 않거나,..

사용자 유입에 대한 플로우 정리

앱 권한에 대해 정리를 해볼 것이다. 최근 번아웃이 오면서 개발 공부에 대한 정리를 조금씩 미뤘었는데 다시 키(舵)를 잡아보려고 한다. 우선 사용자가 어플리케이션 내부로 들어와서 서비스를 이용하기 전에 등록해야하는 로그인/회원가입의 로직부터 정리할 필요가 있다. 필요한 내용을 다음과 같이 리스트업을 해보았다. 소셜 로그인 방식(Google/Apple) 유저 정보 처리 토큰 처리(Local Storage 저장) SignIn/SignOut 회원가입시 필요한 로직 휴대폰 인증 구현 필요한 정보 정리(이메일, 이름, 지역, 나이 ~ ) 앱 권한 1번은 처음 공부했을 때와는 달리 대략적은 틀과 구현 방법에 대해서는 알고 있기 때문에 큰 걱정은 없다. 가장 먼저 소셜 로그인을 통해 받아온 유저정보/토큰 중에서 필요..

애플 소셜 로그인(1) / @invertase/react-native-apple-authentication

이번에는 애플 소셜 로그인 기능에 대해 구현해보려고 한다. 2020년 04월 Apple 신규 가이드라인에 따르면, 소셜 로그인 서비스를 사용하는 앱은 필수적으로 Apple 로그인 역시 제공해야한다고 한다. 그렇기 때문에 기존에 구현했던 구글에 애플 버튼도 추가하여 로그인 서비스를 구현해야 하고, 추가적으로는 이를 백단에 어떤 분기점을 준 상태로 넘겨줘야 하는지도 고민해봐야할 것 같다. (애플 개발자 계정(Apple Developer)에서 내 계정에 'Sign In With Apple' 기능을 추가하여 Xcode 상에 적용하는 과정은 생략하겠다.) Apple Social Login 애플 로그인은 iOS 디바이스에만 구현이 될 것이며, 의존성 라이브러리는 다음을 사용할 계획이다. (https://github..

구글 소셜 로그인(2) / @react-native-google-signin/google-signin

(1)글에서 언급했던 GoogleService-Info.plist 없이 시도한 것의 시작점은 Firebase 를 쓰면 안되기 때문에 당연히 GoogleService-Info.plist 없이 구현하는 방식으로 삽질을 했다. 우연히 Google Cloud Platform 을 보다가 아래 사진처럼 PLIST 다운로드를 우연히 발견했다.. 이걸 발견하지 못해서 몇 주간 구글 로그인 구현이 미뤄진게 말이 되나ㅠㅡㅠ.. 허무하다. 어찌됐건 다운받은 PLIST를 Xcode에 적용하고 URL Type을 재수정하였다. 결국 iosClientId와 webClientId 를 모두 세팅해주고 webClientId를 쓰기 때문에 당연히 offlineAccess도 true값을 넣어주었다. 버튼이 정상적으로 작동하였고, 로그인이 ..

구글 소셜 로그인(1) / @react-native-google-signin/google-signin

애증의 구글 로그인 구현.. 나의 끈기를 테스트하는지 무한한 에러 덕분에 git commit 되돌리는 연습만 엄청 한 것 같다.. Swift로 구현할 때는 설치와 UI 구현은 굉장히 쉬웠고 되려 받아온 정보를 Alamofire(Restful API Library)로 날리기 위해서 API 연습에 시간을 들였었는데 React Native 에서는 설치조차 다소 까다로운듯 하다. 오늘은 반드시 구현할 각오로 시작해본다. 순서는 우선 iOS pod file 적용 후, GoogleSignIn Button 을 화면에 출력해본다. 여태 어려움을 겪던 부분은 GoogleService-info.plist 의 적용에 대한 것인데 RN 오픈 채팅방에 문의해본 결과 필수로 적용해야한다고 해서 이 부분도 적용을 한 후에 하나씩 ..

728x90