Andorid
[Android]Firebase로 채팅 앱 만들기(2)
CoBool
2022. 3. 31. 14:50
지난 페이지에서는 안드로이드와 Firebase 간의 연동 설정을 끝냈으니,
이젠 회원가입 페이지를 만들어보도록 하자.
<?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_opponent_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="이름"
android:inputType="textPersonName"
android:textColor="@color/black"
android:textColorHint="#B8B8B8"
app:layout_constraintBottom_toTopOf="@id/edt_email"
app:layout_constraㅁintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<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_toBottomOf="@id/edt_opponent_name"
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_signup"
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/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>우선 회원가입에 쓸 레이아웃 페이지를 만들어준다.
완성한 모습은 위와 같다.
이제 회원가입을 진행할 Activity를 만들어주자.
package com.miso.chatapplication
import android.content.Intent
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.GoogleSignInClient
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.database.FirebaseDatabase
import com.miso.chatapplication.databinding.ActivitySignupBinding
import com.miso.chatapplication.main.MainActivity
import com.miso.chatapplication.model.User
class SignUpActivity : AppCompatActivity() {
lateinit var auth: FirebaseAuth
lateinit var btn_signUp: Button
lateinit var edt_email: EditText
lateinit var edt_password: EditText
lateinit var edt_name: EditText
lateinit var binding: ActivitySignupBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivitySignupBinding.inflate(layoutInflater)
setContentView(binding.root)
initializeView()
initializeListener()
}
fun initializeView() { //뷰 초기화
auth = FirebaseAuth.getInstance()
btn_signUp = binding.btnSignup
edt_email = binding.edtEmail
edt_password = binding.edtPassword
edt_name = binding.edtOpponentName
}
fun initializeListener() { //버튼 클릭 시 리스너 초기화
btn_signUp.setOnClickListener()
{
signUp()
}
}
fun signUp() { //회원 가입 실행
var email = edt_email.text.toString() //각 입력란 값 String으로 변환
var password = edt_password.text.toString()
var name = edt_name.text.toString()
auth.createUserWithEmailAndPassword(email, password) //FirebaseAuth에 회원가입 성공 시
.addOnCompleteListener(this) { task ->
if (task.isSuccessful) { //회원 가입 성공 시
try {
val user = auth.currentUser
val userId = user?.uid
val userIdSt = userId.toString()
FirebaseDatabase.getInstance().getReference("User").child("users")
.child(userId.toString()).setValue(User(name, userIdSt, email)) //Firebase RealtimeDatabase에 User 정보 ㅊ추가
Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
Log.e("UserId", "$userId")
startActivity(Intent(this@SignUpActivity, MainActivity::class.java))
} catch (e: Exception) {
e.printStackTrace()
Toast.makeText(this, "화면 이동 중 문제가 발생하였습니다.", Toast.LENGTH_SHORT).show()
}
} else
Toast.makeText(this, "회원가입에 실패하였습니다.", Toast.LENGTH_SHORT).show()
}
}
}
전체 코드는 위와 같다.
이메일 및 패스워드를 사용한 로그인을 구현하려면 서버가 필수적인데,
Firebase Authentification에서는 이러한 인증 절차를 간편하게 대신 수행해준다.
lateinit var auth:FirebaseAuth
auth = FirebaseAuth.getInstance()
위 코드를 통하여 FirebaseAuth 객체를 초기화해주면,
이후 인증 절차를 진행할 수 있다.
fun signUp() { //회원 가입 실행
var email = edt_email.text.toString() //각 입력란 값 String으로 변환
var password = edt_password.text.toString()
var name = edt_name.text.toString()
auth.createUserWithEmailAndPassword(email, password) //FirebaseAuth에 회원가입 성공 시
.addOnCompleteListener(this) { task ->
if (task.isSuccessful) { //회원 가입 성공 시
try {
val user = auth.currentUser
val userId = user?.uid
val userIdSt = userId.toString()
FirebaseDatabase.getInstance().getReference("User").child("users")
.child(userId.toString()).setValue(User(name, userIdSt, email)) //Firebase RealtimeDatabase에 User 정보 ㅊ추가
Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
Log.e("UserId", "$userId")
startActivity(Intent(this@SignUpActivity, MainActivity::class.java))
} catch (e: Exception) {
e.printStackTrace()
Toast.makeText(this, "화면 이동 중 문제가 발생하였습니다.", Toast.LENGTH_SHORT).show()
}
} else
Toast.makeText(this, "회원가입에 실패하였습니다.", Toast.LENGTH_SHORT).show()
}
}
난 회원가입을 진행하기 위해 위와 같은 함수를 작성했다.
우선 각 이름,이메일,패스워드에 해당하는 입력란의 텍스트들을 가져오고,
createUserWithEmailAndPassword(email, password)라는 함수를 통해
회원가입 요청을 진행했다.단순히 이 함수만으로도 회원가입은 가능하겠지만,
요청이 성공했는지에 대한 여부도 확인해야 하므로,
.addOnCompleteListener(this) { task ->
if(task.isSuccesful())
...
else
...
}
위와 같은 리스너도 추가해줘야 한다.
task.isSuccesful()이 참이면, 회원등록에 성공했다는 뜻이고,그렇지 않으면 실패했다는 뜻이다.
val user = auth.currentUser
val userId = user?.uid
val userIdSt = userId.toString()
FirebaseDatabase.getInstance().getReference("User").child("users")
.child(userId.toString()).setValue(User(name, userIdSt, email)) //Firebase RealtimeDatabase에 User 정보 ㅊ추가
Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
Log.e("UserId", "$userId")
startActivity(Intent(this@SignUpActivity, MainActivity::class.java))
회원가입에 성공했으면,해당 회원 정보를 가져와 데이터베이스에도 함께 등록해줘야 한다.
FirebaseDatabase.getInstance().getReference("User").child("users")
.child(userId.toString()).setValue(User(name, userIdSt, email))
FirebaseDatabase.getInstance()를 통해 ReatimeDatabase에 접근하고,
getReference(String)에 자신이 접근하고 싶은 노드 이름을 입력하고,
.child(String)에 자식 이름을 넣어 자식에 접근한다.
나같은 경우 users라는 자식에 내가 만든 회원의 userId를 넣어주었고,값으로 사용자 정보를 저장하는 객체인 User 클래스를 사용하여 넣어주었다.
package com.miso.chatapplication.model
import java.io.Serializable
data class User(val name:String?="",
val uid:String?="",
val email:String?=""):Serializable {
}
User의 내용은 위와 같다.
회원가입이 위와 같은 절차를 이루어 성공하면, MainActivity로 이동하게 해두었다.
참조
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