Firebase Auth 와 함께 구글/페이스북 로그인

Google Firebase 에서는 Auth SDK 를 제공해주고 있습니다. 페이스북 로그인과 Firebase Auth 를 연동해보도록 하겠습니다. 공식문서인 Authenticate Using Facebook Login on Android를 참고했습니다.

적용 시나리오는 다음과 같습니다.

  1. 앱에 구글/페이스북 로그인 적용
  2. 구글/페이스북 로그인이 되면, 관련 Credential 정보를 Firebase Auth 로 넘겨서 인증처리

본 문서의 전체 소스코드는 https://github.com/askdjango/AndroidFirebaseSample 에서 확인하실 수 있습니다.

자. 이제 시작해볼까요? ;)

안드로이드 프로젝트 생성

Android Studio 를 통해 새로운 프로젝트를 생성해주세요. 페이스북 로그인 지원을 위해 Minimum SDK 는 API 15 이상으로 해주세요. 생성한 프로젝트의 팩키지명을 메모해두세요.

Firebase Console 에서 새 프로젝트 생성하기

먼저 다음 명령으로 안드로이드 디버그 keystore에 대한 sha1 fingerprint (인증서 지문) 와 키해시를 확인해주세요.

debug.keystore fingerprint

sha1 FingerPrint 는 1A:5B:24:BD:EF:FE:6D:23:A5:DA:62:6A:2C:95:78:2D:77:63:E7:F7 과 같은 형식을 가지고 있으며, 키해시는 Glskve/+bSOl2mJqLJV4LXdj5/c= 와 같은 값을 가지고 있습니다. 각자 이 값이 다릅니다. 제 값을 카피해서 쓰지마세요. 로그인이 제대로 수행되지 않을 것입니다.

윈도우에서는 위 명령을 수행하기 위해 openssl 프로그램을 따로 설치하셔야 합니다. 혹은 제가 직접 만든 파이썬 스크립트를 통해서도 확인이 가능합니다.

이제 https://console.firebase.google.com/ 에서 “새 프로젝트 만들기" 를 수행해주세요. 프로젝트 이름과 국가/지역을 요구합니다. 저는 “AndroidFirebaseSample” 과 “대한민국 (South Korea)"을 입력했습니다.

AndroidFirebaseSample 프로젝트에 대한 Firebase Console 에서 Overview 의 “Add Firebse to your Android app” 메뉴를 선택해주세요. 다음 창에서 Package Name 과 Debug singing certificate SHA-1 을 요구합니다. Package Name 에는 위에서 생성한 안드로이드 프로젝트의 팩키지명을 써주세요. 저는 kr.festi.androidfirebasesample 를 입력했습니다. 그리고 Debug singing certificate SHA-1 에는 위 FingerPrint 값을 적용해주세요. 저는 1A:5B:24:BD:EF:FE:6D:23:A5:DA:62:6A:2C:95:78:2D:77:63:E7:F7 을 입력했습니다. 이제 Add App 을 클릭하시면, 화면이 전환되며 google-services.json 파일이 다운로드됩니다. 이 파일은 안드로이드 프로젝트 내 app 디렉토리로 복사해주세요.

안드로이드 프로젝트에 구글서비스 관련 플러그인을 추가해봅시다. build.gradle 과 app/build.gradle 파일을 링크에서 같이 수정해주세요.

구글 로그인 통합하기

Authenticate Using Google Sign-In on Android 문서와 Integrating Google Sign-in into Your Android App 문서를 참고했습니다.

Firebase Console 의 인증 (Authentication) 섹션 로그인 방법 (SIGN-IN METHOD) 탭에서 Google 로그인을 활성화 (Enabled) 시켜주세요.

관련 코드는 다음 변경내역에서 확인하실 수 있습니다.

