애증의 구글 로그인 구현..
나의 끈기를 테스트하는지 무한한 에러 덕분에 git commit 되돌리는 연습만 엄청 한 것 같다..
Swift로 구현할 때는 설치와 UI 구현은 굉장히 쉬웠고 되려 받아온 정보를 Alamofire(Restful API Library)로 날리기 위해서 API 연습에 시간을 들였었는데 React Native 에서는 설치조차 다소 까다로운듯 하다.
오늘은 반드시 구현할 각오로 시작해본다. 순서는 우선 iOS pod file 적용 후, GoogleSignIn Button 을 화면에 출력해본다. 여태 어려움을 겪던 부분은 GoogleService-info.plist 의 적용에 대한 것인데 RN 오픈 채팅방에 문의해본 결과 필수로 적용해야한다고 해서 이 부분도 적용을 한 후에 하나씩 천천히 구현해본다..plz
일단 현재는 loginView에 Title과 SignIn(회원가입뷰로 이동) 버튼과 Log In(홈뷰로 이동)만 띄워둔 상태이다.
블로그의 장점을 여기서 한 가지 발견했다. 단계마다 이미지와 정리글을 남기니까 슈슉 공부를 다 하고 나서 돌이켜보면 정리가 좀 안됐는데 비교적 정리가 되는 듯 하다.
자 ! 문서부터 살펴보자
요 녀석과 사투를 벌일 것이다. openbase 라는 사이트는 음원 플레이어를 구현해보고 싶어서 다양한 라이브러리 중에서 어느 것을 쓸지 고민하다가 가장 많이 쓰이는 라이브러리들을 비교해주길래 종종 들어가서 보는 사이트이다(참고!)
1. 라이브러리 설치 : yarn add @react-native-google-signin/google-signin
2. Pod Install
pod install 이 완료가 되었으면 그 다음 차례는 ClientID 적용을 위한 GoogleService-Info.plist 를 Xcode 파일 내부에 넣어줄 차례다.
3. GoogleService-Info.plist 적용 여부 확인
이 부분이 까다로운 이유는 해당 plist 파일은 Firebse를 사용할 때에만 활용을 할 수 있다는 것이다. 즉, Firebase 를 사용할 때 웹 상에서 iOS앱 생성을 해야하는데 생성하기 직전 프로세스에서 plist 파일을 제공해준다. 다른 경로는 아직 찾지 못했다.
그래서 이번에는 GoogleService-Info.plist 없이 URL Type 만 지정된 상태에서 GoogleSignIn 테스트를 해보려고 한다.
대차게 실패.
failed to determine clientID-GoogleService-Info.plist 에러..오랜만..
다시 문서로 돌아가보자..
이걸 이미 보고 숙지한 상태에서 적용을 한건데 왜 안될까.. 삽질 시작.
친구들 발견..! 왜 이 포럼을 이제 발견했을까..
vonovak : GoogleService-Info.plist 를 적용하지 않는다면 iosClientId를 활용해야한다.
최종적으로, webClientId 를 지우면서 offlineAccess : false로 지정해주었고, iosClinetId와 Xcode 상에서의 URL Types 까지 지정해준 다면 GoogleService-Info.plist 없이 구글 로그인 버튼이 작동하는 것을 확인할 수 있다.
추후 기능구현
- 구글 서버 연동 후, 토큰 및 유저 정보 받아오기
'Frontend > Auth' 카테고리의 다른 글
| 휴대폰 본인인증 구현 (0) | 2022.01.20 |
|---|---|
| 앱 권한에 대한 것 / 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 |