APP : (최신버전!) 초보자도 할 수 있는 Firebase와 Android Studio 연동하여 로그인, 회원가입 어플 만들기! 🚀
안녕하세요 안드로이드 개발하려는 여러분!
오늘은 Firebase를 활용하여 안드로이드 스튜디오에서
회원가입을 하고 그 정보로 로그인을 하는 과정을 자세히 알아보도록 하겠습니다.
초보자분들도 걱정 마시고 천천히 따라오세요! 🎉
일단 제가 하고 있는 프로젝트는 홀로 여행하는 사람들을 위한 어플리케이션을 만들고 있습니다!
main app developer 역할을 맡으면서 제일 먼저 마주한 부분이 랜딩페이지로 로그인과 회원가입을 하는 부분이였습니다.
그리고 다녀온 관광지들을 공유하는 기능이 있는 데 이때 회원가입과 로그인하는 기능이 필요합니다.
저는 안드로이드 스튜디오를 아예! 처음으로! 독학으로! 만들어서 이 부분에 대해서 시행착오를 많이 겪었습니다.
그래서 아주 기본적인 초보자도 해보실 수 있게 로그인과 회원가입하는 어플을 만드는 법을 소개해드리겠습니다!😁
목차는 아래와 같습니다.
1. Firebase를 선택한 이유
2. 안드로이드 스튜디오 들어가기
3. Firebase 연동하기
4. 로그인과 회원가입 화면 만들기
5. 가상 에뮬레이터로 실행해보기
Android studio에서 Kotlin(코틀린) 언어를 사용하였습니다!
1. Firebase를 선택한 이유 🖐
일단 왜 데이터베이스를 Firebase로 선택하게 되었냐면!
- 실시간 데이터베이스: Firebase는 실시간 데이터베이스를 제공하여 실시간으로 데이터의 동기화를 지원합니다. 이는 채팅 앱, 실시간 업데이트 등과 같은 기능을 구현할 때 유용합니다.
- 인증 서비스: Firebase는 사용자 관리와 관련된 강력한 기능을 제공합니다. 이를 통해 이메일/비밀번호, 소셜 로그인 (구글, 페이스북, 트위터 등), 전화번호 인증 등 다양한 인증 방식을 사용할 수 있습니다.
- 무료 플랜: Firebase는 기본적인 기능들을 사용하는 데에 대부분 무료로 제공됩니다. 따라서 작은 규모의 프로젝트나 개발 초기 단계에서 비용을 절약할 수 있습니다.
- 커뮤니티 및 문서화: Firebase는 활발한 개발자 커뮤니티와 풍부한 문서를 가지고 있어서 문제가 발생했을 때 도움을 받기가 쉽습니다.
위와 같은 장점들이 아주 많기 때문입니다! 그리고 안드로이드 스튜디오는 Firebase와 연동하기 쉽게 되어있습니다!
2. 안드로이드 스튜디오 들어가기 🖐
안드로이드 스튜디오를 들어오시면 제일 처음으로 볼 수 있는 화면입니다!
이미 제가 시행착오를 겪으면서 만든 프로젝트들이 보이는데요....😆
새로운 프로젝트로 로그인과 회원가입을 할 예정이기에 상단에 New Project를 눌러주세요!
그럼 프로젝트에 어떤 화면을 쓸 것인가 고르는 화면이 나옵니다.
이때 Empty View Activity를 누르고 Next를 눌러주세요.
무조건!!!!!! Empty View Activity입니다. Empty Activity 아닙니다!😂
Activity를 선택하고 나면 전체적인 프로젝트의 이름을 설정할 수 있는데 기본적으로 My application이라고 바로 나타납니다. 로그인할 프로젝트이므로 저는 MyLogin이라고 지어줬습니다. 그리고 Finish를 눌러줍니다.
오른쪽 아래 동기화가 시작하는 진행바가 보일 것입니다.
초반에 ❗아무 화면도❗ 왼쪽에 ❗ 아무 목록 ❗ 도 안 뜨는 것에 놀라지 마세요!
시간을 갖고 기다리시면 동기화가 다 진행되고 나서야 위 사진과 같이 나타날 것입니다!
3. Firebase 연동하기 🖐
자 이제 회원가입에 저장된 정보로 로그인을 하여 일치하면 다음화면으로 넘어갈 수 있도록 Firebase를 연동하겠습니다!
저랑 화면이 똑같으신 분들은 왼쪽 위 쌓여 있는 아이콘의 목록을 누르시고 Tools → Firebase를 눌러줍니다.
화면이 다르시다면 상단에 그냥 Tools가 보일 것입니다. 똑같이 Tools → Firebase를 눌러줍니다.
그럼 오른쪽에 Firebase에 관련된 목록들이 나타날 것입니다.
여기에서 Authentication을 누르시면 또 목록들이 나올 것입니다.
Firebase는 페이스북 아이디나 구글 아이디로 로그인을 할 수 있습니다!
제 프로젝트에서는 닉네임이나 성별 정보를 저장해야 하기 때문에
Authenticate using a custom authentication system을 사용했습니다. 눌러봅시다!
이때, [Java]가 포함된 것도 있는데, 저는 Kotlin언어를 사용할 예정이기 때문에 [Java] 표시가 없는 것을 선택해 줍니다.
간혹, [Java]라는 문구가 없고 [Kotlin]이라는 문구가 있는 경우도 있더라고요. 사용하실 언어에 맞게 선택해 주세요!
(이 게시글은 Kotlin 사용!!)
그럼 아주 친절하게 1번 2번.. 차례대로 진행하라는 화면이 나옵니다.
먼저 Connect to Firebase를 누릅시다.
그럼 창이 열리면서 Firebase의 콘솔창이 뜰 것입니다. 제 프로젝트에서 사용하는 파이어베이스도 보이네요😝
프로젝트 추가를 눌러 새로운 데이터베이스를 만들어봅시다.
1/3 단계인 프로젝트 이름입니다.
기본적으로 안드로이드 스튜디오에 처음에 지정한 프로젝트 이름으로 지어주는데 마음대로 지으셔도 상관없습니다!
이름을 그대로 두시거나 새로 지으신 후 계속을 누릅시다.
갑자기 2/2단계가 되었는데...?
이 프로젝트에서 Google 애널리틱스 사용 설정을 꺼버렸기 때문입니다 ㅎ
분석할 필요까진 없거든요! 그럼 프로젝트 만들기를 누릅시다!
조금만 기다리시면
완료가 됩니다! 계속을 눌러봅시다!
그럼 슈루룩 어디론가 이동되면서 앱이 생성되었다는 팝업창이 뜹니다! 연결 버튼을 누릅시다.
영어를 읽어보니까 파이어베이스 쓸 수 있고... 안드로이드 스튜디오 돌아가서 SDK들을 시작해 보세요... 라네요 ㅎ
그럼 다시 안드로이드 스튜디오로 돌아가봅시다!
Firebase 연동되었다고 바뀌었네요!
연동만 했지 실제 코드에서 사용하기 위해서는 SDK를 저희 앱에 추가해줘야 해요!
바로 아래 2번인
Add the Firebase Authentication SDK to your app 버튼을 누릅시다!
설치가 되어야지 라이브러리를 사용할 수 있습니다 ㅎ
~~~~ 변경하시겠습니까? 물어보는데 당연히 파이어베이스를 쓰려면 바꿔야 쓸 수 있다고 하니까
과감하게 Accept Changes를 눌러줍시다!!
바꾼다고 달라지는 건 맨 아래 초록색 글씨인 Firebase의 auth 라이브러리를 우리 어플에 쓸 수 있게 하겠다 뿐입니다
그럼 안드로이드 스튜디오를 맨 처음 켰을 때 오른쪽 아래에 진행바가 또 진행되면서 라이브러리를 알아서 설치해 줍니다. 오래 걸리실 수도 있으니 인내심을 갖고 기다리시면...!
또 2번이 잘되었다고 바뀌었네요!
마지막입니다!
프로젝트 서버 키를 가져오라네요! 파란색 기울어진 Service accounts를 눌러봅시다!
인터넷 창이 슈루룩 뜹니다! 현재 만든 프로젝트(MyLogin)를 누릅시다!
그럼 또 슈루룩 페이지가 이동되면서 자동적으로 service accounts 페이지로 넘어옵니다!
아래 새 비공개 키 생성 버튼을 누릅시다!
어마무시한 빨간색 문구와 함께 새 비공개 키를 생성해 봅시다... 키 생성을 눌러줍니다.
그럼 자동으로 JSON 파일을 다운로드합니다. 이 파일은 Firebase에서 발급해 준 증명서 같은 것입니다!
이 파일 안에는 firebase에서 필요한 API 키들이 담겨있습니다.
그래서 어마무시한 문구로 항상! 기밀로 유지하라는 것입니다😱
자 그래서 이 파일을 어디에다가 넣어줘야 하냐면
안드로이드 스튜디오로 돌아가면 상단에 Android 하고 아래 화살표가 있습니다.
누르면
Project가 있고 클릭해 줍니다!
app 폴더 안에 넣어주시면 됩니다!
어떻게?
다운로드한 파일을 드래그해서 app 폴더 위로 가져다가 올려주세요!
그럼 얘 여기로 이동할 거다??!!라고 말해주네요. Refactor를 누릅시다.
잘 들어왔네요!ㅎ
Firebase 콘솔 인터넷 창으로 들어가 앱의 콘솔로 이동해 줍니다.
그럼 왼쪽에 빌드 안에 Firestore Database를 클릭해 줍니다.
데이터베이스 만들기를 클릭해 줍니다!
실질적으로 회원가입을 하고 난 뒤 정보를 저장하는 곳이 이곳이 됩니다!
위 화면이 뜨는데 사실상 위치는 중요하지 않습니다! 다음을 눌러봅시다!
보안 규칙이 있는데 테스트 모드에서 시작을 눌러줍니다.
테스트 모드는 보안 규칙을 수정할 수 있기 때문입니다! 사용 설정을 눌러줍니다!
잠시 기다리시면...
이런 화면이 뜨고 여기에 users라는 컬렉션 안에 회원가입 정보들을 저장할 것입니다!
컬렉션 시작을 눌러봅니다.
컬렉션을 만들 수 있고, 컬렉션 ID를 지정할 수 있습니다! 저는 users라고 지어주었습니다.
이 user는 아래쪽에 제시되는 회원가입 부분에 입력하는 코드와 이름이 같아야 합니다!
다음을 누릅시다.
필수적으로 컬렉션 안에 문서를 하나 만들어주어야 하는데
정보를 자동으로 저장이 될 수 있게 만들 것이기 때문에 자동 ID를 눌러 아무 문서나 만들어줍니다.
알아서 이름을 지어주었으니 저장을 누릅시다!
이제 users 컬렉션 안에 문서에 회원가입 정보들이 들어올 것입니다!!
그리고 다시 왼쪽 목록에서 빌드 → Authentication를 클릭합니다!
Sign-in method를 눌러 기본 제공업체에 있는 이메일/비밀번호를 눌러줍니다!
이제 이메일/비밀번호에서 사용 설정을 눌러 on을 해줍니다! 그리고 저장
드디어 Firebase 설정이 끝났습니다❗❗
다시 Project를 눌러 Android로 돌아와 틀을 만듭시다!
4. 로그인, 회원가입 틀 만들기 🖐
Firebase 연동하느라 소개가 늦었습니다😂
처음에 만들어지는 Activity를 만들어질 때 기본적으로 MainActivity와 activity_main.xml은 한쌍으로 만들어집니다!
MainActivity는 사실 MainActivity.kt이고, kt는 kotlin파일이라는 뜻입니다.
그래서 activity_main.xml 이 파일은 실제로! 핸드폰에서 보이는 화면을 꾸미는 공간이고,
MainActivity.kt는 그 안에서 행해질 수 있는 함수들이나 코드들을 넣는 공간입니다.
그래서 로그인 틀부터 만드겠습니다. activity_main.xml을 더블클릭해 주세요.
매애애앤 오른쪽에 목록과 네모 합쳐진 아이콘이 보이시나요?
이 부분을 계속해서 클릭하면 화면만 볼 수도 있고! 코드만 볼 수도 있고! 코드와 화면을 동시에 볼 수 있습니다!
저는 코드와 화면을 동시에 보는 것을 좋아해서 코드와 화면 동시에 보는 화면 기준으로 설명드리겠습니다.🤗
📍 만약 화면이 안보이시다면
빨간색 동그라미 버튼을 누르셔서 Design을 눌러보세요!
BulePrint는 요소들이 겹쳐질 때 위, 아래에 있는 요소들이 전부 다 보이고
Design은 딱! 화면상에만 보이는 부분을 보여줍니다.
기본적인 틀인 Hello World!가 보이네요.
로그인할 때는 이메일, 비밀번호가 필요하니까
Palette에서 Text를 누르고 E-mail과 Password를 드래그하여 Hello World! 부분에 가져다 놓아봅시다!
드래그만 했을 뿐인데 왼쪽에 코드를 알아서 작성해 줍니다 ㅠ 세상 좋아졌다...
📍 근데 빨간 밑줄이 쳐져있네요...?
그 이유는 위치를 너무 막 가져다 놨기 때문입니다.
핸드폰 기종에 따라 이메일과 비밀번호 박스가 이리저리 이동될 수도 있기 때문입니다.
그럼 박스 기준으로 왼쪽 동그라미를 드래그하여 맨 왼쪽 부분으로 가져다 놓겠습니다!
오른쪽도 마찬가지로 드래그해서 오른쪽 화면에 놓으면
이런 식으로 하면 왼쪽 오른쪽에 박스가 고정된 것처럼 보입니다!
왼쪽 오른쪽뿐만 아니라 위아래도 고정해주셔야 합니다.
밑에 부분은 위에 만든 박스에 연결해주어야 합니다.
모든 요소들은 ❗서로서로 ❗ 또는 ❗ 화면에 ❗ 붙어 있어야 합니다!
이렇게 설정하시면 코드 부분에 빨간색 밑줄이 지워질 것입니다!
버튼도 부착해 주고 뚝딱뚝딱 드래그들을 해줍니다!
👀 여유로우신 분들은 드래그하고 속성값도 변경하면서 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" tools:context=".MainActivity"> <EditText android:id="@+id/EmailAddress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="220dp" android:ems="10" android:inputType="textEmailAddress" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.497" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/Password" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="80dp" android:ems="10" android:inputType="textPassword" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.497" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/EmailAddress" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="로그인" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/Password" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="36dp" android:text="회원가입" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button" app:layout_constraintVertical_bias="0.023" /> </androidx.constraintlayout.widget.ConstraintLayout>
위 코드를 복붙 해주세요!
그렇다면 위 사진과 같이 로그인 화면을 만들 수 있습니다!
그리고 회원가입 화면을 만들기 위해서는 새로운 액티비티를 만들어주셔야 합니다!
액티비티란 새로운 화면을 말합니다!
왼쪽 목록들이 있는 곳에서 kt 파일이 있는 폴더에
오른쪽 마우스 → New → Activity → Empty Views Activity를 눌러줍니다.
초반에 만들었던 activity와 같은 화면이 나오고 activity 이름을 지어주고 Finish를 누릅니다!
kt 파일과 xml 파일, 두 개가 또 만들어졌네요!
이제 activity_register.xml을 더블클릭하고 회원가입 화면을 만들어봅시다!
이 부분도 위에서 로그인 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"
tools:context=".RegisterActivity">
<TextView
android:id="@+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="회원가입"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"/>
<EditText
android:id="@+id/editTextUsername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="사용자 이름"
app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"/>
<!-- 이메일 입력 필드 -->
<EditText
android:id="@+id/editTextEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="이메일 주소"
app:layout_constraintTop_toBottomOf="@+id/editTextUsername"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"/>
<EditText
android:id="@+id/editTextPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="비밀번호"
android:inputType="textPassword"
app:layout_constraintTop_toBottomOf="@+id/editTextEmail"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"/>
<Button
android:id="@+id/buttonRegister"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="회원가입"
app:layout_constraintTop_toBottomOf="@+id/editTextPassword"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
위 코드를 복붙 하시면 아래에 화면처럼 구성됩니다!
이제 가장 중요한 화면과 화면 연결입니다!
순서는 아래로 진행하겠습니다!
1) 로그인 화면에서 회원가입 화면으로 이동하기
2) 회원가입 화면에서 입력한 정보를 파이어베이스에 저장하기
3) 저장 후 로그인 화면으로 돌아와서 로그인해 보기!
1) 로그인 화면에서 회원가입 화면으로 이동하기
MainActivity(.kt)를 더블클릭하세요!
이 코드밖에 없을 것인데 아래 코드를 써주시면 됩니다!
전체적으로 복사 붙여넣기를 하든, 주석으로 추가된 부분만 추가해 주셔도 됩니다!
package com.example.mylogin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.content.Intent //추가
import android.widget.Button //추가
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val registerButton: Button = findViewById(R.id.button2) // 여기서부터 추가됨
registerButton.setOnClickListener { //버튼을 클릭시 이벤트
val intent = Intent(this, RegisterActivity::class.java)
startActivity(intent)
}
}
}
이렇게 하면 회원가입 버튼을 클릭하면 Register activity로 이동할 수 있습니다.
2) 회원가입 화면에서 입력한 정보를 파이어베이스에 저장하기
이제 Register 액티비티 kt 파일을 더블클릭하시고 아래 코드를 복붙 해주세요!
package com.example.mylogin
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.firebase.auth.FirebaseAuth
import com.google.firebase.firestore.FirebaseFirestore
class RegisterActivity : AppCompatActivity() {
private lateinit var auth: FirebaseAuth //Firebase를 사용하는 권한
private lateinit var firestore: FirebaseFirestore
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_register)
auth = FirebaseAuth.getInstance() //Firebase에서 인스턴스를 가져올 것이다!
firestore = FirebaseFirestore.getInstance()
val registerButton: Button = findViewById(R.id.buttonRegister) //회원가입 버튼 객체 생성
registerButton.setOnClickListener { // 눌렀을 때 registerUser 함수를 쓸 것이다!
registerUser()
}
}
private fun registerUser() { //xml에 있는 id의 이름을 가져와서 객체로 생성
val username = findViewById<EditText>(R.id.editTextUsername).text.toString()
val email = findViewById<EditText>(R.id.editTextEmail).text.toString()
val password = findViewById<EditText>(R.id.editTextPassword).text.toString()
auth.createUserWithEmailAndPassword(email, password) //firebase 권한으로 email, password를 만든다.
.addOnCompleteListener(this) { task ->
if (task.isSuccessful) {
val user = auth.currentUser
// Firestore에 사용자 세부 정보 저장
saveUserData(username, email)
// 회원가입 성공 메시지 표시
Toast.makeText(this, "회원가입 성공", Toast.LENGTH_SHORT).show() //Toast는 아래에 메세지를 띄워줍니다.
// 메인 액티비티로 이동
navigateToMainActivity()
} else {
// 회원가입 실패 시 사용자에게 메시지 표시
Toast.makeText(this, "회원가입 실패: ${task.exception?.message}", Toast.LENGTH_SHORT).show()
}
}
}
private fun saveUserData(username: String, email: String) { //firebase에 저장
val user = hashMapOf( //해시맵으로 username, email 필드에 저장
"username" to username,
"email" to email
)
// 생성된 ID로 새 문서 추가
firestore.collection("users") //여기서! 컬렉션 이름과 같아야합니다
.add(user)
.addOnSuccessListener { documentReference ->
Log.d("RegisterActivity", "DocumentSnapshot added with ID: ${documentReference.id}")
}
.addOnFailureListener { e ->
Log.e("RegisterActivity", "문서 추가 오류", e)
}
}
private fun navigateToMainActivity() {
val intent = Intent(this, MainActivity::class.java) //로그인 화면으로 돌아가게 하는 intent 이용!
startActivity(intent)
finish() // 현재 액티비티를 종료하여 뒤로가기 버튼으로 다시 돌아오지 않도록 한다.
}
}
Firebase에 저장한 컬렉션 이름을 같게 해주셔야 합니다!
📍 복사, 붙여넣기를 했는데!
혹시나 이렇게 빨간 글씨가 있다면 빨간 글씨에 커서를 갖다 대어 클릭하고 Alt+ Enter를 누르고 목록들이 있는데 바로 Enter를 누르세요!
즉 맨 위에꺼를 고르는 것입니다. 알아서 import란에 라이브러리를 코드를 써넣어줍니다! ㅎ
3) 저장 후 로그인 화면으로 돌아와서 로그인해 보기!
다시 로그인 kt 파일로 돌아와서 아래 코드 복붙 해주십니다!
package com.example.mylogin
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.firebase.auth.FirebaseAuth
class MainActivity : AppCompatActivity() {
private lateinit var auth: FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
auth = FirebaseAuth.getInstance() //firebase에서 인스턴스를 가져온다.
val loginButton: Button = findViewById(R.id.button) //로그인 버튼 객체 생성
loginButton.setOnClickListener { //로그인 버튼을 클릭하면 loginUser 함수 실행
loginUser()
}
}
private fun loginUser() { //xml에서 id를 가져온다
val email = findViewById<EditText>(R.id.EmailAddress).text.toString()
val password = findViewById<EditText>(R.id.Password).text.toString()
auth.signInWithEmailAndPassword(email, password)
.addOnCompleteListener(this) { task ->
if (task.isSuccessful) {
// 로그인 성공 시
val user = auth.currentUser
Toast.makeText(this, "로그인 성공", Toast.LENGTH_SHORT).show() //로그인 성공이라는 메세지를 띄운다.
// Add your logic to navigate to another activity or perform other actions
} else {
// 로그인 실패 시
Toast.makeText(this, "로그인 실패: ${task.exception?.message}", Toast.LENGTH_SHORT).show()
}
}
}
}
여유가 있으신 분들은 주석코드를 하나하나 확인해 주시면서 코드의 구성을 확인해주시면 좋습니다! 😛
5. 가상에뮬레이터로 실행해 보기🖐
Device Manager를 클릭하여 새로운 가상에뮬레이터를 만들어봅시다!
이미 저는 만들어져 있지만, 없다는 가정하에! Create Device를 눌러봅시다!
Phone에 Pixel 2를 클릭하고 Next를 누릅시다!
Pixel2가 핸드폰 기본 화면 크기랑 비슷하기 때문입니다!
Tiramisu를 클릭하여 다운을 받아주세요!
티라미수를 다운로드하는 중입니다!
조금 오래 걸릴지도 몰라요 ㅎ
다운이 완료되면 Finish를 누릅니다!
Next 클릭!
이름을 지정해 주고 Finish 클릭!
저는 이미 있기 때문에 기존에 있던 가상 에뮬레이터를 쓰도록 하겠습니다!
재생 버튼을 클릭하시면 가상의 핸드폰이 나옵니다!
안 나오신다면 옆에 Running Device를 눌러주세요!
가상에뮬레이터가 바탕화면이 나왔다면
app 옆에 재생버튼을 눌러주세요!
왜 재생버튼을 두 개나 누르냐면,
첫 번째 거는 기계를 키는 작업이고,
두 번째는 어플을 키는 작업입니다!
이 화면이 나오실 겁니다! 이제 실제 가상 에뮬레이터를 이용하여
회원가입과 로그인을 해보겠습니다!
Firebase로 가보면 만든 정보가 저장이 되어있습니다!
📍 TroubleShooting
만약 가상에뮬레이터가 안되고 경고창이 뜬다면, Gradle Scripts → build.gradle.kts(Module : app)을 눌러보세요!
compileSdk가 33으로 설정이 되어있다면 34로 변경해 주세요!
오른쪽 상단에 Sync Now를 눌러주시고 잠시만 기다려주세요!
그리고 다시 가상에뮬레이터를 중지했다가 재생버튼 누르고 app도 재생시켜 주세요!
초보자들도 할 수 있는 Firebase를 이용하여 로그인 회원가입하기가 완료되었습니다!🙌
읽어주셔서 감사합니다😍
'어플리케이션' 카테고리의 다른 글
| Chat-GPT를 훈련시키고, 원하는 답변을 가져와보자! (2) | 2023.05.26 |
|---|