[TUDY] FirebaseAuth(파이어베이스 인증) + 애플, 카카오 로그인, 자동로그인

TUDY 프로젝트에서 소셜로그인 + 파이어베이스 인증으로 로그인, 회원가입 기능을 구현했던 경험을 적어보려고 합니다.

(혼자 공부하고 찾으며 작성한 것이라 정보가 정확하지 않을 수 있습니다 ㅠ_ㅠ 지적, 조언 환영합니다)

 

 

 

파이어베이스 인증 - 로그인 제공업체

https://firebase.google.com/docs/auth/ios/start?hl=ko&authuser=0 

Apple 플랫폼에서 Firebase 인증 시작하기  |  Firebase Documentation

파이어베이스 인증에서는 추가 제공업체 부분의 로그인 서비스를 지원합니다. (구글, 애플 등..)

처음에 카카오 로그인은 지원을 안하는데 어떻게 구현을 하지? 라는 생각을 했는데

 

찾아보니 두가지 방법이 있는 것으로 보였습니다.

첫번째는 이메일/비밀번호 로 로그인

두번째는 커스텀 토큰 만들어서 로그인

 

저는 여기서 이메일/비밀번호 로 카카오 로그인을 구현해보았습니다.

 

 

 

카카오 로그인 + 파이어베이스 인증

[카카오 로그인 공식문서]

https://developers.kakao.com/docs/latest/ko/kakaologin/ios

Kakao Developers

 

카카오 로그인은 이메일/비밀번호로 파이어베이스 인증에 등록할 것입니다.

여기서 이메일은 사용자의 카카오 로그인시 사용하는 이메일을 사용할 것이고,

비밀번호는 사용자의 userID로 입력하여 사용할 것입니다.

 

 

이 흐름을 생각한대로 정리해보면..

1

- 사용자에게 카카오 로그인을 요청합니다.

- 사용자는 카카오 로그인을 완료합니다.

@objc private func kakaoLoginButtonTapped(_ sender: UIButton) {

    // 카카오 토큰이 존재한다면
    if AuthApi.hasToken() {
        UserApi.shared.accessTokenInfo { accessTokenInfo, error in
            if let error = error {
                print("DEBUG: 카카오톡 토큰 가져오기 에러 \(error.localizedDescription)")
                self.kakaoLogin()
            } else {
                // 토큰 유효성 체크 성공 (필요 시 토큰 갱신됨)
            }
        }
    } else {
        // 토큰이 없는 상태 로그인 필요
        kakaoLogin()
    }
}

private func kakaoLogin() {

    if UserApi.isKakaoTalkLoginAvailable() {
        kakaoLoginInApp() // 카카오톡 앱이 있다면 앱으로 로그인
    } else {
        kakaoLoginInWeb() // 앱이 없다면 웹으로 로그인 (시뮬레이터)
    }
}

 

2

- 카카오 인증 서버에 사용자 정보를 가져오기 위해 토큰 발급을 요청합니다.

- 토큰을 발급 받으면 토큰과 함께 사용자 정보를 요청합니다. (이메일, userID)

- 토큰 검증 완료 후 사용자 정보를 제공받습니다.

private func kakaoLoginInApp() {

    UserApi.shared.loginWithKakaoTalk { oauthToken, error in
        if let error = error {
            print("DEBUG: 카카오톡 로그인 에러 \(error.localizedDescription)")
        } else {
            print("DEBUG: 카카오톡 로그인 Success")
            if let token = oauthToken {
                print("DEBUG: 카카오톡 토큰 \(token)")
                self.loginInFirebase()
            }
        }
    }
}

private func kakaoLoginInWeb() {

    UserApi.shared.loginWithKakaoAccount { oauthToken, error in
        if let error = error {
            print("DEBUG: 카카오톡 로그인 에러 \(error.localizedDescription)")
        } else {
            print("DEBUG: 카카오톡 로그인 Success")
            if let token = oauthToken {
                print("DEBUG: 카카오톡 토큰 \(token)")
                self.loginInFirebase()
            }
        }
    }
}

 

 

3

- 파이어베이스 인증 서버에 이메일/userID로 회원가입 및 로그인을 완료합니다.

- 로그인 여부를 확인합니다.

