Firebase Auth에서 카카오 로그인 사용하기

새로운 프로젝트를 준비하면서 Firebase를 사용하려고 한다. Firebase에서 Authentication,Storage,Firebase Database를 한 번에 제공하기 때문에 한 번에 여러가지를 해결할 수 있다. 기본적으로 Firebase의 Authentication은 이메일과 비밀번호로 회원가입이 가능하다. 추가적으로 Google,Apple,Facebook,Twitter등의 외부 아이디도 사용할 수 있다. 

하지만...아쉽게도 해외의 서비스이다보니 우리나라에서 가장 많이 사용되는 "카카오로 로그인"을 제공하지 않는다. 아무래도 우리나라에서는 카카오톡이 거의 필수이다보니 모두가 편하게 사용한다.

 

🧐 그렇다면 카카오 로그인과 Firebase의 Authentication을 연결할 수 없을까?

 

일단 카카오 로그인의 원리를 알아보자! 

카카오 로그인의 원리

카카오 로그인을 하게 된다면 이메일과 토큰 값이 넘어온다. Firebase Auth는 이메일과 비밀번호를 통해서 회원가입이 가능하다. 비밀번호는 직접 저장하지않고 UID로 저장한다. 카카오 로그인을 하게 된다면 카카오 계정(이메일)과 id값이 반환되는데 카카오 계정은 이메일 형식이니 그대로 사용하고 id를 비밀번호로 사용한다면 Firebase Auth에서 사용할 수 있다!

 

🆗 그럼 이제 구현을 해보자!

 

✅ 카카오  로그인을 위한 세팅

먼저 카카오 로그인을 사용하기 위해서 세팅을 진행해야 한다.

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

Kakao Developers

위의 링크를 참고하여 세팅을 진행하면 된다. 공식 문서에 나와있는 설명대로 진행하면 된다.

 

✅ 카카오 로그인과 Firebase Auth 연결하기

아래는 카카오 로그인을 통해서 Firebase Auth에 회원가입을 하는 구현 코드이다.

    //MARK: - 카카오로그인
    @IBAction func kakao(_ sender: UIButton) {
        if UserApi.isKakaoTalkLoginAvailable() {
            UserApi.shared.loginWithKakaoTalk { oauthToken, error in
                if let error = error {
                    print(error)
                } else {
                    print("New Kakao Login")
                    
                    //do something
                    _ = oauthToken
                    
                    // 로그인 성공 시
                    UserApi.shared.me { kuser, error in
                        if let error = error {
                            print("------KAKAO : user loading failed------")
                            print(error)
                        } else {
                            Auth.auth().createUser(withEmail: (kuser?.kakaoAccount?.email)!, password: "\(String(describing: kuser?.id))") { fuser, error in
                                if let error = error {
                                    print("FB : signup failed")
                                    print(error)
                                    Auth.auth().signIn(withEmail: (kuser?.kakaoAccount?.email)!, password: "\(String(describing: kuser?.id))", completion: nil)
                                } else {
                                    print("FB : signup success")
                                }
                            }
                        }
                    }
                    
                    let VC = self.storyboard?.instantiateViewController(identifier: "LoginSuccessViewController") as! SuccessViewController
                    VC.modalPresentationStyle = .fullScreen
                    self.present(VC, animated: true, completion: nil)
                }
            }
        }
    }

간단하게 코드의 흐름을 살펴보자! 먼저 카카오톡이 설치되었는지 확인하고 카카오톡이 설치되었다면 카카오톡으로 로그인하기를 실행한다. 로그인에 성공하게 된다면 토큰이 발행된다. 로그인에 성공하게 된다면 카카오의 UserApi의 사용자 정보를 가져온다. 로그인에 성공한 사용자가 FirebaseAuth에 등록되지 않은 사용자라면 FirebaseAuth의 createUser를 통해서 회원가입을 진행하고 이미 등록된 사용자라면 로그인을 실행한다. 사용자 정보의 카카오 계정에서 이메일은 그대로 사용하고 사용자의 회원번호를 String으로 변환하여 비밀번호로 사용한다. 회원번호를 비밀번호로 사용하는 이유는 사용자가 가지고 있는 고유의 값으로 변하지 않기 때문이다. 

 

💣 [이슈 발생] KE101 오류 발생

아마 여기까지 읽게 된다면 아마 높은 확률로 에러가 발생했을 것이다...

나도 분명 시키는 대로 다했는데 오류가 발생했다...😭

KOE101오류

KOE101오류가 발생했다. 

공식문서에서 설명해준 오류 발생 원인

몇 번이고 앱 키를 확인했는데 분명 틀린 적이 없었다. 여러 방면으로 문제를 분석하던 중에 아주 황당하게도 문제를 해결했다....

바로 앱 키를 직접 입력하니 오류가 발생하지 않고 작동했다.

공식문서에 작성한대로 설정을 했지만 앱 키가 아예 적용되지 않았던 것이다...😤 설명이 조금 아쉬운 것 같다....

그렇다고 앱에 직접 앱 키를 작성할 수 없으니 다른 방안을 찾았다. 바로 info.plist에 앱 키를 따로 보관하는 방법이었다. 예전에 백엔드 교육을 들었을 때 API키를 yml에 보관해서 사용한 적이 있다. 비슷한 방법이다.

[info.plist]에 들어가서 [Information Property List]에서 +를 누른다. Key이름을 NATIVE_APP_KEY로 설정했다.(다른 이름도 가능)

타입은 String으로 지정한다. Value에 제공받은 앱 키를 입력한다.

위와 같이 코드를 작성하면 앱 키를 직접 입력하지 않고 안전하게 보관해서 사용할 수 있다. 

앞으로 API 키를 사용할 때 많이 활용해봐야겠다. 그리고 꼭 gitignore파일을 만들어서 .plist를 추가해서 git에 키 값이 공유되지 않도록 하면 좋을 것 같다.

(사실...키 값이 감지되면 git에 업로드가 안된다...내가 아는 이유는 직접 해봤기 때문이다...)

참고 : https://velog.io/@app_shawn/IOS-카카오-파이어베이스-로그인-연동-구현하기