[안드로이드/인스타그램클론] # 4 페이스북 로그인 기능 추가

[ 이전 글 ] 에서는 구글로 로그인 하는 기능을 추가해 보았는데 이번에는 페이스북을 통해 로그인하는 기능을 추가해볼 것이다

 

🧸페이스북 로그인

    - 1️⃣ 페이스북 로그인 -> 2️⃣ firebase -> 3️⃣ 로그인 확인

 

페이스북 로그인도 구글 로그인과 같은 과정을 거치는 데 일단 페이스북 로그인하기 위해서는

 

[ 기본 설정 ]

facebook for developer 에 접속 ➡️ 로그인 ➡️ 새로운 앱 만들기 ➡️ 앱 Id 와 이메일 쓰고 보안 확인 후 ➡️ 대시보드 ➡️ Facebook 로그인 설정 버튼 누르고 ➡️ 안드로이드 선택 ‼️

 

그 다음부터는 6번 까지는 순서대로 하면 되는데

일단 2 ) 에서

위에 그림에 있는 곳에

위에 사진처럼 mavenCentral()을 추가

 

그리고 나서 이곳에implementation 'com.facebook.android:facebook-android-sdk:[4,5) 을 추가

3 ) 에서는

첫번째 꺼에는 loginActivity의 package 이름을 두번째에는 package.class이름을 써주면 된다. save버튼 누르면 오류가 나겠지만 그냥 무시하고 넘겨도 된다

 

그러고 나면 4 )에서 hash키가 필요한데 그걸 받기 위해서는 따로 과정이 필요한데 그건 강의에 잘 설명되어 있으니 PASS

    fun printHashKey() {
        try {
            val info: PackageInfo = packageManager.getPackageInfo(packageName, GET_SIGNATURES)
            for (signature in info.signatures) {
                val md: MessageDigest = MessageDigest.getInstance("SHA")
                md.update(signature.toByteArray())
                val hashKey = String(Base64.encode(md.digest(), 0))
                Log.i("Tag", "printHashKey() Hash Key: $hashKey")
            }
        } catch (e: NoSuchAlgorithmException) {
            Log.e("Tag", "printHashKey()", e)
        } catch (e: Exception) {
            Log.e("Tag", "printHashKey()", e)
        }
    }

그래도 코드는 첨부 

 

그리고 5 ) 넘기고 6 ) 에 있는 코드를 각각 첫번째는 strings.xml에 두번째와 세번째는 androidManifest.xml에 추가해준다. 

여기까지 하고 

 

다음은 Firebase도 facebook 로그인이 가능하게 설정해줘야하는데 

Firebase ➡️ facebook 사용 설정을 누르면 앱 ID와 비밀번호를 줘야하는데 그건 facebook for developer - 설정 - 기본설정 에 나와있으니 복붙하면 된다

이걸 복붙하면 됨

 

‼️ 이제 본격적으로 코드를 건들여보자 ‼️

 

activity_login.xml에 있는 facebook button에 [ android:id="@+id/facebook_login_button" ]를 추가해준다 

 

그리고 loginActivity에 돌아와서 아래의 코드 추가

var callbackManager: CallbackManager? = null

- CallbackManager 객체 - 페이스북 로그인 결과를 가져오는 객체

callbackManager = CallbackManager.Factory.create()

-CallbackManager.Factory.create() 를 호출하여 로그인 응답을 처리할 콜백 관리자를 만듬.

 

onActivityResult 메소드에 callbackManager?.onActivityResult(requestCode, resultCode, data) 를 추가해 아래와 같이 만들어준다.

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        callbackManager?.onActivityResult(requestCode, resultCode, data)
        if (requestCode == GOOGLE_LOGIN_CODE) {
            var result = Auth.GoogleSignInApi.getSignInResultFromIntent(data)
            if (result!!.isSuccess) {
                var account = result.signInAccount
                // Second step
                firebaseAuthWithGoogle(account)
            }
        }
    }

그래서 로그인 결과를  callbackManager를 통해 loginManager에게 전달한다

 

[ facebook login ]

   fun facebookLogin() {
        LoginManager.getInstance()
            .logInWithReadPermissions(this, asList("public_profile", "email"))

        LoginManager.getInstance()
            .registerCallback(callbackManager, object : FacebookCallback<LoginResult>{
                override fun onSuccess(result: LoginResult?) {
                    handleFacebookAccessToken(result?.accessToken)
                }
                override fun onCancel() {
                }
                override fun onError(error: FacebookException?) {
                }
            })
    }

 - loginManager를 통해 페이스북에서 [ public_profile , email ] 받을 권한을 요청하고 

- 그 아래는 성공했을 때 나오는 코드이다

 

 

🔱여기서 잠깐🔱
코드를 다 쓰고 실행했었는데 계속 튕기고 앱이 꺼지길래 이것 저것 다 건들였었는데 
logInWithReadPermissions(this, asList("public_profile", "email")) - ⭕️
⬇️
logInWithPublishPermission(this, asList("public_profile", "email")) - ❌

아래와 같이 떠서 진짜 튕기는 것만 1시간동안 본 거 같다 후,, 🤬

그 다음 firebase에서 인증을 해줘야 하는데 아래의 코드를 입력하면 페이스북 데이터를 firebase에 넘기는 기능을 한다.

방식은 google이랑 동일하기 때문에 PASS

    fun handleFacebookAccessToken(token : AccessToken?){
        var credential = FacebookAuthProvider.getCredential(token?.token!!)
        auth?.signInWithCredential(credential)
            ?.addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    //Login
                    moveMainPage(task.result?.user)
                } else {
                    //Login if you have account
                    Toast.makeText(this, task.exception!!.message, Toast.LENGTH_LONG).show()
                }
            }

    }

그리고 나서 아래의 코드를 구글 로그인 밑에 써주면 끝 ‼️

  facebook_login_button.setOnClickListener {
            facebookLogin()
        }

동작화면 3배속

근데 테스트버젼이라서 그런지 내 아이디 말고 다른 아이디로는 로그인이 되지 않는다 이유는 아직 잘 모름 헤헤😅

그럼 오늘도 여기서 끝 👩🏻‍💻🦔