Kotlin, FireBase 채팅어플 만들기 -2- [Login]

Kotlin, FireBase 채팅어플 만들기 -1- [Splash] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -2- [Login] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -3- [Sign Up] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -4- [Bottom Navigation] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -5- [친구창_fragment] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -6- [채팅 리스트_fragment] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -7- [프로필 변경_fragment] (tistory.com)

Kotlin, FireBase 채팅어플 만들기 -8- [채팅창_activity] (tistory.com)

 

[전체 코드 깃허브 주소]

LasBe-code/LasbeTalk (github.com)

 

[참고]

하울의 코딩 채널 - YouTube

GitHub - LasBe-code/LasbeTalk

---

[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"
    android:background="#FFFFFF">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/loginground"
        app:layout_constraintBottom_toTopOf="@id/con2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/con2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageView4">

        <EditText
            android:id="@+id/et_login_id"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="50dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:drawableLeft="@drawable/drawable_email"
            android:drawablePadding="10dp"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:paddingLeft="8dp"
            android:textColor="#000000"
            android:textColorHint="#888888"
            android:textSize="30sp"
            app:layout_constraintBottom_toTopOf="@+id/et_login_password"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/et_login_password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:drawableLeft="@drawable/drawable_password"
            android:drawablePadding="10dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:paddingLeft="8dp"
            android:textColor="#000000"
            android:textColorHint="#888888"
            android:textSize="30sp"
            app:layout_constraintBottom_toTopOf="@+id/profile_button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/et_login_id" />

        <Button
            android:id="@+id/profile_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="Login"
            android:textColor="#FFFFFF"
            app:backgroundTint="#FFFF9800"
            app:layout_constraintBottom_toTopOf="@+id/btn_registration"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/et_login_password" />

        <Button
            android:id="@+id/btn_registration"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="50dp"
            android:text="Sign Up"
            android:textColor="#FFFFFF"
            app:backgroundTint="#FFFF9800"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/profile_button" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

 

ConstraintLayout으로 만들어주었다.

 

하단의 텍스트뷰들과 버튼들을 레이아웃으로 한번 더 묶어주어 상단의 이미지뷰와 비율을 맞춰주었다.

 

android:drawableLeft="@drawable/drawable_email"
android:drawablePadding="10dp"

drawableLeft를 사용해서 EditText 왼쪽 부분에 이미지를 삽입해 완성도를 높여주었다.

 

 

---

반응형

---

[액티비티 or 프래그먼트]

---

private lateinit var auth: FirebaseAuth

class LoginActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
        auth = Firebase.auth

        val email = findViewById<EditText>(R.id.et_login_id)
        val password = findViewById<EditText>(R.id.et_login_password)

        val btn_login = findViewById<Button>(R.id.profile_button)

        btn_login.setOnClickListener{
            if(email.text.isEmpty() && password.text.isEmpty()) {
                Toast.makeText(this, "아이디와 비밀번호를 제대로 입력해주세요.", Toast.LENGTH_SHORT).show()
                Log.d("Email", "$email, $password")
                email.setText("")
                password.setText("")
            }
            else{
                signIn(email.text.toString(), password.text.toString())
            }
        }

        //회원가입창 인텐트
        val btn_registration = findViewById<Button>(R.id.btn_registration)
        btn_registration.setOnClickListener {
            val intent = Intent(this, RegistrationActivity::class.java)
            startActivity(intent)
        }
    }
    private fun signIn(email: String, password: String) {
        // [START sign_in_with_email]
        val intentMain = Intent(this, MainActivity::class.java)

        auth.signInWithEmailAndPassword(email, password)
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                        startActivity(intentMain)
                    } else {
                        // If sign in fails, display a message to the user.
                        Toast.makeText(this, "정확한 아이디와 비밀번호를 입력해주세요.", Toast.LENGTH_SHORT).show()
                        Log.d("로그인", "실패")
                        updateUI(null)
                    }
                }
        // [END sign_in_with_email]
    }

    private fun updateUI(user: FirebaseUser?) {

    }

    public override fun onStart() {
        super.onStart()
        // Check if user is signed in (non-null) and update UI accordingly.
        val currentUser = auth.currentUser
        if(currentUser != null){
            reload();
        }
    }

    private fun reload() {

    }
}

 

대부분의 참조할 코드들이 자바로 제작되었거나 버전이 달라 꽤 애를 먹었으나

파이어베이스 공식문서를 참고하니 생각보다 쉽게 작동하였다.

 

Android 프로젝트에 Firebase 추가 (google.com)

Android 프로젝트에 Firebase 추가

 

Firebase Auth의 signInWithEmailAndPassword를 이용하여 등록된 계정을 로그인시켜준다.

로그인 성공 콜백을 받을 경우 메인 액티비티로 이동한다.

---

[작동]

---

---

[아쉬운 점]

---

• 중구난방 권한 처리
• 기준점 없는 XML id
• 회원가입 액티비티를 여러 번 왔다 갔다 할 경우 스택에 쌓인 액티비티 때문에 메인 액티비티에서 뒤로 가기 시, 로그인 액티비티로     이동하는 문제
• 구글 로그인도 추가해보고 싶다