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용으로 변경해야 하기 때문에, 이 부분은 다음 포스팅에 작성할 예정입니다.작은 변화를 빨리 눈치채면 큰 변화에 쉽게 적응할 수 있다.