Tinder 앱 개발하기

Side Project - Tinder
회원 가입한 유저들을 매칭해주는 기존 틴더 앱의 간단한 기능을 구현한 프로젝트

 

• GitHub -> https://github.com/hwayeon351/Tinder

GitHub - hwayeon351/Tinder

---

학습 회고

오늘은 유저들을 매칭해주는 틴더 앱의 간단한 기능을 구현하는 프로젝트를 시작하였다.

Firebase의 Authentication을 안드로이드 앱에 연결해서 이메일과 페이스북 로그인 기능을 구현하였다.

 

---

오늘 공부한 내용

• Firebase Authentication

Firebase Authentication은 앱에서 사용자 인증 시에 필요한 백엔드 서비스, 사용하기 쉬운 SDK, 라이브러리를 제공한다.

Firebase console에서 Authentication의 Sign-in method에서 이메일/비밀번호, 전화 인증 뿐만 아니라 Google, Facebook, Twitter 등의 로그인을 제공하는 제휴 업체를 통한 인증을 추가할 수 있다.

 

Firebase Authentication을 통해서 사용자를 앱에 로그인시키기 위해서는 우선 사용자에게 인증 정보를 받아야 한다.

이 인증 정보는 사용자의 이메일 주소와 비밀번호 일 수도 있고, 제휴 ID 공급업체에서 받은 OAuth 토큰일 수도 있다.

사용자 인증 정보를 Firebase Authentication SDK로 전달하면 Firebase의 백엔드 서비스가 정보를 확인해서 클라이언트에게 응답을 반환한다.

로그인이 정상적으로 이루어지면 사용자의 기본 프로필 정보에 접근할 수 있다.

 

틴더 앱에서는 이메일/비밀번호와 페이스북 아이디로 로그인할 수 있도록 구현하였다.

 

• 모듈 Gradle에 dependency 추가

dependencies {
    implementation platform('com.google.firebase:firebase-bom:29.0.4')
    implementation 'com.google.firebase:firebase-auth-ktx'
}

 

• FirebaseAuth 인스턴스 생성

    private lateinit var auth: FirebaseAuth
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        auth = Firebase.auth

 

• Activity를 초기화할 때 사용자가 현재 로그인되어 있는지 확인

override fun onStart() {
    super.onStart()

    if (auth.currentUser == null) {
        startActivity(Intent(this, LoginActivity::class.java))
    }
}

 

 

 

• 이메일/비밀번호로 인증하기

• 신규 사용자 가입 createUserWithEmailAndPassword()

이메일 주소와 비밀번호의 유효성을 검사하여 신규 사용자를 만든다.

private fun initSignUpButton() {
    val signUpButton = findViewById<Button>(R.id.signUpButton)
    signUpButton.setOnClickListener {
        val email = getInputEmail()
        val password = getInputPassword()

        auth.createUserWithEmailAndPassword(email, password)
            .addOnCompleteListener(this) { task ->
                if(task.isSuccessful) {
                    Toast.makeText(this, "회원가입에 성공했습니다. 로그인 버튼을 눌러 로그인 해주세요.", Toast.LENGTH_SHORT).show()
                } else {
                    Toast.makeText(this, "이미 가입한 이메일이거나, 회원가입에 실패했습니다.", Toast.LENGTH_SHORT).show()
                }
            }
    }
}

 

• 기존 사용자 로그인 signInWithEmailAndPassword()

이메일 주소와 비밀번호의 유효성을 검사하고 사용자를 로그인 시킨다.

private fun initLoginButton() {
    val loginButton = findViewById<Button>(R.id.loginButton)
    loginButton.setOnClickListener {
        val email = getInputEmail()
        val password = getInputPassword()

        auth.signInWithEmailAndPassword(email, password)
            .addOnCompleteListener(this) { task ->
                if(task.isSuccessful) {
                    finish()
                } else {
                    Toast.makeText(this, "로그인에 실패했습니다. 이메일 또는 비밀번호를 확인해주세요.", Toast.LENGTH_SHORT).show()
                }
            }
    }
}

 