다음 순서로 이뤄집니다.

  1. Firebase Auth 라이브러리 및 구글 플레이서비스 Auth 라이브러리 추가 (소스)
  2. MainActivity 의 onCreate 에서 Firebase Auth 인증여부를 검사 (소스)
  3. Android Studio 의 Empty Activity 템플릿으로 SignInActivity 추가
  4. MainActivity 에서 로그인이 필요할 때, SignInActivity 를 띄웁니다. (소스)
  5. SignInActivity 의 레이아웃에 구글 로그인 버튼을 배치합니다. (소스)
  6. SignInActivity 코드에서 구글 로그인과 Firebase Auth 인증을 연동합니다. (소스) 로그인이 되면 SignInActivity 를 종료하고 MainActivity 를 다시 띄웁니다.

페이스북 로그인 통합하기

Authenticate Using Facebook Login on Android 문서와 Android용 Facebook 로그인 문서를 참고했습니다.

Facebook for developers 사이트에서 다음 순서로 새로운 페이스북 앱을 생성/설정해주세요.

  1. 새로운 앱을 생성해주세요. 표시 이름, 이메일, 카테고리를 입력해주세요.
  2. 앱 설정 -> 기본 설정에서 앱ID와 앱시크릿코드를 메모해두세요. Firebase Console 에서 페이스북 로그인 설정화면에서 입력할 것입니다.
  3. 앱 설정 > 기본 설정 > 플랫폼 추가 > Android 를 선택해주세요. 조금 전에 생성한 안드로이드 프로젝트의 팩키지이름과 메인 액티비티의 이름, 그리고 위에서 조사한 키해시를 입력해주세요. SSO 옵션도 필히 켜주셔야 합니다. 변경내용저장을 눌러주세요.
  4. 아직 안드로이드 앱을 Google Play 스토어에 올리지않았기 때문에, 이 팩키지이름을 사용할 것인지 물어보는 확인창이 뜰 것입니다. “이 팩키지 이름 사용" 을 선택해주세요.
  5. 개발자 이외에 다른 사람들이 앱을 이용할 수 있도록 할려면, 앱 검수 페이지에서 앱을 공개상태로 전환해주세요.

Firebase Console 의 인증 (Authenciation) 섹션 로그인 방법 (SIGN-IN-METHOD) 탭에서 Facebook 로그인에서 페이스북 앱ID와 앱시크릿코드을 입력하시고 활성화 (Enabled) 시켜주세요.

이제 Android Studio로 돌아가서, 페이스북 로그인 관련 설정을 해줍시다. 주요 변경내역은 다음과 같습니다.

다음 순서로 이뤄집니다.

  1. app/build.gradle 에 facebook sdk 라이브러리 추가 (소스)
  2. 페이스북 앱ID를 strings.xml 리소스에 추가 (소스)
  3. 방금 추가한 앱ID를 페이스북 SDK에서 사용할 수 있도록 AndroidManifest.xml 파일에 meta-data 추가 (소스)
  4. 커스텀 Application 에서 페이스북 SDK 초기화 수행 (소스)
  5. 커스텀 Application 을 현재 앱의 Application 으로 지정 (소스)
  6. SignInActivity 의 레이아웃에 페이스북 로그인 버튼 배치 (소스)
  7. SignInActivity 내에서 페이스북 로그인 관련 처리 및 Firebase Auth 와 연동 (소스)
  8. 페이스북 로그아웃 처리 추가 (소스)

유저 프로필 이미지 띄우기

인증의 마지막 단계로 로그인한 유저의 프로필 이미지가 있을 경우, glide 라이브러리를 이용하여 이미지를 띄워보겠습니다. 소스코드는 짧으니 링크를 참고해서 띄워보세요.


본 문서에 이어, 다음에는 Firebase Realtime Database 를 다뤄보겠습니다. 감사합니다.

파이썬/장고관련 궁금증은 http://facebook.com/groups/askdjango 를 통해 풀어가세요. 유튜브 채널에도 놀러오세요. ;)