전에 준비하던 포트폴리오를 다듬어 CS지식과 안드로이드 개념들을 활용하여 완성된 Todo 프로젝트를 진행하고 있습니다.
Firebase의 개념 auth를 이용한 로그인 기능, 회원가입 기능 구현
Firebase 란?
기존의 모바일 서버를 개발하기 위해서는 인증, 데이터베이스, 푸시 알람, 스토리지, API등 모든 것을 개발해야 했습니다. 모바일 서버를 구성할려면 리눅스 설치, FTP 설치, 데이터베이스 구축, 노드 서버 또는 스프링 서버를 올리고, 도메인을 구입하는 등 어플리케이션을 개발할려면 시간도 많이 소요되고 불편합니다. 이러한 시간낭비를 최소화하고자 FireBase를 사용합니다.
장점
FireBase는 프로젝트 구축 시 자동으로 만들어주고 또한 서버를 구축하기 위해 리눅스 명령어가 필요가 없으며 도메인을 구입할 필요도 없고 서버를 구축할 필요도 없어 편리할 수 있습니다.
또한
1)인증 시스템을 지원해 로그인 기능을 구현할 수 있습니다. 로그인 구현은 인증된 사용자인지 확인하고 세션을 통한 데이터베이스, 저장소에 접근하여 문제가 없는지 확인하는 보안처리, 비밀번호 찾기, 아이디 찾기, 비밀번호 바꾸기, 이메일 인증 등 복잡하지만 Firebase는 모든 것을 지원해 구현을 할 수 있다는 장점이 있습니다.
2)Firebase는 NoSQl 기반의 3세대 데이터베이스 입니다. FireBase는 RTSP(Real Time Stream Protocol)방식의 데이터베이스를 지원해 실시간으로 데이터를 전송하는 것이 가능합니다. 이것을 통해 소켓통신의 서버를 만들어 통신하는 것보다 코드의 양도 최소화가 가능하고 원하는 구성으로 만들 수 있습니다.
FireBase Auth
FireBase Auth는 회원과 로그인을 위한 인증과 관련된 서비스로
1)Email/Password을 통한 회원가입방식
2)핸드폰 번호 인증 방식
3)OAuth2를 통한 SNS 인증 또는 타서비스 인증
3개의 회원가입 방식이 있습니다. 저는 Email/Password을 이용한 회원가입/ 로그인 기능을 구현할 것입니다.
AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" build.gradle(app)
implementation 'com.google.firebase:firebase-analytics-ktx'
implementation 'com.google.firebase:firebase-database-ktx:20.0.4'
implementation 'com.google.firebase:firebase-auth-ktx'xml과 kt 코드
메인UI
activity_main.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="@color/white"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/aplication_name"
android:layout_width="300dp"
android:layout_height="40dp"
android:layout_marginTop="50dp"
android:text="Todo list"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="30dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textStyle="normal">
</TextView>
<EditText
android:id="@+id/user_id"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:background="@drawable/edit_custom"
android:hint="아이디를 입력해주세요"
android:maxLength="50"
android:textColor="@color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/aplication_name">
</EditText>
<EditText
android:id="@+id/user_pw"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginTop="15dp"
android:background="@drawable/edit_custom"
android:hint="비밀번호를 입력해주세요"
android:maxLength="50"
android:textColor="@color/black"
android:inputType="textPassword"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/user_id">
</EditText>
<Button
android:id="@+id/create_btn"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginLeft="70dp"
android:layout_marginTop="60dp"
android:background="@drawable/button_custom"
android:text="회원가입"
android:textColor="@color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/user_pw">
</Button>
<Button
android:id="@+id/login_btn"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="60dp"
android:background="@drawable/button_custom"
android:text="로그인"
app:layout_constraintLeft_toRightOf="@id/create_btn"
app:layout_constraintTop_toBottomOf="@id/user_pw">
</Button>
</androidx.constraintlayout.widget.ConstraintLayout>회원가입 UI
create.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<TextView
android:layout_width="300dp"
android:layout_height="50dp"
android:text="회원가입"
android:textSize="30dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textAlignment="center"
android:layout_marginTop="50dp"
android:id="@+id/create_name"
android:textColor="@color/black">
</TextView>
<EditText
android:layout_width="300dp"
android:layout_height="50dp"
android:background="@drawable/edit_custom"
app:layout_constraintTop_toBottomOf="@id/create_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="100dp"
android:hint="이메일을 입력해주세요"
android:textColorHint="@color/black"
android:id="@+id/email">
</EditText>
<EditText
android:layout_width="300dp"
android:layout_height="50dp"
android:background="@drawable/edit_custom"
app:layout_constraintTop_toBottomOf="@id/email"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="20dp"
android:hint="비밀번호를 입력해주세요"
android:textColorHint="@color/black"
android:id="@+id/password"
android:inputType="textPassword">
</EditText>
<Button
android:id="@+id/create_btn"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginLeft="70dp"
android:layout_marginTop="50dp"
android:background="@drawable/button_custom"
android:text="회원가입"
android:textColor="@color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/password">
</Button>
</androidx.constraintlayout.widget.ConstraintLayout>로그인 후 UI
login.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="이동"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:id="@+id/text">
</TextView>
<Button
android:layout_height="45dp"
android:layout_width="80dp"
android:id="@+id/back_btn"
app:layout_constraintTop_toBottomOf="@+id/text"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="40dp"
android:text="버튼">
</Button>
</androidx.constraintlayout.widget.ConstraintLayout>MainActivity.kt
package com.example.todo_project
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import com.example.todo_project.databinding.ActivityMainBinding
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.FirebaseDatabase
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.database.ktx.getValue
import com.google.firebase.ktx.Firebase
import kotlinx.coroutines.newFixedThreadPoolContext
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private var db_data = ArrayList<String>()
private lateinit var auth: FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
var id: EditText = binding.userId
var pw: EditText = binding.userPw
//회원가입 버튼
val create: Button = binding.createBtn
//로그인 폼
val login: Button = binding.loginBtn
//Firebase 연결
auth = Firebase.auth
create.setOnClickListener() {
val intent = Intent(this, Create::class.java)
startActivity(intent)
}
login.setOnClickListener() {
login(id.text.toString(), pw.text.toString())
}
}
private fun login(id: String, pw: String) {
if (id.isNullOrEmpty() || pw.isNullOrEmpty()) {
Toast.makeText(this, "빈 값을 입력하셨습니다.", Toast.LENGTH_SHORT).show()
} else {
auth.signInWithEmailAndPassword(id, pw)
.addOnCompleteListener { task ->
if (task.isSuccessful) {
Toast.makeText(this, "로그인에 성공했습니다!", Toast.LENGTH_SHORT).show()
val intent = Intent(this, Login::class.java)
startActivity(intent)
}
else {
Toast.makeText(this, "아이디와 비밀번호를 확인해주세요", Toast.LENGTH_SHORT).show()
}
}
}
}
}Create.kt
package com.example.todo_project
import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.example.todo_project.databinding.CreateBinding
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.FirebaseDatabase
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase
class Create : AppCompatActivity() {
//lateinit 초기화 전 변수 설정
private lateinit var create: Button
private lateinit var email: EditText
private lateinit var pw: EditText
private lateinit var auth : FirebaseAuth
private lateinit var binding: CreateBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//뷰 바인딩
binding = CreateBinding.inflate(layoutInflater)
setContentView(binding.root)
//초기화
create = binding.createBtn
email = binding.email
pw= binding.password
create.setOnClickListener() {
var email = email.text.toString()
var pw = pw.text.toString()
//firebase 연결
auth = Firebase.auth
init(email, pw)
}
}
//
private fun init(email: String, pw: String){
if(email.isNullOrEmpty() || pw.isNullOrEmpty()) {
Toast.makeText(this, "이메일 혹인 비밀번호를 입력해주세요", Toast.LENGTH_SHORT).show()
}
else {
auth.createUserWithEmailAndPassword(email,pw).addOnCompleteListener { task ->
if (task.isSuccessful) {
Toast.makeText(this, "회원가입 완료", Toast.LENGTH_SHORT).show()
finish()
} else {
Toast.makeText(this, "이메일 형식인지 확인 또는 비밀번호 6자리이상 입력해주세요!", Toast.LENGTH_SHORT).show()
}
}
}
}
}Login.kt
package com.example.todo_project
import android.content.Intent
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.example.todo_project.databinding.LoginBinding
class Login : AppCompatActivity() {
private lateinit var login: Button
private lateinit var binding: LoginBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = LoginBinding.inflate(layoutInflater)
setContentView(binding.root)
login = binding.backBtn
login.setOnClickListener(View.OnClickListener {
Toast.makeText(this, "뒤로 이동", Toast.LENGTH_LONG).show()
var intent = Intent(applicationContext, MainActivity::class.java)
startActivity(intent)
})
}
}main UI
회원가입 UI
FireBase auth
로그인 화면
to be good programmer