[Android] Kotlin & Firebase/Firestore 연동(회원가입 및 로그인 구현)

- Kotlin 으로 SNS 안드로이드 앱을 만들 예정입니다. 제일 기본이 되는 회원가입 및 로그인을 Firebase 를 이용하여 구현해보겠습니다.

 

#1  Firebase 연동을 위한 기본 Setting

1 ) Firebase/Firestore database 를 사용하기 위해 안드로이드 스튜디오에서 기본 셋팅을 해줍니다.

 

// build.gradle (:app)
dependencies {
    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.appcompat:appcompat:1.5.1'
    implementation 'com.google.android.material:material:1.7.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

    implementation("androidx.activity:activity-ktx:1.6.1")

    implementation platform('com.google.firebase:firebase-bom:31.0.2')
    implementation 'com.google.firebase:firebase-analytics-ktx'

    implementation 'com.google.firebase:firebase-auth-ktx'
    implementation 'com.google.firebase:firebase-firestore-ktx'
    implementation 'com.google.firebase:firebase-storage-ktx:20.1.0'
}

// build.gradle (:Project)
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.google.gms:google-services:4.3.14'
    }
}

plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

 

 

#2  회원가입 기능 구현

 

1) 기본 셋팅을 마친 후, 먼저 회원가입 기능을 Authentication 을 이용해 구현해보겠습니다. 사용자의 정보를 입력하고 회원가입 버튼을 누르면 로그인 화면으로 넘어가게 하였습니다.

 

- createUserWithEmailAndPassword() 메서드를 이용합니다.

- 성공적으로 생성이 되었을 경우, Intent() 를 이용해 LoginActivity 로 넘어갑니다.

- 각 입력 칸에 null 체크를 해서 입력하지 않고 버튼을 눌렀을 경우의 에러 처리를 해줍니다.

 

private fun doSignUp(userEmail: String, password: String) {
        // 모든 정보를 입력했을 경우에만 회원가입 가능
        if (userEmail.isNotEmpty() && userPw.isNotEmpty() && name.isNotEmpty()) {
            Firebase.auth.createUserWithEmailAndPassword(userEmail, userPw)
                .addOnCompleteListener(this) {
                    if (it.isSuccessful) {
                        Firebase.auth.signInWithEmailAndPassword(userEmail, userPw)
                            .addOnSuccessListener {
                                var map = HashMap<String, Any>()
                                map["image"] = BASIC_IMAGE_URL
                                map["email"] = userEmail
                                map["name"] = name
                                val uid = FirebaseAuth.getInstance().currentUser!!.uid
                                db.collection("profileImages").document(uid)
                                    .set(map)
                            }
                        startActivity(
                            Intent(this, SNSActivity::class.java)
                        )
                        finish()
                    } else {
                        Log.w("LoginActivity", "signUpWithEmail", it.exception)
                        Toast.makeText(this, "비밀번호는 6자 이상이어야 합니다", Toast.LENGTH_SHORT).show()
                    }
                }
        } else {
            Toast.makeText(this, "회원 정보를 입력해주세요!", Toast.LENGTH_SHORT).show()
        }
    }

 

 

2) 회원가입 때 입력한 정보들 중, 이메일과 비밀번호를 제외한 정보들은 Firestore database 에 저장합니다. 예를 들어, 이름, 생년월일, 나이 등과 같은 정보들은 데이터베이스에 저장합니다. 이 경우에는 우선 이름만 입력받았습니다.

 

 

- cloud firestore 을 초기화합니다.

 

db = Firebase.firestore

 

 

- 회원가입 버튼을 누르면 사용자의 이름을 받아서 데이터베이스의 "users" 컬렉션에 추가합니다.

 

val user = hashMapOf (
                "name" to name.toString()
            )

// firestore 에 유저 이름 추가
db.collection("users").document(name.toString())
	.set(user)
	.addOnSuccessListener { documentReference ->
		//Log.d(TAG, "DocumentSnapshot added with ID: ${documentReference.id}")
	}
	.addOnFailureListener { e ->
		Log.w(TAG, "Error adding document", e)
	}

 

 

