[Flutter] Firebase를 이용하여 Facebook Login 사용하기

Firebase를 이용하여 Facebook Login 사용하기

플러터 환경에서 파이어베이스를 사용하여 페이스북 인증을 해보자

---

작업 환경

아래 항목은 필수 사항이다.

- 안드로이드 : AndroidX 이상

- iOS : Deployment target iOS 9 이상

---

선행 작업

이 글은 파이어베이스와 페이스북에 각각 프로젝트가 생성되어 있어야 하며, 양 쪽 프로젝트 모두 Android, iOS가 등록된 이후의 작업을 다루므로 앞의 프로세스를 진행하지 않았다면 아래 링크에서 먼저 모든 작업을 완료해야한다.

 

1. 파이어베이스 프로젝트 생성

[Firebase] Firebase 프로젝트 생성하기

2. 파이어베이스 프로젝트에 Android, iOS 등록

[Firebase] Firebase 프로젝트에 Android, iOS 연결하기

3. 페이스북 프로젝트 생성

[Facebook] Facebook 프로젝트 생성하기

4. 페이스북 로그인 API에 Android, iOS 등록

[Facebook] Facebook Login을 위해 프로젝트에 Android, iOS 연결하기

---

작업 순서

1. Firebase Console에서 Facebook Login 활성화

2. Flutter 프로젝트에 패키지 추가하기

3. 인증 소스코드 구현

---

Firebase Console에서 Facebook Login 활성화

우선, 페이스북 개발자 콘솔에서 파이어베이스와 연동할 프로젝트의 앱 ID와 앱 시크릿 코드를 얻어온다.

 

파이어베이스 콘솔에서 "Authentication >> 로그인 방법" 항목으로 들어가 로그인 제공업체 목록에서 Facebook을 선택하고 위에서 얻어온 앱 ID와 앱 시크릿 코드를 입력한다. 그리고 사진에 나온 URL을 복사한다.

 

다시 페이스북 페이지로 돌아와서 "제품 >> Facebook 로그인 >> 설정" 항목으로 들어가 유효한 OAuth 리디렉션 URI 항목에 위에서 복사한 URL을 넣어준다.

 

이제부터 앱에서 파이어베이스를 통해 페이스북 인증을 시도하면 앱 >> 파이어베이스 >> 위에 나온 URL을 거쳐 다시 앱으로 돌아오게 될 것이다.

---

Flutter 프로젝트에 패키지 추가하기

// pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.15.1
  flutter_facebook_login: ^3.0.0

pubspec.yaml에 firebase_auth와 flutter_facebook_login 패키지를 추가한다.

안드로이드는 AndroidX 이상에서 실행하여야 하고, iOS는 9 이상에서 실행하여야 한다.

---

인증 소스코드 구현

FirebaseAuth auth = FirebaseAuth.instance;
FacebookLogin facebookLogin = FacebookLogin();

FirebaseAuth 싱글톤 객체를 가져오고, FacebookLogin 객체를 할당한다.

 

FacebookLoginResult result = await facebookLogin.logIn(['email', 'public_profile']);

facebookLogin.login(scope) 함수를 이용해 파이어베이스가 페이스북 인증에 성공 했을 때 계정 정보를 얻어갈 수 있도록 email과 public_profile를 scope로 넣어준다. 함수가 실행되면 로그인한 유저 정보를 반환한다.

 

이 함수가 실행될 때 아래와 같은 화면이 각각 나타난다.

페이스북 앱이 깔려있을 때

위 화면은 페이스북 앱이 설치된 안드로이드 폰에서 페이스북 인증을 시도한 모습이다. 전용 인증 UI가 나타나서 깔끔하다.

 

페이스북 앱이 깔려있지 않을 때

위 화면은 iOS에서 시도했거나 페이스북 앱이 설치되지 않은 안드로이드 폰에서 페이스북 인증을 시도한 모습이다.

웹 페이지로 연결되며 인증에 성공하면 앱으로 되돌아간다.

 

AuthCredential credential = FacebookAuthProvider.getCredential(accessToken: result.accessToken.token);
AuthResult authResult = await auth.signInWithCredential(credential);
FirebaseUser user = authResult.user;

그 다음, FacebookAuthProvider을 이용해 credential을 만들고 FirebaseAuth 객체의 signInWithCredential( ) 함수를 이용해 최종 인증결과를 가져온다.

최종적으로 로그인 성공한 유저의 정보는 AuthResult 객체의 user 프로퍼티 안에서 찾을 수 있고, FirebaseAuth 객체의 auth.currentUser() 함수를 이용해서도 찾을 수 있다.

 

위 과정을 모두 수행했다면 파이어베이스를 이용해 페이스북 로그인에 성공한 것이다.

 

FirebaseAuth auth = FirebaseAuth.instance;
FacebookLogin facebookLogin = FacebookLogin();

FacebookLoginResult result = await facebookLogin.logIn(['email', 'public_profile']);

AuthCredential credential = FacebookAuthProvider.getCredential(accessToken: result.accessToken.token);

AuthResult authResult = await auth.signInWithCredential(credential);
FirebaseUser user = authResult.user;

전체 소스코드는 위와 같다.

---

관련 문서

firebase_auth | Flutter Package

 

flutter_facebook_login | Flutter Package