FCM (Firebase Cloud Messaging) 페이스북 로그인 연동 (1)

지난 포스팅에서는 FCM을 활용해 구글 로그인 기능을 구현해보았다. 하지만 일반적으로 어플리케이션의 SNS 로그인 기능은 구글 뿐만 아니라 페이스북, 트위터, 카카오등 다양하게 존재한다. 지난 구글 로그인 기능을 구현할때 만든 FCM과 연동시켜놓았던 프로젝트에 그대로 진행하도록 하겠다. 아마 이번 포스팅을 그대로 따라해서 결과물을 보면 지난 포스팅에서만든 구글 로그인과 페이스북 로그인이 하나의 프로젝트에 들어가있을 것이다. 물론 이 포스팅만을 따라해도 기능 구현에는 문제가 없지만 두가지의 로그인 기능을 구현하고 싶다면 지난 포스팅을 진행 후 따라하기 바란다.

참고: https://neosla.tistory.com/26

페이스북 연동의 경우 앞서 구현했던 구글로그인 기능과는 약간 다르다. 구글 로그인의 경우 파이어베이스에서 로그인 기능 사용만 해줬으면 됐지만, 페이스북은 페이스북 개발자 홈페이지를 통해 개발자 등록을 하고 진행을 해야되는 번거로움이 있지만, 어렵지는 않으니 시작하도록 하겠다. 페이스북 개발자 홈페이지 링크는 아래의 링크로 들어가서 회원가입을 하면 된다.

https://developers.facebook.com/

페이스북 개발자 링크를 들어간 후 회원가입을 하면 우측 상단에 내앱 부분에 '새 앱 추가' 버튼을 눌러 새로운 앱을 만들어야 한다. 아래와 같이 만드려는 앱의 이름을 자유롭게 적고 나의 연락처 이메일을 전전은후 만들기를 누르면 간단하게 프로젝트가 하나 생성된다.

새 프로젝트를 만든 후 좌측에보면 대시보드, 설정 등의 기능들이 존재할 것이다. 우리는 여기서 방금 만든 프로젝트의 기본 정보를 알기 위해서 설정->기본설정 으로 들어가도록한다. 그러면 아래와 같은 페이지가 나타날 것이다. 여기서 우리가 알아야 할 것은 앱ID 와 앱 시크릿 코드 이다. 다음 스텝을 위해 이 두가지를 복사해서 가지고 있길 바란다.

이 후 지난번에 만들어둔 Firebase 콘솔 페이지로 가서 좌측에 있는 Authentication -> 로그인 방법 으로 이동하여 페이스북 로그인 사용 설정을 해줘야 한다. 페이스북 로고를 누른 후 사용 설정을 하면 필수적으로 앱ID와 앱 비밀번호가 필수인것을 확할 수 있다. 여기서 필요한것이 좀전에 페이스북 개발자 홈페이지에서 기억해둔 앱ID와 앱 시크릿 번호이다. 이 두지를 파이어베이스 아래 부분에 복사해서 붙여넣기 바란다.

여기서 끝난 것이 아니다!!!! 앱 비밀번호 밑에 보면 '설정을 완료하려면 이OAuth 리디렉션 URI를 Facebook 앱 구성에 추가하세요' 라는 문구가 있다. 이 부분도 역시나 복사해서 가지고 있길 바란다. 바로 다음 스텝에서 사용을 할 것이다. URI를 복사후 저장을 눌러주면 Firebase에서 설정해줘야 하는 부분은 끝이난다. 다시 페이스북 개발자 홍페이지로 돌아와서 좌측 하단 제품 부분을 클릭하면 다양한 기능들이 보인다. 우리는 페이스북 로그인을 할것이기 때문에 Facebook 로그인 부분의 설정을 눌러주면 된다.

물론 안드로이드 프로젝트에 적용을 할 것이니 안드로이드를 클릭해주면 된다.

설정을 완료했으면 아래 그림처럼 Facebook 로그인 부분이 추가된것을 확인 할 수 있다. 이제 여기서 설정을 들어가면 '유효한 OAuth 리디렌션 URI' 부분에 FCM에서 복사한 URI를 넣어주고 변경사항내용 저장을 눌러준다.

지금까지 한것은 페이스북 개발자 홈페이지를 통해 사용되는 로그인 기능을 Firebase에서 인식을 하게 해주는 설정이라고 보면되고 마지막 설정 단계로는 안드로이드 스튜디오의 프로젝트를 인식하게 해주기 위한 설정이다. 다음 설정을 위해 우측 상단 문서의 android-facebook 로그인 을 누르면 아래와 같은 페이지로 이동하게 된다. 여기서 1. 앱 선택 또는 새 앱 만들기에서서 처음으로 만들어준 앱을 선택하면된다.

밑으로 쭉 내려 5. 패키지 이름 및 기본 클래스를 앱과 연결 부분이다. 여기서 패키지 이름은 안드로이드 스튜디오의 패키지 이름을 적어주면된다. 패키지 이름을 MainActivity 제일 상단에 보면 나와 있다. 기본 액티비티 클래스 이름은 페이스북 로그인을 구현할 액티비티를 넣어주면 되는데 예를 들어 앞에서 적은 패키지 이름이 com.example.song.test 이고 메인액티비티에서 페이스북 로그인 기능을 구현할 것이라면 com.example.song.tesg.MainActivity로 적어주면 된다. 저장을 누르면 ~~문제가 있다 라고 뜨지만 가볍게 무시해줘도 된다

밑으로 또 내리다보면 키 해시를 등록해주는 부분이 나타난다. 키 해시를 구하는 방법은 다양한 방법이 존재하지만 가장 정확한 방법은 안드로이드 스튜디오 코드로 돌린 후 해시 값을 받아내는게 제일 정확한것 같다. 물론 어플 release를 위해서는 지금 받는 키 해시로는 불가능하고 release 용 키 해시를 받아야 하지만, 여기서는 단순 개발용 키 해시를 받도록 하겠다.

아래의 코드를 MainActivity에 붙여 넣은 후 Logcat 으로 해시키를 확인하여 붙여 넣어주면 된다.

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//hashkey
mContext = getApplicationContext();
getHashKey(mContext);

/********
 * 해시키
 *******/
// 프로젝트의 해시키를 반환
@Nullable
public static String getHashKey(Context context) {
    final String TAG = "KeyHash";
    String keyHash = null;
    try {
        PackageInfo info =
                context.getPackageManager().getPackageInfo(context.getPackageName(), PackageManager.GET_SIGNATURES);

        for (Signature signature : info.signatures) {
            MessageDigest md;
            md = MessageDigest.getInstance("SHA");
            md.update(signature.toByteArray());
            keyHash = new String(Base64.encode(md.digest(), 0));
            Log.d(TAG, keyHash);
        }
    } catch (Exception e) {
        Log.e("name not found", e.toString());
    }

    if (keyHash != null) {
        return keyHash;
    } else {
        return null;
    }
}
/********
 * 해시키
 *******/

여기까지 잘 따라왔으면 모든 설정은 끝이난 것이다. 이제는 직접 안드로이드 스튜디오에서 코드만 구현해주면 된다. 1차적으로 본 포스팅에서는 구현을 하기에 앞서 FCM, Facebook 홈페이지를 통해 기본적인 설정을 완료하였다. 다음 포스팅에서는 본 프로젝트를 그대로 활용해서 코드구현을 하도록 하겠다. fcm이나 facebook 개발홈페이지의 경우 지속적으로 업데이트가 되는 것 같다. 본 포스팅이랑 내용이 상이하거나 업데이트가 되었다면 댓글로 알려주시면 감사!!!