3) 실행해보면, 다음과 같이 Authentication 에서 계정이 생성되었음을 확인할 수 있습니다.

 

 

 

4) 회원가입 기능을 구현한 전체 코드는 다음과 같습니다.

 

import android.content.ContentValues.TAG
import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.example.team30.databinding.ActivitySignupBinding
import com.google.firebase.auth.ktx.auth
import com.google.firebase.firestore.FirebaseFirestore
import com.google.firebase.firestore.ktx.firestore
import com.google.firebase.ktx.Firebase

class SignUpActivity : AppCompatActivity() {
    private lateinit var binding: ActivitySignupBinding
    lateinit var db: FirebaseFirestore

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

        val name = binding.nameEdit.text
        val email = binding.emailSignUpEdit.text
        val password = binding.pwSignUpEdit.text

        // cloud firestore 초기화
        db = Firebase.firestore

        binding.signUpbtn2.setOnClickListener { // 회원가입 버튼 누르면
            doSignUp(email.toString(), password.toString()) // 회원가입
            // 유저 이름 받아서
            val user = hashMapOf (
                "name" to name.toString()
            )

            // firestore 에 유저 이름 추가
            db.collection("users").document(name.toString())
                .set(user)
                .addOnSuccessListener { documentReference ->
                    //Log.d(TAG, "DocumentSnapshot added with ID: ${documentReference.id}")
                }
                .addOnFailureListener { e ->
                    Log.w(TAG, "Error adding document", e)
                }
        }
    }

    private fun doSignUp(userEmail: String, password: String) {
        // 모든 정보를 입력했을 경우에만 회원가입 가능
        if (userEmail.isNotEmpty() && userPw.isNotEmpty() && name.isNotEmpty()) {
            Firebase.auth.createUserWithEmailAndPassword(userEmail, userPw)
                .addOnCompleteListener(this) {
                    if (it.isSuccessful) {
                        Firebase.auth.signInWithEmailAndPassword(userEmail, userPw)
                            .addOnSuccessListener {
                                var map = HashMap<String, Any>()
                                map["image"] = BASIC_IMAGE_URL
                                map["email"] = userEmail
                                map["name"] = name
                                val uid = FirebaseAuth.getInstance().currentUser!!.uid
                                db.collection("profileImages").document(uid)
                                    .set(map)
                            }
                        startActivity(
                            Intent(this, SNSActivity::class.java)
                        )
                        finish()
                    } else {
                        Log.w("LoginActivity", "signUpWithEmail", it.exception)
                        Toast.makeText(this, "비밀번호는 6자 이상이어야 합니다", Toast.LENGTH_SHORT).show()
                    }
                }
        } else {
            Toast.makeText(this, "회원 정보를 입력해주세요!", Toast.LENGTH_SHORT).show()
        }
    }
}

 

 

#3  로그인 기능 구현

 

 

로그인 기능은 signInWithEmailAndPassword() 메서드를 활용해서 구현합니다. 로그인도 마찬가지로 이메일과 비밀번호를 입력하지 않고 로그인 버튼을 눌렀을 경우의 에러 처리를 해줍니다.

 

// 모든 정보를 입력했을 때에만 로그인 가능
if (userEmail.isNotEmpty() && userPw.isNotEmpty()) {
    Log.d("로그인 정보 ", userEmail)
    Firebase.auth.signInWithEmailAndPassword(userEmail, userPw)
        .addOnCompleteListener(this) {
            if (it.isSuccessful) {
                startActivity(
                    Intent(this, SNSActivity::class.java)
                )
                finish()
            } else {
                Log.w("LoginActivity", "signInWithEmail", it.exception)
                //Toast.makeText(this, "입력한 정보를 다시 확인해주세요", Toast.LENGTH_SHORT).show()
                alertDialog.show()
            }
        }
} else {
    Toast.makeText(this, "로그인 정보를 입력해주세요!", Toast.LENGTH_SHORT).show()
}

 

 

이렇게 Kotlin으로 Firebase/Firestore database 를 연동하여 회원가입 및 로그인 기능을 구현해보았습니다. 이어서 회원가입에서 이메일을 입력했을 때 이메일 형식을 검사하는 기능을 추가해보겠습니다.