private func loginInFirebase() {

    UserApi.shared.me() { user, error in
        if let error = error {
            print("DEBUG: 카카오톡 사용자 정보가져오기 에러 \(error.localizedDescription)")
        } else {
            print("DEBUG: 카카오톡 사용자 정보가져오기 success.")

            // 파이어베이스 유저 생성 (이메일로 회원가입)
            Auth.auth().createUser(withEmail: (user?.kakaoAccount?.email)!,
                                   password: "\(String(describing: user?.id))") { result, error in
                if let error = error {
                    print("DEBUG: 파이어베이스 사용자 생성 실패 \(error.localizedDescription)")
                    Auth.auth().signIn(withEmail: (user?.kakaoAccount?.email)!,
                                       password: "\(String(describing: user?.id))")
                    self.didSendEventClosure?(.close)
                } else {
                    print("DEBUG: 파이어베이스 사용자 생성")
                    self.didSendEventClosure?(.showSignUp) // 회원가입 화면으로 이동
                    self.dismiss(animated: true) // 창닫기
                }
            }
        }
    }
}

 

 

 

애플 로그인 + 파이어베이스 인증

https://firebase.google.com/docs/auth/ios/apple?hl=ko&authuser=0 

Apple을 사용하여 인증  |  Firebase Documentation

애플 로그인은 보안 때문에 코드가 깁니다. 

애플 로그인을 구현하려면 다른 블로그 참조도 좋지만 공식문서를 보고 구현하는 것이 잘 될 가능성이 조금 더 높은 것 같습니다..

파이어베이스는 뭔가 얼마 안돼서 자꾸 바뀌는 느낌인지라..!

 

애플 로그인은 파이어베이스에서 제공을 해주기 때문에 credential 객체를 생성해서 회원가입 할 수 있습니다.

 

func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
    if let appleIDCredential = authorization.credential as? ASAuthorizationAppleIDCredential {
        guard let nonce = currentNonce else {
            fatalError("Invalid state: A login callback was received, but no login request was sent.")
        }
        guard let appleIDToken = appleIDCredential.identityToken else {
            print("Unable to fetch identity token")
            return
        }
        guard let idTokenString = String(data: appleIDToken, encoding: .utf8) else {
            print("Unable to serialize token string from data: \(appleIDToken.debugDescription)")
            return
        }

        let credential = OAuthProvider.credential(withProviderID: "apple.com", idToken: idTokenString, rawNonce: nonce)

        Auth.auth().signIn(with: credential) { authResult, error in
            if let error = error {
                print ("Error Apple sign in: %@", error)
                return
            }
            // 첫번째 로그인
            if let _ = authResult?.user.displayName {
                self.didSendEventClosure?(.showSignUp)
            } else {
                self.didSendEventClosure?(.close)
            }
        }
    }
}

 

고려했었던 점은 애플 로그인으로 첫번째 로그인? 회원가입?을 했을 때만 displayName을 넘겨준다고 해서

이 값이 넘어오면 회원가입 창을 보여주고,

이 값이 넘어오지 않으면 로그인을 완료하고 창을 닫아주었습니다.

 

 

 

자동 로그인

로그인 체크가 필요한 뷰컨트롤러에서 LoginCheck 프로토콜을 채택하여 사용할 수 있도록 만들었습니다.

 

사실 이렇게 자동 로그인을 구현하는 것이 정답인지는 모르겠지만..

파이어베이스의 currentUser 현재 유저의 uid 유저 아이디가 nil 이라면 로그인 되어 있지 않기 때문에 로그인 뷰컨을 띄워주는 식으로 구현하였습니다.

import UIKit
import Firebase

protocol LoginCheck {
    
    func isLogin() -> Bool
}

extension LoginCheck {
    
    func isLogin() -> Bool {
        print(Auth.auth().currentUser?.uid != nil ? "DEBUG: 로그인 되어있음" : "DEBUG: 로그인 안되어있음")
        return Auth.auth().currentUser?.uid != nil ? true : false
    }
}

 

 

 

소셜 로그인 파이어베이스로 구현 후기

파이어베이스의 토큰을 어떻게 갱신해줄지가 아직도 해결하지 못한 고민입니다 ㅜㅜ

(현재는 currentUser가 없다면 로그인 화면을 띄워주기)

자동으로 갱신이 되는 것인지..?  공식문서에 설명이 조금 더 자세했더라면..

 

파이어베이스 인증을 사용하니 좋은점은 TUDY의 DB는 Firebase를 알차게 사용하고 있기 때문에.. 

DB 접근권한을 인증과 연결해서 사용할 수 있다는 점이 좋았습니다.

 

다음번에는 파이어베이스가 아닌 백엔드 서버와 소셜로그인 구현에 대해서도 공부해보고 싶습니다.

 

 

 

 

 

 

참조

https://mini-min-dev.tistory.com/94

[iOS] 소셜 로그인을 구현해보자! 2탄 - Apple 로그인

https://spiralmoon.tistory.com/entry/Flutter-Firebase%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Sign-In-with-Apple-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[Flutter] Firebase를 이용하여 Sign In with Apple 사용하기