[Android]Firebase로 채팅 앱 만들기(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:background="#3660DC">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent">

        <EditText
            android:id="@+id/edt_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="Email"
            android:inputType="textPersonName"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/edt_password"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <EditText
            android:id="@+id/edt_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="비밀번호"
            android:inputType="textPersonName|textPassword"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/btn_sign_in"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/edt_email" />

        <Button
            android:id="@+id/btn_signup"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textColor="@color/white"
            app:backgroundTint="#3660DC"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/edt_password"
            app:layout_constraintStart_toStartOf="@+id/edt_password"
            app:layout_constraintTop_toBottomOf="@id/btn_sign_in" />

        <Button
            android:id="@+id/btn_sign_in"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="로그인"
            android:textColor="@color/white"
            app:backgroundTint="#3660DC"
            app:layout_constraintBottom_toTopOf="@id/btn_signup"
            app:layout_constraintEnd_toEndOf="@+id/edt_password"
            app:layout_constraintStart_toStartOf="@+id/edt_password"
            app:layout_constraintTop_toBottomOf="@id/edt_password" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ChatingApp"
        android:textColor="#FFFFFF"
        android:textSize="60dp"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

로그인 레이아웃 xml은 위와 같다.

package com.miso.chatapplication

import android.content.Context
import android.content.Intent
import android.content.SharedPreferences
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.auth.api.signin.GoogleSignIn
import com.google.android.gms.auth.api.signin.GoogleSignInAccount
import com.google.android.gms.auth.api.signin.GoogleSignInClient
import com.google.android.gms.auth.api.signin.GoogleSignInOptions
import com.google.android.gms.common.SignInButton
import com.google.android.gms.common.api.ApiException
import com.google.android.gms.tasks.OnCompleteListener
import com.google.firebase.auth.AuthResult
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.FirebaseUser
import com.google.firebase.auth.GoogleAuthProvider
import com.miso.chatapplication.databinding.ActivityLoginBinding
import com.miso.chatapplication.main.MainActivity

class LoginActivity : AppCompatActivity() {
    lateinit var auth: FirebaseAuth
    lateinit var btn_signUp: Button
    lateinit var btn_signIn: Button
    lateinit var edt_email: EditText
    lateinit var edt_password: EditText
    lateinit var binding: ActivityLoginBinding
    lateinit var preference: SharedPreferences
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initProperty()
        initializeView()
        initializeListener()
    }

    fun initProperty() {    //초기 변수 세팅
        auth = FirebaseAuth.getInstance()     //Firebase 계정 관련 변수
        preference = getSharedPreferences("setting", MODE_PRIVATE)    //로그인 정보 저장용 SharedPreference
    }

    fun initializeView() {   //뷰 초기화
        btn_signUp = binding.btnSignup
        btn_signIn = binding.btnSignIn
        edt_email = binding.edtEmail
        edt_password = binding.edtPassword

        edt_email.setText(preference.getString("email", ""))     //마지막으로 로그인 한 이메일 세팅
        edt_password.setText(preference.getString("password", ""))   //마지막으로 로그인 한 패스워드 세팅
    }

    fun initializeListener() {        //버튼 클릭 시 리스너 세팅
        btn_signIn.setOnClickListener()
        {
            signInWithEmailAndPassword()
        }
        btn_signUp.setOnClickListener()
        {
            startActivity(Intent(this, SignUpActivity::class.java))
        }
    }

    fun signInWithEmailAndPassword() {
        if (edt_email.text.toString().isNullOrBlank() &&   //아이디 또는 패스워드가 입력되었는 지 유효성 검사
            edt_password.text.toString().isNullOrBlank())
            Toast.makeText(this, "아이디 또는 패스워드를 입력해주세요", Toast.LENGTH_SHORT).show()
        else {
            auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }
        }
    }

    private fun updateUI(user: FirebaseUser?) { //로그인 성공 시 화면 이동
        if (user != null) {
            try {
                var preference = getSharedPreferences("setting", MODE_PRIVATE).edit()    //이메일 및 패스워드 저장
                preference.putString("email", edt_email.text.toString())
                preference.putString("password", edt_password.text.toString())
                preference.apply()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent)
                finish()
            } catch (e: Exception) {
                e.printStackTrace()
                Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

로그인 액티비티의 전체 코드는 위와 같다.

fun signInWithEmailAndPassword() {
        if (edt_email.text.toString().isNullOrBlank() &&   //아이디 또는 패스워드가 입력되었는 지 유효성 검사
            edt_password.text.toString().isNullOrBlank())
            Toast.makeText(this, "아이디 또는 패스워드를 입력해주세요", Toast.LENGTH_SHORT).show()
        else {
            auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }
        }
    }

로그인 버튼을 누를 시 실행되는 로그인 요청 코드이다.

이전 회원가입과 같이 firebase authentification에 접근하기 위하여

auth = FirebaseAuth.getInstance()

를 사용하여 auth 변수를 초기화 해준후,

auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }

위 함수를 사용하여 로그인을 요청한다.

회원가입 코드와 마찬가지로 task.isSuccessful로 성공 여부를 구분하며,

성공 시 다음 화면으로 진입하게 해주는 코드를 넣으면 된다.

private fun updateUI(user: FirebaseUser?) { //로그인 성공 시 화면 이동
        if (user != null) {
            try {
                var preference = getSharedPreferences("setting", MODE_PRIVATE).edit()    //이메일 및 패스워드 저장
                preference.putString("email", edt_email.text.toString())
                preference.putString("password", edt_password.text.toString())
                preference.apply()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent)
                finish()
            } catch (e: Exception) {
                e.printStackTrace()
                Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
            }
        }
    }

나 같은 경우 채팅방을 보여줄 메인화면에서 사용할 주요 변수를 SharedPreference를 사용하여 저장하고,이후 이동하는 다음 액티비티에서 꺼내쓸 수 있게 하였다.

완성화면

참조

https://m.blog.naver.com/zoown13/222094002924https://cionman.tistory.com/72https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=traeumen927&logNo=221493556497https://lasbe.tistory.com/19