[타닥] Firebase를 이용한 전화 로그인 구현기능 만들기

파이어베이스 로고

Firebase는 구글에서 제공하는 클라우드 서비스이다. 가장 핫한 2개의 클라우드 서비스는 Firebase말고 AWS라는 아마존 웹서비스가 또 있지만 타닥을 만들 때는 firebase를 이용할 것이다.(필자는 AWS보다 Firebase가 훨씬 직관적이라고 생각한다.)

 

firebase는 구글에서 만들었기에 다양한 로그인 연동을 지원한다. 물론 자신이 회원가입을 만들 수 있지만 나는 타닥에 휴대폰 인증으로 들어가는 식의 로그인을 만들 것이다.(예를 들면 당근마켓을 들어갈 때 처음에만 휴대폰인증을 하면 다음에는 자동으로 들어가지는 방식이다)

 

이것을 위해서는 일단 나의 앱과 firebase를 연동해야하는 선작업이 필요하다. 이것은 너무 쉽기에 다음의 구글이 제공하는 방법으로 차근차근 해결하자(firebase.google.com/docs/ios/setup?authuser=0)

 

BUT!!!! 위에서 pod 파일에     pod 'Firebase/Analytics' 를 쓸 때!!! pod 'Firebase/Auth'   pod 'Firebase/Core'도 같이 적어야한다!! 반드시!! 그 이유는 저런 한 줄 한 줄이 바로 내가 구글에서 이용하겠다고 선언하는 서비스들이기에 여기서 Auth를 선언하지 않으면 로그인연동을 구현할 수 없다. 밑은 pod파일의 예시이다.

연동이 끝나면 프로젝트로 가서 코드를 적어야 한다.

왼쪽부터 Viewcontroller, PhoneNumberLogInViewController, PhoneNumberVerifyViewContoller이다.

전체적인 구성은 왼쪽에 ViewController에 코드로 버튼을 추가하고 그것은 로그인하기 버튼이다. 그후 2번째 ViewController(PhoneNumberLogInViewController)가 뜨면 거기에 핸드폰번호를 입력하고 3번째 ViewController(PhoneNumberVerifyViewContoller)에 2번째 적은 핸드폰번호로 전송된 인증번호를 입력하고 버튼을 눌러 로그인하는 형태이다.

 

첫번째 ViewController부터 코드를 보자!

쉬우니 쫄지말자..ㅠ,.ㅠ

전체적인 구조는 view가 로드되면 handlePhoneVerificationLogin 함수가 실행된다. 이 함수는 loginButton버튼을 프로그래밍적으로 만들고 여기서 중요한것은 loginButton에 addTarget을 하는 부분이다. 이것은 이 버튼이 눌릴 때 loginPhoneNumber(loginButton:UIButton)함수가 실행된다는 것이고 그 함수는 EmailLinkSignIn세그웨이를 실행하여 2번째 ViewContoller로 이동한다. 밑의 verifyAndSignInPhone 함수는 이 화면으로 다시 올 때 실행되는 부분이므로 밑에서 설명하기로 하자!

 

그러면이제 2번째 ViewController의 코드를 보자

일단은 FirebaseAuth 를 임포트하고 phone이라는 이름으로 UITextField를 연동시키고 verifyPhoneNumber라는 함수와 버튼도 연동을 시킨다. (print하는 함수가 많지만 이것은 확인을 위한 것 뿐..)

 

verifyPhoneNumber라는 함수안에는 휴대폰번호를 입력하고 버튼을 눌렀을 때 일어나야하는 일이다.

안을 보면 PhoneAuthProvider.povider().verifyPhoneNumber는 구글이 만들어논 함수로 휴대폰 인증을 시작하는 함수이다. 보면 text를 필요로하는 걸보면 휴대폰으로 문자를 보내려고 하는 것 같다. error가 생기면 함수를 끝내고 그게 아니면 UserDefaults라는 가벼운 내장DB에 authVerificationID라는 키로 VerificationID를 저장한다. 그 후 다음화면으로 넘어가는 segue가 실행된다.

 

'PhoneAuthProvider.povider().verifyPhoneNumber는 그 번호로 VerificationID를 만드는 구나' 생각하자!!

 

그 후 마지막 3번째 ViewController는 아무것도 없다.. 왜일까??? 바로 그 textField에 인증번호를 넣고 버튼을 눌러 다시 처음으로 돌아올 때! 아까 1번째 ViewContoller의 밑에 함수가 실행되니까 3번째 ViewContoller에서는 할 게 없다.. ㅋㅋㅋ

이 부분이 바로 1번째 ViewController의 마지막 부분이다. 이 함수는 다시 화면으로 오는 segue가 실행될 때 실행되는 부분이다. 보면  처음 2줄은 3번째 ViewController에서 우리가 입력한 인증코드를 가져오고 3번째 줄에서는 내장DB에 넣어두었던 authVerificationID를 꺼낸다. 그 후에 이 2개를 이용해서 firebase에 새로운 user를 만들 때 사용해야하는 credential를 만든다. 그 후에 그 credential로 로그인을 시도하는 구조가 된다. (signIn함수가 login을 실행하는 함수이다.)

 

디테일하게는 일단 재 로그인을 인식시킬 수 있게 해야지만 일단은 연동은 끝났다!!

이렇게 보듯 구글이 미리 복잡한 Backend부분은 모두 실해해주었다. 우리는 그냥 편하게 사용만 하면 된다.