[Android][Kotlin] 페이스북 로그인 API 연동(Facebook Login)

안녕하세요~ 챠니입니다! :)

페이스북 로그인 API 연동에 대해서 알아보겠습니다.

 

공식문서가 최신화가 제대로 안되어있어서 오류가 나는 부분이있어서

흩어져있는 공식문서 몇개를 참고하여 만드는 예제코드이니 참고바랍니다 :)

 

Facebook for Developers 설정

 

● Facebook For Developers사이트로 이동합니다.

https://developers.facebook.com/apps

로그인 또는 가입하여 보기

 

● 우측상단 "앱 만들기" 클릭

 

 

● 앱 유형 선택 -> "다음"

 

● 이름 입력, 비즈니스 계정 선택 -> "앱 만들기"

 

● 여기까지 따라오셨으면 Facebook 앱을 만들었습니다.

다음은 Facebook로그인 설정을 해보도록 하겠습니다.

 

● (플랫폼에 맞는) Android 선택

 

 

 

Android Application 설정

 

● 1번은 생략 / 2번 Facebook SDK를 추가

페이스북 공식문서가 뭔가 최신화가 안되어있어요.. 

implementation 'com.facebook.android:facebook-android-sdk:[4,5)' 추가하지마시고

implementation 'com.facebook.android:facebook-android-sdk:[8,9)' 로 변경

implementation 'com.facebook.android:facebook-android-sdk:[8,9)'

 

● 앱 패키지 이름과 기본 액티비티 클래스 이름을 입력 -> "Save"

 

● 디버그 키 / 릴리스 키 해시를 생성하여 입력합니다.

 

● 저는 맥북 디버그 키 해시를 생성해 보도록 하겠습니다.

Android Studio의 아래부분에 Terminal을 열어서 다음을 입력

생성된 키를 Facebook Developer사이트에 입력합니다.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

 

● 앱에 대한 SSO 활성화 여부를 체크합니다. (저는 활성하지 않고 넘어가겠습니다.)

 

● 여기가 가장 중요해 보이는데요! / 리소스 및 메니페스트를 수정합니다.

* facebook_app_id, fb_login_protocol_scheme: 설정 -> 기본설정 -> 앱 ID

* facebook_client_token : 설정 -> 고급설정 -> 앱 ID

 

여기까지 따라오셨다면 거의다 오셨습니다. 

다음에는 전체 코드를 알아보겠습니다.

Facebook Developers에 나와있는대로하면 코드가 최신화가 되어서 오류가 나더라구요

제가 직접 검색하여 정상적으로 작동하는 코드를 기준으로 아래에서 보여드리겠습니다.

 

 

전체 코드

 

● MainActivity.kt

/** MainActivity.kt*/
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    //Facebook
    private lateinit var callbackManager: CallbackManager
    private lateinit var loginManager: LoginManager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //Facebook-Login
        callbackManager = CallbackManager.Factory.create() //로그인 응답 처리할 CallbackManager
        loginManager = LoginManager.getInstance()

        binding.tvFbLogin.setOnClickListener {
            loginManager.logInWithReadPermissions(this, Arrays.asList("public_profile", "email"))
            loginManager.registerCallback(callbackManager, object : FacebookCallback<LoginResult?> {
                    override fun onSuccess(loginResult: LoginResult?) {
                        // App code
                        val graphRequest = GraphRequest.newMeRequest(loginResult?.accessToken) { f_object, response ->
                            // {token: loginResult.accessToken / userObject: f_object}
                            binding.tvFbResult.text = "onSuccess: token: ${loginResult?.accessToken} \n\n userObject: ${f_object}}"
                        }
                        val parameters = Bundle()
                        parameters.putString("fields", "id,name,email,gender,birthday")
                        graphRequest.parameters = parameters
                        graphRequest.executeAsync()
                    }

                    override fun onCancel() {
                    }
                    override fun onError(exception: FacebookException) {
                        binding.tvFbResult.text = "onError: ${exception.printStackTrace()}"
                    }
                })
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        callbackManager.onActivityResult(requestCode, resultCode, data)
    }
}

 

● activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_fb_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4267B2"
        android:padding="10dp"
        android:text="FaceBook Login"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_fb_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="result: "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_fb_login" />



</androidx.constraintlayout.widget.ConstraintLayout>

 

● strings.xml

<resources>
    <string name="app_name">kotlin-facebook-login</string>

    <!--Facebook Developers -> 설정 -> 기본 설정 -> 앱 ID -->
    <string name="facebook_app_id">{facebook_app_id 입력}</string>
    <string name="fb_login_protocol_scheme">{"fb" + facebook_app_id}</string>

</resources>

 

● AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.kotlin_facebook_login">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Kotlinfacebooklogin">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


        <!-- Facebook -->
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id" />
        <activity
            android:name="com.facebook.FacebookActivity"
            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter><action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>

    </application>

</manifest>

 

 

 

전체 소스코드

[소스코드]
Facebook Login API: https://github.com/younminchan/kotlin-sns-samples/tree/main/kotlin-facebook-login

GitHub - younminchan/kotlin-sns-samples: SNS(kakao, naver, facebook, google) 로그인 예제

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview