react-native 프로젝트에서 expo를 이용한 GoogleSignIn 이용기

Huy, Tae Young Kim

Published in

Cross-Platform Korea

7 min readJul 14, 2019

이 페이지는 dooboolab/hackatalk-mobile 프로젝트에 GoogleSignIn을 셋팅하는 방법과 테스트를 알려드리기 위한 목적입니다.
이 글은 2019년 7월 14일에 작성 되었습니다.

1. Prerequisite (미리 필요한 것들) 👊

아래 순서대로 Setting을 하시면 됩니다.

Project Download (데모를 해보실 프로젝트를 다운로드 받습니다)

$ git clone https://github.com/dooboolab/hackatalk-mobile.git

SignIn Firebase console (Google account가 필요합니다)
Create Firebase project (프로젝트 이름과 애널리틱스 위치를 설정합니다)

Click the firebase project (생성된 프로젝트를 클릭합니다)
Add applications (앱 추가)

Add ios application

Set ios bundle identifier (app.json에 사용하게될 id 입니다, 굳이 아래 예시로 안해도 됩니다)

Download GoogleService-Info.plist to hackatalk project root path (해당 파일을 다운로드 받으시고, hackatalk 프로젝트 최상위 패스에 추가 합니다)

Skip other steps (다른 스탭들은 스킵 하셔도 됩니다)
Add android application (안드로이드 어플리케이션을 추가합니다)

Set android package id (app.json에 사용하게될 android package id 원하시는 데로 셋팅하시면 됩니다)

Download google-services.json to hackatalk project root path (해당 파일을 다운로드 받으시고, hackatalk 프로젝트 최상위 패스에 추가 합니다)

Turn On Google Authentication (인증 방법 추가)

2. Google SignIn 프로젝트 적용 💃

hackatalk 프로젝트에 셋팅 해야 하는 것들에 대해 알려드립니다.

Set app.json (app.json 셋팅)

expo.android.package 의 경우 1번 단계에서 생성한 package name을 넣어주셔야 합니다.
expo.ios.bundleIdentifier 의 경우 1번 단계에서 생성한 bundle identifier를 넣어주셔야 합니다.

Set config.ts (config.ts 셋팅)
npm install -g expo-cli
npm run android
npm run ios

android, ios 를 실행하여 확인해보실 수 있습니다.

하지만 google signIn의 경우 눌러보시면 alert 가 뜨는걸 확인 하실 수 있습니다. 이는 expo가 아닌 standalone 모드에서만 작동 가능하여 나오는 메시지 입니다. 현제 expo-google-sign-in 을 사용 중인데, expo 버전이 올라가면서 정책이 변경되었다고 합니다.

Standalone 모드를 사용 하는 방법은 다음 단계에서 확인하실 수 있습니다.

3. Standalone 모드를 이용하여 Google SignIn 확인하기 🤔

expo를 통해 android, ios 빌드가 가능하며, 앱을 쉐어해 볼 수도 있습니다.

Create expo account link (expo account 생성하기)
expo signin (expo-cli 가 설치 되어 있어야 합니다)
Success Signed expo
expo fetch:android:hashes (on hackatalk root path)

for example:
Google Certificate Fingerprint:     sd:fs:df:sd:fs:df
Google Certificate Hash (SHA-1):    sdfsdfsdfsdf
Google Certificate Hash (SHA-256):  sdfsdfsdfsdfasdasdasd

SHA-1 or SHA-256 을 1번 Prerequsite 단계에서 생성한 Firebase Android Project SHA 인증서 지문에 추가 합니다
Set expo.android.config.googleSignIn.certificateHash in app.json file (app.json 파일에 추가한 SHA 인증서 지문 을 셋팅해야 합니다)

이제 🚀statndalone 모드를 이용할 준비가 모두 완료 되었습니다!

아래 두 명령어를 실행하면 이제 Download 가 가능한 링크가 생성 됩니다.

expo build:android
expo build:ios

https://expo.io/artifacts/:uuid 형태로 생성된 apk 혹은 ipa 를 다운로드 받아 모바일에서 실행해보시면 됩니다.

4. 끝🔚

실행하여 확인해보시면 됩니다. GoogleSignIn 의 경우 테스트를 하기 위해서 standalone application을 매번 build 하여 디버깅 해야 하는 어려움이 있다는걸 알게되었습니다. 테스트 및 디버깅시에는 WebView를 통해 로그인 해보는 방법을 시도해 봐야 할 것 같습니다.

android 로만 제가 시도를 해보아서 ios 의 경우에는 동작이 잘 안될 수도 있습니다. 혹시나 시도 해보시고, 잘못된게 있으면 피드백 부탁드립니다.

expo build:android 의 경우 5~10분 가량 소요되며, 한번 디버깅시 꽤 오랜 시간이 소요 되는점 알고 계시길 바랍니다.

긴글 읽어주셔서 감사합니다.