• 사용자 정보 액세스 getCurrentUser()

val user = Firebase.auth.currentUser
user?.let {
    val name = user.displayName
    val email = user.email
    val photoUrl = user.photoUrl
    val emailVerified = user.isEmailVerified
    val uid = user.uid
}

 

 

https://firebase.google.com/docs/auth/android/start?authuser=0 

Android에서 Firebase 인증 시작하기  |  Firebase Documentation

 

 

 

• Facebook 아이디로 인증하기

Facebook 개발자 사이트에서 앱을 등록하고 받은 앱 ID와 비밀번호, OAuth 리디렉션 URI를 Firebase Authentication에 지정한다.

그리고 앱에 필요한 dependency를 추가하고 매니페스트 파일과 리소스 파일에 필요한 요소들을 추가해주면 앱에서 페이스북 아이디 인증이 가능하다.

 

• Facebook 로그인 버튼 UI 추가

LoginButton은 페이스북이 제공하는 LoginManager에서 사용할 수 있는 기능에 대한 wrapper UI 요소이다.

사용자가 버튼을 클릭하면 LoginManager에 설정된 권한과 함께 로그인이 시작된다.

<com.facebook.login.widget.LoginButton
    android:id="@+id/facebookLoginButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    app:layout_constraintEnd_toEndOf="@id/passwordEditText"
    app:layout_constraintStart_toStartOf="@id/passwordEditText"
    app:layout_constraintTop_toBottomOf="@id/loginButton" />

 

• 콜백 등록

로그인 응답을 처리할 콜백 매니저를 만든다.

private lateinit var callbackManager: CallbackManager

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

    callbackManager = CallbackManager.Factory.create()

 

• 로그인 결과 응답 받기

LoginButton에 콜백을 등록해서 로그인 결과를 응답 받는다.

setPermissions() 함수를 호출해서 가져올 사용자 정보를 지정할 수 있다.

 

로그인에 성공하면 onSuccess 콜백 함수가 호출되며 LoginResult 매개변수에 새로운 AccessToken과 최근에 부여되거나 거부된 권한이 포함된다.

FacebookAuthProvider를 통해 가져온 OAuth 토큰을 가지고 FirebaseAuth의 signInWithCredential() 메서드의 매개변수로 담아 호출하면 사용자 로그인이 된다.

private fun initFacebookLoginButton() {
    val facebookLoginButton = findViewById<LoginButton>(R.id.facebookLoginButton)

    facebookLoginButton.setPermissions("email", "public_profile")
    facebookLoginButton.registerCallback(callbackManager, object: FacebookCallback<LoginResult>{
        override fun onSuccess(result: LoginResult) {
            val credential = FacebookAuthProvider.getCredential(result.accessToken.token)
            auth.signInWithCredential(credential)
                .addOnCompleteListener(this@LoginActivity) { task ->
                    if (task.isSuccessful) {
                        finish()
                    } else {
                        Toast.makeText(this@LoginActivity, "페이스북 로그인이 실패했습니다.", Toast.LENGTH_SHORT).show()
                    }
                }
        }

        override fun onCancel() {}

        override fun onError(error: FacebookException?) {
            Toast.makeText(this@LoginActivity, "페이스북 로그인이 실패했습니다.", Toast.LENGTH_SHORT).show()
        }

    })
}

 

• onActivityResult 오버라이딩

로그인 결과를 callbackManager를 통해 LoginManager에 전달하기 위해서 onActivityResult() 메서드를 오버라이딩 한다.

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)

    callbackManager.onActivityResult(requestCode, resultCode, data)
}

 

https://developers.facebook.com/docs/facebook-login/android

Android - Facebook 로그인 - 문서 - Facebook for Developers