본문 바로가기
Develop/Android

Firebase 이용하여 Google Login 구현하기 _ Android Kotlin

by 라이프레이서 2020. 9. 23.

목차

    반응형

    Android에서 Firebase를 이용하여 Google Login을 구현하는 방법에 대해 알아보겠습니다.

    해당 포스팅에서의 Android 언어는 Kotlin을 사용하였습니다.

     

    1. Firebase와 프로젝트 연결하기

    Firebase를 프로젝트에서 연결하기 위해서 다음과 같은 순서로 진행합니다.

    간단하게 Firebase 연결이 끝납니다.

     

    2. Google 라이브러리 추가하기

    Google Login 구현을 위해 dependency를 추가해줄 필요가 있습니다.

    안드로이드 스튜디오의 모듈에서 다음 순서로 진행합니다.

    1) 마우스 우클릭 후 Open Module Settings

    2) Dependencies 탭으로 이동

    3) +버튼 클릭

    4) Library Dependency 클릭

    이후 play-services-auth 검색 후 com.google.android.gms를 선택하고 OK를 눌러줍니다.

    그렇게 프로젝트에 google 라이브러리의 주입이 완료됩니다.

    3. LoginActivity 생성 및 activity_login UI 수정

       <activity android:name=".LoginActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
    
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
       <activity android:name=".MainActivity"/>

    LoginActivity를 생성하고 Androidmanifest.xml에서 intent-filter를 LoginActivity로 옮겨줍니다.

    이제 activity_login.xml에서 구글 로그인 버튼을 만들어줍니다.

    <!--activity_login.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=".LoginActivity">
    
        <Button
            android:id="@+id/googleSignInBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="구글 로그인"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    4. LoginActivity.kt 작성

    아래는 LoginActivity.kt의 코드입니다.

    class LoginActivity : AppCompatActivity() {
        var auth: FirebaseAuth? = null
        val GOOGLE_REQUEST_CODE = 99
        val TAG = "googleLogin"
        private lateinit var googleSignInClient: GoogleSignInClient
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_login)
            auth = FirebaseAuth.getInstance()
            val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(getString(R.string.default_web_client_id))
                .requestEmail()
                .build()
            googleSignInClient = GoogleSignIn.getClient(this,gso)
            googleSignInBtn.setOnClickListener { 
                signIn()
            }
        }
        private fun signIn() {
            val signInIntent = googleSignInClient.signInIntent
            startActivityForResult(signInIntent, GOOGLE_REQUEST_CODE)
        }
    
        override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
            super.onActivityResult(requestCode, resultCode, data)
    
            // Result returned from launching the Intent from GoogleSignInApi.getSignInIntent(...);
            if (requestCode == GOOGLE_REQUEST_CODE) {
                val task = GoogleSignIn.getSignedInAccountFromIntent(data)
                try {
                    // Google Sign In was successful, authenticate with Firebase
                    val account = task.getResult(ApiException::class.java)!!
                    Log.d(TAG, "firebaseAuthWithGoogle:" + account.id)
                    firebaseAuthWithGoogle(account.idToken!!)
                } catch (e: ApiException) {
                    // Google Sign In failed, update UI appropriately
                    Log.w(TAG, "Google sign in failed", e)
                    Toast.makeText(this, "로그인 실패", Toast.LENGTH_SHORT).show()
                }
            }
        }
        private fun firebaseAuthWithGoogle(idToken: String) {
            val credential = GoogleAuthProvider.getCredential(idToken, null)
            auth?.signInWithCredential(credential)
                ?.addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        // Sign in success, update UI with the signed-in user's information
                        Log.d(TAG, "로그인 성공")
                        val user = auth!!.currentUser
                        loginSuccess()
                    } else {
                        // If sign in fails, display a message to the user.
                        Log.w(TAG, "signInWithCredential:failure", task.exception)
                    }
                }
        }
        private fun loginSuccess(){
            val intent = Intent(this,MainActivity::class.java)
            startActivity(intent)
            finish()
        }
    }

    위 코드를 복사 붙여넣기 하면 R.string.default_web_client_id에 빨간 줄이 생길 것입니다.

    안드로이드 스튜디오의 왼쪽 위에서 Android 보기 상태를 Project 보기 상태로 변경합니다.

    이후 app 폴더의 google-services.json 파일에 들어가 oauth_clientclient_id 값을 복사합니다.

    다시 Project 보기 상태를 Android 보기 상태로 돌립니다.

    default_web_client_id가 아닌 다른 이름으로 지정해줘야 합니다.

    이미 생성된 이름이나, 이를 인식하지 못하여 빨간 줄이 발생하는 상황이기 때문에, 다른 이름으로 동일한 값을 넣는다고 생각하시면 됩니다.

     

    5. SHA-1 인증키 등록

    안드로이드 스튜디오의 오른쪽에 위치한 Gradle탭을 열어줍니다.

    Tasks - android - signingReport를 더블클릭해주면 콘솔 창에 SHA1 인증서 지문이 나옵니다.

    이를 복사해서 Firebase 콘솔에 들어갑니다.

     

    이후 Firebase 콘솔에서 프로젝트 개요 글자 오른쪽의 톱니바퀴 클릭 -> 프로젝트 설정으로 들어갑니다.

    아래로 스크롤 하면 디지털 지문 추가라는 부분이 보입니다. 클릭합니다.

    여기에 복사했던 인증서 지문을 붙여넣습니다.

    6. 인증 방식 설정

    Firebase콘솔에서 Authentication - Sign-in-method로 들어갑니다.

    사용 설정 스위치를 On으로 바꿔주고, 저장을 하면 됩니다.

    실행해보면 성공적으로 구글 로그인을 할 수 있으며, Firebase 콘솔에서 확인할 수 있습니다.

     

    잘 안 되는 분들은 다음 사항들을 점검해보시기 바랍니다.

    • 클라이언트 id를 다른 id로 설정해준 것은 아닌지
    • SHA1 등록은 했는지
    • Sign-In method에서 구글을 사용 가능하게 설정을 했는지

     

    성공적으로 구현하셨다면 좋아요 한 번씩 부탁드립니다 ㅎㅎ

    다음 시간에는 페이스북 로그인을 알아보겠습니다.

    반응형