본문 바로가기
Development/Android

[Android] Firebase - 3. Google로 로그인 구현

by du.it.ddu 2020. 12. 8.
반응형

Firebase를 활용하여 Google로 로그인 기능을 구현해보자.

이전 포스팅에서 성공적으로 Firebase에 앱을 추가했다면 어렵지 않게 구현할 수 있다.


1. Firebase 인증 설정

가장 먼저, 자신의 프로젝트로 이동하여 "Authentication" 항목으로 이동한다.
그리고 "시작하기" 버튼을 누른다.

그럼 "로그인 제공업체" 목록이 나올텐데, Google 을 눌러 "사용설정" 을 활성화하고, 프로젝트 지원 이메일을 입력하자.
프로젝트 공개용 이름은 원한다면 수정해도 좋다. 완료 후 "저장" 을 누른다.


2. Dependency 추가

우선 Firebase의 인증 기능을 위해서 Dependency를 추가해야 한다.

plugins {
    ...
}

android {
    ...
    
    buildFeatures {
        viewBinding = true
    }
}

dependencies {
    ...

    implementation platform('com.google.firebase:firebase-bom:26.1.1')
    implementation 'com.google.firebase:firebase-analytics-ktx'
    // 아래 두 라이브러리가 필요하다.
    implementation 'com.google.firebase:firebase-auth-ktx' 
    implementation 'com.google.android.gms:play-services-auth:19.0.0'
}

app레벨의 build.gradle로 이동하여
'com.google.firebase:firebase-auth-ktx', 'com.google.android.gms:play-services-auth:19.0.0' 두 개를 추가하자.


3. 화면 구현

화면은 간단하게 로그인을 위한 버튼정도만 구현하도록 하겠다.

<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <com.google.android.gms.common.SignInButton
        android:id="@+id/btn_google"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

버튼 하나만 있는 심플한 UI이다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(LayoutInflater.from(this))
        setContentView(binding.root)

        binding.btnGoogle.setOnClickListener { signInWithGoogle() }
    }

    private fun signInWithGoogle() {

    }
}

Activity도 간단하게 버튼을 누르면 signInWithGoogle 함수가 실행되도록 하였다.
이제 signInWithGoogle함수 안에 로그인 기능을 구현하면 된다.

참고로, Kotlin 1.4.20이 릴리즈되면서 "kolin-android-extensions" 플러그인은 deprecated이며, DataBinding 혹은 ViewBinding을 사용할 것을 권장하고 있다.
이 예제에서는 ViewBinding만을 사용하여 구현하고 있다.


4. Google로 로그인 기능 구현

firebase.google.com/docs/auth/android/google-signin

 

Android에서 Google 로그인을 사용하여 인증  |  Firebase

Google 로그인을 앱에 통합하여 사용자가 Google 계정으로 Firebase에 인증하도록 설정할 수 있습니다. 시작하기 전에 아직 추가하지 않았다면 Android 프로젝트에 Firebase를 추가합니다. Firebase Android BoM

firebase.google.com

공식 문서를 참고하는 것도 좋은 방법이다.

class MainActivity : AppCompatActivity() {
    private var firebaseAuth: FirebaseAuth? = null
    private var googleSignInClient: GoogleSignInClient? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...

        val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(getString(R.string.default_web_client_id))
            .requestEmail()
            .build()

        googleSignInClient = GoogleSignIn.getClient(this, gso)
        firebaseAuth = FirebaseAuth.getInstance()
    }
    
    ...
 }

우선 로그인에 사용 될 변수들을 초기화하는 작업이 필요하다.
onCreate에서 작업을 해 주면 된다.


class MainActivity : AppCompatActivity() {
    ...
    
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
    }

    private fun signInWithGoogle() {
        googleSignInClient?.signInIntent?.run {
            startActivityForResult(this, REQ_CODE_SIGN_IN)
        }
    }
    
    ...
    
    companion object {
        private const val REQ_CODE_SIGN_IN = 1000
    }
 }

이제 로그인 버튼 클릭 시 실행되는 함수를 구현한다.
별것 없이, 로그인을 위한 인텐트를 얻어와 "startActivityForResult"를 실행한다. RequestCode는 본인이 원하는 숫자로 변경하여도 무방하다.


 class MainActivity : AppCompatActivity() {
    ...
    
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
    }
    
    ...
    
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (requestCode == REQ_CODE_SIGN_IN) {
            val signInTask = GoogleSignIn.getSignedInAccountFromIntent(data)

            try {
                val account = signInTask.getResult(ApiException::class.java)
                onGoogleSignInAccount(account)
            } catch (e: ApiException) {
                e.printStackTrace()
            }
        }
    }

    private fun onGoogleSignInAccount(account: GoogleSignInAccount?) {
        if (account != null) {
            val credential = GoogleAuthProvider.getCredential(account.idToken, null)
            firebaseAuth?.signInWithCredential(credential)?.addOnCompleteListener {
                onFirebaseAuthTask(it)
            }
        }
    }

    private fun onFirebaseAuthTask(task: Task<AuthResult>) {
        if (task.isSuccessful) {
            // Google로 로그인 성공
            Log.d(this::class.java.simpleName, "User Email :: ${task.result?.user?.email}")
        } else {
            // Google로 로그인 실패
            Log.d(this::class.java.simpleName, "Firebase Login Failure.")
        }
    }
    ...
 }

버튼이 눌려진 후 "startActivityForResult"가 실행되어 로그인을 하면 그 결과가 "onActivityResult"로 전달된다.
그럼 전달한 RequestCode와 같은지 확인 후, 로그인된 계정의 정보를 이용하여 Firebase에 인증을 시도한다.
함수는 순서대로 작성되어 있으니 차근차근 따라가면 무리없이 구현 가능할 것이다.


5. Firebase Console에서 결과 확인

콘솔의 "Authentication" 으로 이동 후 "Users" 탭을 확인하면, 위와 같이 로그인 한 계정이 추가되어 있음을 알 수 있다.
이를 활용하면 손쉽게 앱에 로그인 기능을 연동할 수 있고, 탈퇴 또한 가능하다.

Firebase는 어떤 SNS와도 통합이 가능하다. 이메일, 휴대폰 로그인 또한 그러하다.
다만, Google 아닌 다른 로그인의 경우 별도의 서버 처리가 필요할 수 있으니 참고 바란다.

반응형