[TIL] Expo로 앱개발 1 - 구글 로그인 폼 만들기

Expo에서는 expo-google-sign-in을 이용해 구글 로그인 기능을 구현할 수 있다.

 

먼저 아래 코드를 터미널에 입력하여 설치를 한다.

expo install expo-google-sign-in

 

웹 상에 이를 이용하는 manual이 여럿 있지만, 이쪽 세상은 반년만 지나도 많은 것이 바뀌기 때문에 지금은 제대로 되지 않는 것들이 많다.

 

결국 조금이라도 편하고자 guide 등을 찾아보는 것 보다는, 위 링크 즉 공식 documenation을 참고하는게 가장 좋다는 것을 다시금 느낀다.

 

다음으로는 구글 Firebase에 project을 만들어야 한다. 요금제를 주의하자. console.firebase.google.com/

 

이후 인증을 위한 Oauth 2.0 client id를 만들어야 하는데, Expo의 경우 예전에는 애플리케이션 유형을 '웹 에플리케이션'으로 설정하여 쉽게 id를 받았다. 하지만 현시점 웹 어플에서의 google authentication이 막혔으므로, 적합한 테스트를 위해서는 유형을 'android' (혹은 ios)로 설정해야 한다. 이 글에선 안드로이드를 기준으로 한다.

 

 

 

 

다음으로는 android package name과 fingerprint를 등록해야한다. 여기서 막혔는데, 좀 찾아본 결과 이를 위해서는 아직 먼 일이라 생각했던 build를 수행해줘야한다. 

expo build:android

선택할 몇가지 옵션이 있는데,

apk를 고르면 apk 파일을 만들어서 직접 파일을 주고 받아서 설치를 할 수 있으며,

app-bundle을 고르면 플레이스토어에만 쓸 수 있는 파일이 나오는 대신에 용량이 반 정도로 줄게 된다. 테스트를 해야 하므로 apk를 고르자.

 

expo의 최대 단점인 최악의 빌드 시간(무료 버전 한정)을 경험할 수 있다. 30분만에 queue가 끝나서 빌드가 되어도 빨리 된 편이라고 한다.

 

빌드가 끝나고나면 다시 터미널에서

expo fetch:android:hashes

를 입력하면 맨 위에 fingerprint가 나오게 된다.

 

성공적으로 끝나면 google-services.json을 다운받을 수 있다.

다운받은 google-services.json을 expo로 작업하던 폴더에 넣는다.

 

다른건 무시하고 firebase에 들어가 왼쪽 메뉴에서 authentication을 누른 뒤, sign-in method에 들어간다.

아래 그림처럼 로그인 제공 업체가 나오는데, 구글을 눌러서 사용 설정을 해준다.

 

 

app.json으로 가서 android안에 (package 밑에) 아래 코드를 추가한다.

 

"googleServicesFile": "./google-services.json"
"config": {
   "googleSignIn": {
      "certificateHash": "아까 구한 SHA-1 지문"
}

 

이제 원하는 곳에 아래 코드를 추가하여 firebase를 시작해준다.

 

import * as firebase from 'firebase';

// Optionally import the services that you want to use
//import "firebase/auth";
//import "firebase/database";
//import "firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id"
};

firebase.initializeApp(firebaseConfig);

 

firebase의 설정을 찾아보면 위의 값들을 찾을 수 있고, 마지막의 measurementID는 구글 애널리틱스에서 찾을 수 있다.

 

이후 원하는 구글 로그인 폼을 코딩한 후.. 테스트를 expo에서 하려했지만..

expo client에선 할 수 없다는 alert가 뜬다.

 

현재(20년 10월) 아직은 expo-google-sign-in을 테스트하려면 standalone app에서.. 즉 build를 또 해서 테스트를 해야한다. 

 

다시 찾아보니 expo client에서도 디버깅을 할 수 있는 것이 expo-google-app-auth이것과 expo-app-auth등이 있는데, expo-google-app-auth는 expo-client에서는 사용이 잘 되지만, 실제 standalone app으로 배포하면 에러가 난다는 말도 있다. 

 

여튼 한참을 기다려 build를 하고 폰으로 확인해보니 로그인이 되긴 한다...