[Android/Kotlin] 구글 Firebase - 1. 인증을 이용하여 로그인하기

2021.07.16 - [Android] - [Android] 구글 Firebase(파이어베이스) 연동하기

[Android] 구글 Firebase(파이어베이스) 연동하기

 

지난 포스트에서는 구글 파이어베이스에 연동하는것 까지 진행했었다.

 

이번에는 구글 파이어베이스 내에 있는 Auth(인증)을 이용하여 로그인하는 서비스를 진행해보도록 하겠다.

 

---

 

1. Firebase Auth

---

https://firebase.google.com/docs/auth?hl=ko 

Firebase 인증

 

Firebase 인증은 앱에서 사용자 인증 시 필요한 백엔드 서비스와 사용하기 쉬운 SDK, 기성 UI 라이브러리를 제공한다. 비밀번호, 전화번호, 인기 ID 제공업체(예: Google, Facebook, Twitter 등)를 통한 인증을 지원한다.

 

즉, 구글 파이어베이스 자체의 인증기능 뿐만 아니라 SNS 로그인 기능인 구글 로그인, 페이스북, 트위터 로그인 등과 같은 타 사이트 로그인 기능들을 제공하기도 한다.

 

 

 

구글 파이어베이스 콘솔에 접속해보면 왼쪽에 사람모양의 아이콘이 보인다.

이 아이콘을 클릭하여 Auth 서비스 화면에 접속해보면 해당 화면이 보이게 되는데, 시작하기를 눌러준다.

 

 

다양한 로그인 기능들을 지원하는 Firebase Auth

 

잠시 기다려주면 다음과 같은 화면이 보인다.

위에서도 말했듯, 구글 인증 기능은 다양한 SNS 로그인 서비스를 지원한다.

 

본인은 테스트 용도로 로그인 기능을 사용할 것이므로 가장 상단의 이메일/ 비밀번호 기능을 이용할 것이다.

 

 

 

이메일/비밀번호 옆에 마우스를 가져다 대면, 구성 수정이라는 버튼이 보인다.

 

해당 버튼을 클릭해주면

 

 

 

이렇게 화면이 표시되게 된다.

이메일 링크는 사용하지 않을 것이므로 체크 해제하고, 위에 보이는 파란 부분에만 사용 설정을 하고 저장을 눌러준다.

 

 

Tools - Firebase를 클릭하면 우측 화면과 같이 나오는데, 해당 화면에서 Authentication을 눌러준다.

 

 

 

그리고 해당 화면에서 add 버튼을 클릭해주면 오른쪽 화면과 같은 창이 표시되는데

 

Accept 해주면서 적용시킨다.

 

---

2. 안드로이드에서 화면 구성

---

 

 

Layout - New - Layout Resource File

 

 

activity_login.xml 이라는 이름으로 xml 파일을 만들어 준다.

 

 

 

그리고 다음과 같이 화면을 구성해준다.

 

물론 본인은 테스트용으로 사용할 것이라서 간단하게 만들었지만

화면 구성은 만드는 사람이 자신의 입맛에 맞게 설정하면 된다.

 

그리고 입력되는 EditText 부분에는

email: email_et

password: pwd_et

 

이렇게 ID 값을 수정해주도록 한다.

 

 

activity_main.xml은 다음과 같이 만들어 준다.

 

로그인 하고 나서 전환할 화면은 다음과 같이 설정해줄 예정이므로

activity_main.xml은 이렇게 만들어 준다.

 

 

 

java - New - Kotlin class/File

 

자바 파일로 제작이 가능하지만, 코틀린으로 한번 만들어보도록 한다.

클래스 파일 이름은 LoginActivity라는 이름으로 만들어 준다.

 

LoginActivity.kt

//LoginActivity.kt
package com.example.test

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.google.firebase.auth.FirebaseAuth

