Firebase - 파이어베이스로 페이스북로그인

Firebase - 파이어베이스 페이스북로그인

페이스북 아이디로 소셜 로그인 하는 기능은 현재 가장 많이 쓰이는 소셜 로그인 기능일 것입니다. 아이폰과 안드로이드폰 사용자 모두 손쉽게 가입할 수 있는 장점이 있기 때문입니다.

Firebase 콘솔에 내앱 추가하기

먼저 https://console.firebase.google.com/ Firebase 콘솔창에 접속해 

Project Overview오른쪽의 톱니바퀴를 눌러 

 프로젝트설정-> 앱추가 -> 패키지이름 입력 

->google-services.json 파일 다운로드하여 -> 안드로이드스튜디오 app 아래에 넣어주기

그리고 gradle.build(모듈)의 dependencies에 아래 내용을 추가합니다

dependencies {

      ...

 

    //Firebase

    implementation 'com.google.firebase:firebase-database:16.0.5'

    implementation 'com.google.firebase:firebase-auth:16.0.5'

    

}

apply plugin: "com.google.gms.google-services"

그리고 gradle.build(프로젝트)

buildscript {

    ext.kotlin_version = '1.3.11'

    ext.anko_version='0.10.5'

    repositories {

        google()

        jcenter()

    }

    dependencies {

        ...

 

        classpath 'com.google.gms:google-services:4.2.0' // update version

 

    }

}

 

allprojects {

    repositories {

        ...

        maven{

            url "https://maven.google.com"

        }

    }

}

 

task clean(type: Delete) {

    delete rootProject.buildDir

}

페이스북 로그인하기

일단 페이스북 로그인을 연동하기 위해서는 페이스북 개발자 사이트

(https://developers.facebook.com/)로 이동해서 프로젝트를 만들어야 합니다.

페이스북 로그인 하기 1단계

표시 프로젝트 이름을 만들고 앱 ID 만들기 버튼을 눌러줍니다.

내앱 버튼을 누르면 위와같은 페이지가 나오는데 빠른 시작 완료하기 를 눌러줍니다

android 클릭하기

Andorid SDK를 다운로드 할 필요 없으므로 다음

페이스북 로그인 하기 2단계

위 사진은 1단계에서 SDK를 받지 않았던 부분을 Gradle을 통해서 불러오기 위한 단계입니다.

mavenCetral() 값과 implementation 'com.facebook.android:facebook-android-sdk:[4,5)' 

을 추가합니다.

project 수준의 gradle.build에  "mavenCetral()"

buildscript {

    ext.kotlin_version = '1.3.11'

    repositories {

        google()

        jcenter()

        mavenCentral()

    }

    dependencies {

           ...

    }

}

 

allprojects {

    repositories {

        ...

    }

}

 

task clean(type: Delete) {

        ...

}

app 수준의 gradle.build에   " implementation 'com.facebook.android:facebook-android-sdk:4.39.0'"

dependencies {

       ...

    

    //facebook login

    implementation 'com.facebook.android:facebook-android-sdk:4.39.0'

    //Firebase

    implementation 'com.google.firebase:firebase-database:16.0.5'

    implementation 'com.google.firebase:firebase-auth:16.0.5'

    //Anko

    implementation "org.jetbrains.anko:anko:$anko_version"

}

그리고 다음을 눌러줍니다

페이스북 로그인 하기 3단계

페이스북 로그인을 사용하기 위해서는 프로젝트 이름을 넣어주어야 합니다.

위와같이 패키지이름과 액티비티 클래스 이름을 입력해주고 Save를 누르면 

안드로이드 앱이 PlayStore에 등록되지 않고 진행한다는 에러가 발생하는데

무시하고 이 패키지 이름 사용을 클릭해주고 계속 버튼을 눌러 다음 단계로 넘어갑니다.

페이스북 로그인 하기 4단계

안드로이드 앱이 페이스북 개발자 사이트에 등록되기 위해서는 앱에 대한 해시 값(인증서)가 있어야 합니다. 패키지 이름만으로는 페이스북 개발자 사이트에 등록이 되지 않습니다. 

즉  이 앱에 인증서 SHA1 키를 해시(암호화)시켜서 등록하면 페이스북은 손쉽게 이 앱을 누가 만들었는지 알 수 있기 때문입니다 .

Mac OS를 사용한다면 위의 키를 복사해서 cmd에 입력해줍니다 

Window를 사용한다면 

1 ) 환경변수를 설정해줘야 합니다.

윈도우 검색창에 keytool을 검색하여 위치열기를 통해 위치를 알아와줍니다.

그리고  고급시스템 -> 환경변수 -> 편집으로 이동하여

Path 변수에 위 jdk 폴더 경로를 추가해줍니다.

그리고 페이스북 개발자 사이트에서 Google Code Archive로 이동해줍니다

그리고 openssl -0.9k_X64.zip을 다운하여 C:/SSl 폴더를 만든후 압축해제 합니다.

그리고

 
      
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
      
 

여기있는 USERNAME 값과 PATH_TO_OPENSSL_LIBRARY 값을 직접 수정한 수에 

cmd에 코드를 입력합니다.

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\qjatj\.android\debug.keystore" | "C:\SSL\bin\openssl" sha1 -binary | "C:\SSL\bin\openssl" base64

윈도우 계정 폴더 이름은 qjatj 이며 ssl 파일을 풀고 bin아래에 openssl 파일이 있으므로 그 경로를 입력해 줍니다

입력하게 되면 아래와같이 키 저장소 비밀번호를 입력하면 키 해시값을 발급받을수 있게 됩니다

