Firebase Auth 적용하기(전화번호 인증, Swift)

 

안녕하세요!! 이번엔 Swift에서 Firebase Auth를 적용하는 방법에 대해서 정리했습니다.

이번 글도 노션에서 옮겨와 말이 짧습니다!! 양해해주세용😽

---

Firebase Auth란?

Firebase Auth는 회원가입, 로그인 등 인증과 관련된 서비스로

핸드폰 번호 인증 방식,

Email / Password 인증 방식,

OAuth 2.0기반의 SNS(페이스북, 카카오톡, 네이버, 트위터 등) 인증 방식

등으로 쉽게 회원가입 및 로그인을 가능하게 해주는 서비스다.

 

왜 써야할까?

유저 정보같은 민감한 데이터들을 내 DB에 저장해두는 것은 보안에 취약할 것 같다는 생각이 든다.

구글이라면 그래도 보안적인 측면에서 더 안전하지않을까??

데이터가 구글에 종속되는 것이 싫다면 직접 구현하거나 다른 방법을 찾아봐야 할 것 같다.

 

구현

프로젝트에 파이어베이스를 연결하는 것은 공식문서에 깔끔하게 설명되어있어서 생략한다.

파이어베이스와 앱을 연결했으면, 파이어베이스의 대쉬보드에 있는 Auth로 넘어가서 어떤 로그인 방법을 추가할 것인지 선택할 수 있다.

 

여러 로그인 방법을 선택할 수 있다.

 

이번 프로젝트에서는 전화번호로 인증할 수 있는 방법을 추가할 것이다.

전화 인증을 설정하려면 추가 구성을 해야한다고 한다.

원하는 플랫폼을 누르면 공식문서로 어떻게 추가 구성을 해야하는지 자세히 나와있다. 일단 저장을 눌러주고 넘어가면 된다.

 

 

그럼 공식문서에 나와있는 1의 과정이 끝났다.

2에는 로그인 요청이 내 앱에서 발생한 것인지 확인하는 방법에 대한 정보를 다루고 있는 것 같다. (봇을 통해 요청을 보내는 것을 방지)

 

로그인 요청이 들어오면, 푸쉬를 통해 토큰을 보내주는 방식과 푸쉬를 이용할 수 없는 상황에서는 reCAPTCHA 방식을 사용한다는 것 같다.

이제 푸시 알림을 사용 설정하는 것 부터 시작해야한다.

 

Xcode 프로젝트 → Signing & Capabilities로 들어온 다음, 왼쪽 상단에 있는 + Capability 버튼을 눌러준다.

 

 

그리고 Push Notifications를 추가해주면 된다.

 

 

같은 방법으로 Background Modes 또한 추가시켜준다.

추가한 뒤에는 Remote notifications를 체크해주면 된다.

 

 

 

AppDelegate로 돌아가서 UserNotifications를 import 해준다.

 

그리고 didFinishLaunchingWithOptions에 코드를 추가한다.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        
        UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { _, _ in
            
        }
        
        application.registerForRemoteNotifications()
        
        return true
    }

 

이후, 애플 디벨로퍼 페이지로 이동한 뒤, Certificates, Identifiers & Profiles로 이동한다.

 

Identifiers 탭으로 들어간 뒤, 해당 프로젝트의 Identifier를 클릭한다.

 

 

들어가서 컴포넌트를 push notifications를 검색해서 체크한 뒤, configure 버튼을 눌러준다.

 

버튼을 누르게 되면, 이런 창이 나오게 된다.

 

개발중일 때 테스트 용도로 사용한다면 Development SSL Certificate를 Create 하면 되고,

앱 출시용으로 사용한다면 Production SSL Certificate를 Create하면 된다.

 

 

 

선택하고 나면 이런 화면이 나올텐데, 여기서 KeyChain 앱을 실행한다.

cmd+space로 검색을 통해 키체인 접근을 실행할 수 있다.

 

 

키체인 접근에서, 인증서 지원 → 인증 기관에서 인증서 요청을 눌러준다.

 

여기서 이메일 주소와 일반 이름을 채운 뒤, 디스크에 저장됨을 체크하고 계속하기를 누르면 인증서 파일이 저장된다.

 

이 파일을 애플 디벨로퍼 페이지의 Choose File을 눌러서 선택해주면 된다.