class LoginActivity : AppCompatActivity() {
    lateinit var emailEt: EditText
    lateinit var passwordEt: EditText
    lateinit var loginBtn: Button

    lateinit var auth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        auth = FirebaseAuth.getInstance()

        emailEt = findViewById(R.id.email_et)
        passwordEt = findViewById(R.id.pwd_et)
        loginBtn = findViewById(R.id.button)

        loginBtn.setOnClickListener {
            var email = emailEt.text.toString()
            var password = passwordEt.text.toString()
            auth.createUserWithEmailAndPassword(email,password) // 회원 가입
                .addOnCompleteListener {
                    result ->
                    if(result.isSuccessful){
                        Toast.makeText(this,"회원가입이 완료되었습니다.",Toast.LENGTH_SHORT).show()
                        if(auth.currentUser!=null){
                            var intent = Intent(this, MainActivity::class.java)
                            startActivity(intent)
                        }
                    }
                    else if(result.exception?.message.isNullOrEmpty()){
                        Toast.makeText(this,"오류가 발생했습니다.",Toast.LENGTH_SHORT).show()
                    }
                    else{
                        login(email,password)
                    }
                }
        }
    }

    fun login(email:String,password:String){
        auth.signInWithEmailAndPassword(email,password) // 로그인
            .addOnCompleteListener {
                result->
                if(result.isSuccessful){
                    var intent = Intent(this, MainActivity::class.java)
                    startActivity(intent)
                }
            }
    }
}

 

먼저 상단에서 각 TextView, EditText, Button에 대해 초기화를 수행해준다.

 

버튼을 클릭했을 때, 계정이 존재하면 바로 로그인 하도록 하고

계정이 존재하지 않으면 자동으로 회원가입 되도록 처리하였다.

 

조금 더 디테일하게 수정할 수 있지만 이는 추후 포스트에서 다시 설명하도록 하겠다.

 

 

MainActivity.kt

//MainActivity.kt
package com.example.test

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.firebase.auth.FirebaseAuth

class MainActivity : AppCompatActivity() {
    lateinit var email: TextView
    lateinit var auth:FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        auth = FirebaseAuth.getInstance()

        email = findViewById(R.id.email_tv)
        email.text = auth.currentUser?.email
    }
}

 

상단에 MainActivity 화면에서 텍스트 뷰를 두개 만들어 놓은 이유는

아래 텍스트 뷰에는 로그인된 사용자의 이메일이 표시되도록 처리할 것이기 때문에 두개를 만들어 놨었다.

 

auth.currentUser?.email 코드 부분은 현재 로그인된 사용자의 이메일 정보를 가져오도록 처리하는 코드이다.

 

 

LoginActivity가 먼저 시작될 수 있도록 코드로 처리한다. manifest.xml

 

manifest 부분에는 다음과 같이 코드를 바꿔준다.

첫 시작 화면이 로그인 화면이 보여지도록 처리해야 하므로 다음과 같이 manifest를 수정해준다.

---

코드 수정은 끝났고, 안드로이드 에뮬레이터를 실행시켜보면

 

 

로그인이 잘 처리된 모습.

 

로그인이 잘 처리된 모습을 확인할 수 있다.

아래 텍스트뷰에 사용자의 이메일이 보여지도록 코드로 처리했다.

 

다음 화면에서 로그아웃 기능을 미처 추가하지 못했는데

방법은 간단하다. 로그아웃을 처리할 화면에 버튼을 하나 만들어 놓고 아래 소스코드를 이용하여 처리하면 된다.

 

로그아웃 코드

// 로그아웃 코드. 로그아웃 버튼을 만들고, 초기화한 다음 해당 코드를 삽입.
logoutBtn.setOnClickListener {
        //firebase auth에서 sign out 기능 호출
        auth.signOut()
        var intent=Intent(activity,LoginActivity::class.java) //로그인 페이지 이동
        startActivity(intent)
        activity?.finish()
}