C:\>keytool -exportcert -alias androiddebugkey -keystore "C:\Users\qjatj\.android\debug.keystore" | "C:\SSL\bin\openssl" sha1 -binary | "C:\SSL\bin\openssl" base64
키 저장소 비밀번호 입력:  ekdi......
3VECdyRWQM2......

그럼 아래 사진처럼 키해시값을 입력하는 창에 입력하고 save 한뒤 다음으로 넘어갑니다

페이스북 로그인 하기 5단계

SSO(Single Sign On)은 한번의 인증 과정으로 스마트 폰의 여러 자원을 이용가능하게 하는 인증 기능입니다 . 단일 인증이라고 말하며 페이스북에 로그인한 상태라면 싱글 사인 온을 통해 

다른 모바일 어플리 케이션에 쉽게 로그인 할 수 있습니다.

이 기능을 활성화 하고 save 클릭후 다음으로 넘어갑니다.

페이스북 로그인 하기 6단계

이번에는 Facebook API Key를 안드로이드 앱에 저장해야 합니다. 키 해쉬(인증서) 등록이 되었다고 해서 바로 페이스북 로그인이 성공하는 것은 아닙니다. 물론 키 해쉬 값이 중복될 수 있는 경우 때문에 로그인을 요청할 때 페이스북에서 발급한 API 키를 담아서 요청해야 합니다.

/app/res/values/strings.xml에 코드를 복사하여 넣어주고

Manifast에 Internet 권한을 설정하고 

인텐트 필터속해있는 액티비티아래이고  <application>속에 아래 코드를 넣어줍니다

그리고 다음을 모두눌러 끝내줍니다

페이스북 로그인 하기 7단계 - Firebase 페이스북 연동

홈화면에서 프로젝트를 선택하고 설정->기본설정 -> 앱ID와 앱시크릿코드 복사합니다.

그리고 Firebase 콘솔로 들어가 Authentication-> 로그인방법 ->페이스북 사용설정을 ON 하고 

앱 ID와 앱 비밀번호를 입력한 후 저장합니다.

그리고 아래 네모박스를 클릭해

https://chobeombook.firebaseapp.com/__/auth/handler 값을 복사합니다

그리고 다시 facebook for developers 페이지로 돌아와 

복사한 내용을 OAuth 리디렉션 URI에 넣어줍니다.

페이스북 로그인 하기 8단계 - Firebase 페이스북 연동 코드 작성

MainActivity.kt

class MainActivity : AppCompatActivity() {
    lateinit var auth: FirebaseAuth
    lateinit var callbackManager: CallbackManager
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        auth = FirebaseAuth.getInstance()
        callbackManager = CallbackManager.Factory.create()
 
        facebookLoginBtn.setOnClickListener {
            facebookLogin()
        }
 
        facebookLogoutBtn.setOnClickListener {
            signOut()
        }
    }
 
 
    private fun facebookLogin() {
        LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("public_profile", "email"))
        LoginManager.getInstance().registerCallback(callbackManager, object : FacebookCallback<LoginResult> {
 
            override fun onSuccess(result: LoginResult?) {
                //페이스북 로그인 성공
                handleFacebookAccessToken(result?.accessToken)
                toast("로그인 성공")
            }
            override fun onCancel() {
                //페이스북 로그인 취소
                updateUI(null)
            }
 
            override fun onError(error: FacebookException?) {
                //페이스북 로그인 실패
                updateUI(null)
            }
        })
    }
 
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        callbackManager?.onActivityResult(requestCode, resultCode, data)
        //onActivityResult에서는 callbackManager에 로그인 결과를 넘겨줍니다
        //여기에 callbackManager?.onAcitivyResult가 있어야 onSuccess를 호출할 수 있습니다.
    }
 
    private fun handleFacebookAccessToken(token: AccessToken?) {
        Log.d("MainActivity", "handleFacebookAccessToken:$token")
        if (token != null) {
            val credential = FacebookAuthProvider.getCredential(token.token)
            auth.signInWithCredential(credential)
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        // Sign in success, update UI with the signed-in user's information
                        Log.d("MainActivity", "signInWithCredential:success")
                        val user = auth.currentUser
                        updateUI(user)
                    } else {
                        // If sign in fails, display a message to the user.
                        Log.w("MainActivity", "signInWithCredential:failure", task.exception)
                        toast("Authentication failed.")
                        updateUI(null)
                    }
                }
        }
    }
 
    override fun onStart() { //로그인유저되있는 유저를 확인함
        super.onStart()
        val currentUser = auth.currentUser
        updateUI(currentUser)
    }
 
    fun signOut() {
        auth.signOut()
        LoginManager.getInstance().logOut()
        updateUI(null)
        toast("로그아웃")
    }
 
    private fun updateUI(user: FirebaseUser?) {
        if (user != null) {
            status.text = user.displayName
            detail.text = user.photoUrl.toString()
        } else {
            status.setText("로그인 안됨")
            detail.text = "photoURL"
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" tools:layout_editor_absoluteY="81dp">
 
 
    <Button
            android:text="facebookLoginBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/facebookLoginBtn"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="16dp" android:layout_marginStart="16dp"/>
    <TextView
            android:text="status"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/status"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/facebookLogoutBtn"/>
    <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/detail"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/status" android:text="photoURL"/>
    <Button
            android:text="facebookLogoutBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/facebookLogoutBtn"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="10dp" android:layout_marginStart="16dp"
            app:layout_constraintTop_toBottomOf="@+id/facebookLoginBtn"/>
</android.support.constraint.ConstraintLayout>