그럼 이렇게 Certificate를 다운로드 할 수 있는 창이 나오게 된다.

 

 

다운로드 하고 실행하게 되면 키체인에 인증서가 추가된다!!

 

 

다시 애플 디벨로퍼 페이지에서 Keys 탭으로 들어가준다.

 

 

Keys의 옆에 있는 + 버튼을 누르면 키를 추가할 수 있는 화면이 나온다.

등록된 키 파일은 한번만 다운로드 받을 수 있으니 주의해야한다.

 

 

그리고 파이어베이스 프로젝트 설정 → 클라우드 메세징 탭으로 넘어간다.

 

 

아래로 내려가면 APN 인증 키를 업로드 할 수 있는 부분이 나온다. 여기서 다운받은 인증 키를 업로드 해준다.

 

Key ID는 APN 인증 키를 받을 때 발급받은 Key ID를 입력해주면 된다.

 

팀 ID는 애플 디벨로퍼 페이지 → 멤버십에서 확인 가능하다.

 

여기까지 등록했다면 자동 알림 수신 시작까지의 부분을 끝마친 것이다.

 

 

이제 reCAPTCHA 인증 부분을 처리하면 된다.

 

GoogleService-Info.plist에 가서 REVERSED_CLIENT_ID의 값을 복사해준다.

 

 

프로젝트 → TARGETS → Info에서 URL Types를 추가해준 뒤, 값을 붙여넣기 해준다.

 

이렇게 하면 reCAPTCHA에 대한 인증 부분도 처리할 수 있게 된다.

 

 

이제 사용자 디바이스로 푸시를 받을 수 있게 됐으니, 사용자가 전화번호를 입력했을 때 인증 코드를 보내는 것을 구현하면 된다.

View Controller에서 FirebaseAuth를 import 한 뒤, 코드를 추가한다.

@objc func buttonClicked(_ sender: UIButton) {
      PhoneAuthProvider.provider()
				.verifyPhoneNumber("+82 \\(text)", uiDelegate: nil) { (verificationID, error) in
            if let id = verificationID {
                UserDefaults.standard.set("\\(id)", forKey: "verificationID")
            }
            if let error = error {
                print(error.localizedDescription)
                return
            }
        }
}

버튼을 누르면 실행되는 함수로, phoneNumber에는 “+82 1012345678”, 혹은 “+82 01012345678”

이런 문자열 형태로 번호를 넣어줘야한다. 국가코드는 꼭 있어야 하고 없을 시 InvalidFormat 에러가 들어온다.

 

verifyPhoneNumber:UIDelegate:completion:을 호출하면 Firebase가 앱에 푸시 알림을 보내거나 사용자에게 reCAPTCHA 인증 표시한다.

 

앱이 알림을 수신하거나 사용자가 reCAPTCHA 인증을 완료하면,

Firebase는 지정된 전화번호로 인증 코드가 포함된 SMS 메시지를 보내고

completion handler에 인증 ID를 전달한다. 인증 코드와 인증 ID가 모두 있어야 사용자를 로그인 처리할 수 있다.

 

인증 ID는 UserDefaults를 통해 저장해도 되고, 다른 방법으로 저장해도 된다.

이제 인증 코드와 ID로 로그인을 구현하면 된다.

 

인증 코드 및 인증 ID를 사용하여 FIRPhoneAuthCredential 객체를 만들어준다.

@objc func verificationButtonClicked(_ sender: UIButton) {
        guard let verificationID = UserDefaults.standard.string(forKey: "verificationID"), let verificationCode = verificationNumberTextField.text else {
            return
        }
        
        let credential = PhoneAuthProvider.provider().credential(
            withVerificationID: verificationID,
            verificationCode: verificationCode
        )

		logIn(credential: credential)
    }

 

 

그리고 FIRPhoneAuthCredential 객체로 사용자를 로그인 시켜준다.

func logIn(credential: PhoneAuthCredential) {
        Auth.auth().signIn(with: credential) { authResult, error in
            if let error = error {
                print(error.localizedDescription)
                print("LogIn Failed...")
            }
            print("LogIn Success!!")
            print("\\(authResult!)")
        }
    }

 

 

이후, 시뮬레이터가 아닌 실기기에서 테스트해보면 LogIn이 잘 구현되는 것을 확인할 수 있다!!