플러터(Flutter) - Google 로그인(sign in) 기능 구현하기

Firebase 콘솔에서 Authentication 설정하기

플러터 프로젝트 안드로이드 앱에서 구글 로그인 기능을 구현하려면, Firebase와 플러터 프로젝트를 연동한 후에, Firebase에서 Sign-in method에 Google을 추가해줍니다. Sign-in method 메뉴는 Firebase 프로젝트에 진입해서 빌드> Authentication으로 들어가면 보입니다.

간단하게 프로젝트 지원 이메일만 작성하면 구글 로그인 기능을 사용할 수 있게 됩니다.

의존성 및 구글 로고 이미지 추가하기

Firebase 설정을 마친 후에는 플러터 프로젝트 pubspec.yaml 파일에서 Firebase와 구글 sign in 라이브러리를 추가해줍니다.

dependencies:
  ...
  google_sign_in: ^5.4.2
  firebase_core : ^1.24.0
  firebase_auth: ^3.11.2

그런 다음 Pub get을 클릭해서 라이브러리를 받아옵니다.

코드 진행 과정 살펴보기

codemagic에 소개된 구글 로그인/로그아웃, 유저 프로파일 표시 예제에서 로그인 기능만을 가져와 구글 로그인 기능 구현에 사용해보겠습니다. 전체적으로 다음과 같이 총 네 단계를 거치게 됩니다.

1. main.dart에서 LoginPage 위젯 호출
2. LoginPage 위젯에서 FutureBuilder 위젯을 이용해 Firebase를 초기화하고 Firebase와 연결되면 SignInButton 위젯 호출
3. SignInButton 위젯에서 구글 로그인 버튼을 그려주고 onPressed 속성을 통해 버튼 클릭 시에 Authentication 클래스의 정적 메서드인 signInWithGoogle()을 호출
4. Authentication 클래스에서는 initializeFirebase() 메서드를 통해 Firebase 초기화를, signInWithGoogle() 메서드를 통해 실제 구글 로그인 과정 진행

authentication.dart 구현하기

구글 로그인 기능에서 가장 핵심이 되는 authentication.dart 파일을 살펴보겠습니다. Authentication 클래스의 siginInWithGoogle 정적 메서드에서는 구글 계정 정보를 입력받아 Sign In을 시도하고, 성공 시에는 Firebase 인증 절차를 마무리하게 됩니다. 

 Authentication 클래스의 initializeFirebase 정적 메서드는 Firebase 앱을 초기화 한 후, 실제 구글 로그인 동작이 일어날 때까지 대기했다가 현재 유저 정보를 가져옵니다. 유저 정보를 가져왔다면 TabPage에 해당 유저 정보를 넘겨주게 됩니다. 코드는 다음과 같습니다.

실행 결과

Authentication 클래스를 이용하면 아래와 같이 구글 로그인 기능을 이용해 구글 로그인 버튼을 만들고, 버튼을 클릭하면 계정 선택 화면이 나오게 됩니다. 계정 선택을 선택하고 구글 로그인에 성공하면 메인 화면으로 넘어가는 구조를 작성할 수 있게 됩니다!