ReactNative expo expo-goo gle-app-auth Google 소셜 로그인 개발

 

최근에 쉬운 어플을 React National expo로 개발했습니다.
심사가 최종 완료되고 관련 경험을 기록하려고 합니다.
이번 공유는 구글의 소셜 로그인을 만든 내용입니다.

1. expo 설치 및 프로젝트 작성

 

 

실행 시 웹사이트가 표시되는 “RunoniOS simulator” 를 클릭하면 앱 에뮬레이터가 실행된다.
2. expo 설치 및 프로젝트 만들기 expo-google-app-auth 사용 https:/docs.expo.devversionslatests dkgoogle-sign-in 사이트에서 지원과 다른 정보를 찾아 기록한 내용입니다.

 

 

정상적으로 실행되었다면 IOS, Android 클라이언트 ID가 필요하다.
3. 클라이언트 ID 발행 https:/docs.expo.devversionslatests dkgoogle 사이트를 참고해서 진행해 보자.

차근차근 추진하겠습니다.
먼저 https://console.cloud.google.com 구글 콘솔에 연결합니다.

왼쪽 상단을 누른 후 새 프로젝트를 누릅니다.
프로젝트명은 expo생성시 만든 rn-google-sns명으로 동일하게 만들었습니다.

 

간단하게 프로젝트가 정상적으로 생성되었습니다.

 

상단의 프로젝트를 클릭하여 방금 생성된 rn-google-sns를 확인 할 수 있습니다.
Oauth 동의를 위해 좌측 상단에 햄버거 매뉴얼을 클릭한 후 API와 서비스 -> OAuth 동의 화면을 선택합니다.

 

필수 항목을 작성한다.

저장 계속 버튼 클릭.

테스트 유저 부분도 저장하고, 손으로부터 계속을 클릭.

O Auth 동의 화면이 최종 완료되었습니다.

동의화면이 생성된 후 사용자 인증정보에서 OAuth 클라이언트 ID를 생성합니다.

어플리케이션 유형에 A ndroid와 IOS를 등록합니다.
일단 IOS 먼저 가보자

번들 ID는 host.exp.ex ponent로 꼭 등록하셔야 정상적으로 expo로 실행됩니다.
최초로 나의 앱 번들 아이디를 등록하여 오류가 발생하였습니다.
해결하기 위해 오랜 시간을 보냈습니다.

아이디가생성되었습니다.

안드로이드도 구독을 해볼게요

SHA-1 인증서의 디지털 지문 값을 등록하기 위해서 opensslrand-base 6432 |opensslsha1-c 실행 후 정보를 입력해 주십시오.

 

안드로이드와 IOS 둘 다 OAuth 정보가 등록되었습니다그러면 프로그램 소스에 생성된 ID 정보를 생성하고 테스트를 진행하겠습니다.
4. 소스작업 발급받은 코드를 config 설정에서 작성합니다.
위 소스는 expo 기본코드에 로그인에 관한 내용만 추가되었습니다.
5. EXPO를 실행하는 아이패드와 안드로이드 폰에서 Expo를 실행해 봅니다.
expo를 실행하여 iPad 단말기와 안드로이드 폰에서는 정상적으로 작동하고 있습니다.

테스트 중 에뮬레이터 문제 발생

하지만 IOS 에뮬레이터에서는 오류가 발생하고 있습니다.
아직 해결은 되지 않았습니다.
해결하신 분 계시면 댓글 남겨주세요.

*중요 expo에서는 실행은 잘되지만 standalone 환경에서는 정상적으로 할 수 없는 문제가 되었습니다.
최종 배포 시에는 standalone용으로 변경해야 하기 때문에, 이 부분은 다음 포스팅에 작성할 예정입니다.
작은 변화를 빨리 눈치채면 큰 변화에 쉽게 적응할 수 있다.