[Clone] 인스타그램 클론 프로젝트(1) - 로그인화면, Firebase 연결

minnie·2022년 2월 23일
0

클론프로젝트

목록 보기
1/8
post-thumbnail

인스타그램 클론 프로젝트

클론 프로젝트란 이미 개발되어 있는 서비스를 주제 삼아 서비스의 기존 스택이나 새로운 스택을 적용하여 나만의 서비스로 복제하듯 개발해보는 것을 말한다. 이미 개발되어 있는 서비스를 통해 개발에만 집중할 수 있다는 장점이 있다.

인프런을 찾아보다가 무료로 인스타그램 클론 프로젝트에 대한 강의가 있는 것을 보고 바로 수강하기로 했다.

https://www.inflearn.com/course/%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C

1강 로그인화면 만들기


1강은 로그인 화면을 구성하는 작업이다. 강의에서는 RelativeLayout을 사용하였지만 constraintlayout을 사용하였다. 화면 구성을 하고 맨 처음 시작화면을 LoginActivity 화면으로 하기 위해서 AndroidMainfest에서 기존의 MainActivity에 있었던 intent-filter를 새로 생성한 LoginActivity쪽으로 옮겨주었다.

2강 파이어베이스에 연결하기

1. 파이어베이스와 앱 연결하기

💥Firebase와 앱과 연결하는 부분은 아래 포스트에 별도로 업로드 하였다.💥
https://velog.io/@minnie_dev/Clone-Firebase

2. 인증 관련 라이브러리 객체 생성

var auth: FirebaseAuth? = null
auth = FirebaseAuth.getInstance()
    

3. FirebaseAuth 기능을 통한 회원가입/로그인

명칭기능
createUserWithEmailAndPassword회원가입
signlnWithEmailAndPassword로그인
sendEmailVerification회원 가입한 이메일 유효 확인
updateEmail회원 가입한 아이디 이메일 변경
updatePassword회원 가입한 아이디 패스워드 변경
sendPasswordResetEmail회원 가입한 비밀번호 재설정
delete회원 가입한 아이디 삭제
reauthenticate아이디 재 인증

FirebaseAuth에는 다양한 기능들이 있다. 그 중에서 회원가입 기능과 로그인 기능을 사용해보았다. 빈칸에 이메일과 비밀번호를 적고 만약 기존에 없었던 이메일이라면 createUserWithEmailAndPassword를 통해 회원가입을 하게 되고, 있었던 이메일이라면 signInWithEmailAndPassword를 통해 로그인을 하게된다.

private fun signInAndSignUp() {
	auth?.createUserWithEmailAndPassword(
		binding.emailEdittext.text.toString(),
		binding.passwordEdittext.text.toString()
        )?.addOnCompleteListener { task ->
        	when {
            	task.isSuccessful -> { // id 생성 성공
                	moveMainPage(task.result?.user) }
                else -> { // 회원가입도 아니고 에러도 아니기 때문에 로그인 성공
                	signInEmail() }
            }
       }
}

private fun signInEmail() {
	auth?.signInWithEmailAndPassword(
    	binding.emailEdittext.text.toString(),
        binding.passwordEdittext.text.toString()
    )?.addOnCompleteListener { task ->
                if (task.isSuccessful) { //로그인 성공
                    moveMainPage(task.result?.user)
                } else { //로그인 실패
                    Toast.makeText(this,task.exception?.message, Toast.LENGTH_LONG).show()
                }
            }
    }

4. 회원가입 또는 로그인에 성공하면 화면 전환

user가 null이 아닐 때 화면을 전환할 수 있도록한다.

private fun moveMainPage(user:FirebaseUser?){
	if(user!=null)
		startActivity(Intent(this,MainActivity::class.java))
}

❌ 처음에 임시로 로그인을 하였을 때 다음과 같은 오류가 발생하고 계정이 생성되지 않았다.

Ignoring header X-Firebase-Locale because its value was null.

알고보니 비밀번호를 너무 짧게 설정해서 뜬 오류였다. 비밀번호를 길게하여 다시 생성해보니 정상적으로 동작하는 것을 확인할 수 있었다.

system ui isn't responding

에뮬레이터로 실행하다보니 아래와 같은 오류가 종종 발생하였다. 아래 링크를 통해 문제를 해결할 수 있었다.

https://mmol.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-System-UI-isnt-responding-100-%ED%95%B4%EA%B2%B0%EB%B2%95

profile
Android Developer

0개의 댓글