안드로이드 Firebase 페이스북 로그인 예제

안드로이드 스튜디오와 Firebase를 사용하여 구글 로그인과 이메일 로그인 예제를 해보았습니다.

이번에는 facebook 연동 예제를 알려 드릴려고 합니다.

먼저 Firebase에서 프로젝트를 생성 또는 기본 프로젝트를 가져와서 옵니다.

페이스북 로그인 설정을 합니다.

앱ID와 앱 비밀번호는 필수라고 나오네요.

다음으로 페이스북 개발자 사이트에 접속합니다.

https://developers.facebook.com/

우측 상단에 새 앱 추가를 합니다.

그런다음 새 앱 ID만들기 창이 뜹니다

표시 이름은 개발자분들이 편한대로 작성하고

연락처 이메일은 자신의 이메일을 적어주면 됩니다.

그리고 앱 ID 만들기를 합니다.

이 부분 사진은 생략할게요..

만드신 프로젝트 입니다.

제품 -> Facebook 로그인 -> 설정에 들어갑니다.

다시 Firebase facebook 로그인 설정에서

별 모양 부분을 복사하여

여기에 붙여넣습니다.

그다음 설정 -> 기본 설정으로 이동하신다음

앱 ID를 Firebase의 앱 ID에

앱 시크릿 코드를 보기하여  Firebase의 앱 비밀번호에 넣습니다.

그다음 페이스북 개발자 사이트 우측 상단에

문서 -> (하단) Android SDK -> (중앙) Android SDK에 포함된 기능에 로그인으로 접속합니다.

그러면 아래 화면으로 이동합니다.

1번 앱 선택에 자신이 만든 페이스북 프로젝트 명을 선택합니다.

3번 Facebook SDK 통합에서

Maven 사용

1번에 jcenter()는 최근에 안드로이드 프로젝트를 새로 만드셧다면 있으실거구요

2번에 앱수준 Gradle에 

implementation 'com.google.android.gms:play-services-auth:11.6.2'
implementation 'com.facebook.android:facebook-login:[4,5)'

이 두 코드를 추가 후 싱크해줍니다.

위 사진 순서대로

4 - 1 

안드로이드 스튜디오 -> app -> res -> values -> strings.xml에 추가합니다.

<string name="facebook_app_id">1048825328625624</string>
<string name="fb_login_protocol_scheme">fb1048825328625624</string>

4 - 2

안드로이드 스튜디오 -> app -> manifests에 

<uses-permission android:name="android.permission.INTERNET"/>

4 - 5 

안드로이드 스튜디오 -> app -> manifests에 <application> 과 </application> 사이에

4.5번에 있는 코드를 추가합니다.

다음으로 5번에 패키지 이름과 기본 액티비티 클래스 이름이 이름이 있습니다.

패키지 이름에 패키지 이름을

기본 액티비티 클래스 이름에

로그인 하는 클래스 이름을 적어줍니다.

저는 MainActivity에서 로그인을 하기에 패키지 이름에 .MainActivity를 적었습니다.

다음으로 6번 해용 개발 및 릴리스 키 해시 제공입니다.

맥용과 안드로이드용이 구별 되어있습니다.

자신의 OS에 맞는 명령을 복사한 후 

Android studio -> (하단) Terminal에 코드를 넣으시면 

위 사진처럼 해시 키가 발생합니다.

페이스북 개발자 사이트 키 해시 입력란에 넣어줍니다.

7번에 앱에 대한 SSO활성화는 자동 로그인기능인데 '아니요'로 하고 넘어갈게요~~

8번에 Facebook 로그인 버튼 추가입니다.

[activity_main.xml]

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="30dp" /> 

디자인은 개발자 분에 따라 바꾸시면 됩니다.

안드로이드 스튜디오로 와서 콜백을 등록해줘야합니다.

[MainActivity.java]

우선 파이어베이스 인증 객체랑 페이스북 콜백 매니저를 전역으로 선언합니다.

전에 프로젝트랑 이어서 하면 파이어베이스 인증 객체는 이미 선언했기 때문에 필요가 없겠죵?

// 페이스북 콜백 매니저
private CallbackManager callbackManager;
// 파이어베이스 인증 객체 생성
private FirebaseAuth firebaseAuth;

onCreate() 부분입니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 파이어베이스 인증 객체 선언
    firebaseAuth = FirebaseAuth.getInstance();

    // 페이스북 콜백 등록
    callbackManager = CallbackManager.Factory.create();

    buttonFacebook = findViewById(R.id.btn_facebookSignIn);
    buttonFacebook.setReadPermissions("email", "public_profile");
    buttonFacebook.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult loginResult) {
            handleFacebookAccessToken(loginResult.getAccessToken());
        }

        @Override
        public void onCancel() {

        }

        @Override
        public void onError(FacebookException error) {

        }
    });
}

페이스북 로그인 버튼을 구성할 때 public_profil 및 email 권한을 요청합니다.

다음으로 handleFacebookAccessToken(loginResult.getAccessToken())를 작성합니다.

// 페이스북 로그인 이벤트
// 사용자가 정상적으로 로그인한 후 페이스북 로그인 버튼의 onSuccess 콜백 메소드에서 로그인한 사용자의
// 액세스 토큰을 가져와서 Firebase 사용자 인증 정보로 교환하고,
// Firebase 사용자 인증 정보를 사용해 Firebase에 인증.
private void handleFacebookAccessToken(AccessToken token) {

    AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());
    firebaseAuth.signInWithCredential(credential)
            .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                    if (task.isSuccessful()) {
                        // 로그인 성공
                        Toast.makeText(MainActivity.this, R.string.success_login, Toast.LENGTH_SHORT).show();
                    } else {
                        // 로그인 실패
                        Toast.makeText(MainActivity.this, R.string.failed_login, Toast.LENGTH_SHORT).show();
                    }
                }
            });
}

onActivityResult에 페이스북 콜백 등록을 합니다.

저는 구글로그인 예제와 같이 쓰고 있기 때문에 페이스북 로그인만 하실 분들은 밑에 콜백만 등록하면 됩니다.

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    // 페이스북 콜백 등록
    callbackManager.onActivityResult(requestCode, resultCode, data);
    // 구글로그인 버튼 응답
    if (requestCode == RC_SIGN_IN) {
        Task<GoogleSignInAccount> task = GoogleSignIn.getSignedInAccountFromIntent(data);
        try {
            // 구글 로그인 성공
            GoogleSignInAccount account = task.getResult(ApiException.class);
            firebaseAuthWithGoogle(account);
        } catch (ApiException e) {

        }
    }
}

이제 디버깅 하시면 firebase에 페이스북 아이디가 등록되있을겁니다.

궁금하신점은 댓글을 달아주세요