ref : fast campus
앱 실행 화면 gif
- 이 영상을 캡처하면서 알게됐는데, 아이폰에서 비밀번호 관련 영상 캡처는 자동으로 보이지 않게 됩니다.
개발 정보
- 개발언어 : swift
- 개발환경 : Xcode, Storyboard
- 앱 설명 : Firebase OAuth 를 이용해서 로그인 화면을 구현해봤습니다.
- 활용기술 : Firebase
메인 스택뷰 Multiplier 설정
메인 이미지와 라벨이 담긴 스택뷰를 Center Horizontally, Center Vertically 설정해준 뒤에, Vertical AlignCenter Y 의 Multiplier를 4/5 로 설정해주면, 중간에서 조금 위에 위치시킬 수 있습니다.
버튼에 이미지 설정
- 미리 저장한 이미지 파일을 Assets 에 옮깁니다.
- Image 속성에서 저장한 Assets 파일 이름을 지정합니다.
텍스트 필드의 속성들
1. Keyboard Type
- 다음과 같이 Keyboard Type 에서 E-mail Address 를 선택하면 이메일 타입의 키보드를 설정해줄 수 있게 됩니다.
- 그 외에 Number Pad, Phone Pad 등 다양한 키보드 타입을 선택할 수 있습니다.
2. Secure Text Entry
- 비밀번호를 입력할 때는 UI 에 비밀번호가 직접 노출되지 않고 * 표시 등으로 가려지는 것이 좋습니다. Secure Text Entry 를 체크 해주면 그런 기능을 제공해줍니다.
Text field 의 delegate 설정
- firebase 인증 에 전달할 text 값을 받으려면 textfield 에 delegate 설정을 해야합니다.
- EnterEmailViewController.swift 의 코드 일부분 (delegate 관련)
override func viewDidLoad(){ ... emailTextField.delegate = self passwordTextField.delegate = self ... } // UITextFieldDelegate 설정 extension EnterEmailViewController: UITextFieldDelegate { // TextField 에 키보드 입력이 끝나면 키보드 버튼을 내리는 코드. func textFieldShouldReturn(_ textField: UITextField) -> Bool { view.endEditing(true) return false } // 이메일, 비밀번호 입력 하고 "다음" 버튼을 활성화 시키는 코드. func textFieldDidEndEditing(_ textField: UITextField) { let isEmailEmpty = emailTextField.text == "" let isPasswordEmpty = passwordTextField.text == "" nextButton.isEnabled = !isEmailEmpty && !isPasswordEmpty } }
MainViewController 설정
- 로그인을 마치고 온 메인 뷰 컨트롤러. 뒤로가기나 pop gesture로 뒤로가면 다시 로그인 페이지가 나와서 어색하기 때문에 pop gesture를 막아줍니다.
- 로그아웃 버튼을 눌렀을 떄는 Root View Controller 로 돌아가게 합니다.
import UIKit class MainViewController: UIViewController { @IBOutlet weak var welcomeLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() // 뒤로가면 이메일 페이지기 때문에 뒤로가지 못하게 막음 navigationController?.interactivePopGestureRecognizer?.isEnabled = false } override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) navigationController?.navigationBar.isHidden = true } @IBAction func logoutButtonTaped(_ sender: Any) { self.navigationController?.popToRootViewController(animated: true) } }
Firebase에 프로젝트 등록, 연결하기
- Firebase console 에서 새 프로젝트를 추가한뒤, iOS 를 클릭합니다.
- 다음과 같은 창에서 Apple 번들 ID 만 입력하고 앱 등록을 누릅니다. 앱 닉네임, AppStore ID 는 선택하지 않아도됩니다.
번들 ID 는 Xcode 에서 Bundle Identifire 를 복사 붙여넣기 하면 됩니다.
- 구성 파일을 다운로드 한뒤 XCode 에 추가합니다.
이제, CocoaPods 로 Firebase SDK 를 설치합니다.
- 현재 프로젝트 폴더를 터미널에서 엽니다.
- pod init 명령어를 입력합니다. 그러면 프로젝트 폴더에 Podfile 이 생성됩니다.
- Podfile 에 다음과 같은 명령어를 추가한 뒤,
pod 'Firebase/Auth'
터미널에서 pod install 을 진행합니다.
- 터미널 작업이 끝난 뒤 다시 폴더를 확인해보면 파일들이 더 생겨있는 것을 확인 할 수 있습니다. 이중에서 'xcworkspace' 확장자 파일을 가진 파일이 있는데, 이 파일이 가장 중요합니다.
현재 개발하던 파일을 놔두고, 이제는 이 workspace 파일에서 개발을 시작합니다. 여기서 개발을 진행해야 설치한 Pod을 적용할 수 있습니다.
- workspace 파일로 들어가서, AppDelegate.swift 파일에 다음과 같은 코드 2줄을 추가합니다.
import Firebase
FirebaseApp.configure()
이렇게 하면 Firebase 설치 작업이 완료되고, Firebase 와 프로젝트 연결과정이 모두 완료됩니다.
이메일 / 비밀번호 로그인 설정
- Firebase 콘솔에서 Authentication 시작하기를 클릭합니다.
- 이메일 / 비밀번호 사용을 활성화 합니다.
- EnterEmailViewController.swift 에 로그인 코드를 작성합니다.
import FirebaseAuth ... @IBAction func nextButtonTapped(_ sender: UIButton) { // Firebase 이메일 / 비밀번호 인증 let email = emailTextField.text ?? "" let password = passwordTextField.text ?? "" // 신규 사용자 생성 Auth.auth().createUser(withEmail: email, password: password) { [weak self] authResult, error in guard let self = self else {return} if let error = error { let code = (error as NSError).code switch code{ case 17007: // 이미 가입한 계정일 때 // 로그인 하기 self.loginUser(withEamil: email, password: password) default: self.errorMessageLabel.text = error.localizedDescription } } else { self.showMainViewController() } } } private func showMainViewController() { let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main) let mainViewController = storyboard.instantiateViewController(withIdentifier: "MainViewController") mainViewController.modalPresentationStyle = .fullScreen navigationController?.show(mainViewController, sender: nil) } private func loginUser(withEamil email: String, password: String){ Auth.auth().signIn(withEmail: email, password: password) { [weak self] _, error in guard let self = self else {return} if let error = error { self.errorMessageLabel.text = error.localizedDescription } else { self.showMainViewController() } } }
- MainViewController.swift 에 이메일 로그인 결과를 출력하는 코드를 작성합니다.
override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) navigationController?.navigationBar.isHidden = true let email = Auth.auth().currentUser?.email ?? "고객" welcomeLabel.text = """ 환영합니다. \(email)님 """ }
- 로그인, 회원가입 성공 시 Firebase 콘솔에서 회원가입한 계정의 목록을 확인할 수 있습니다.
Google 로그인 구현
- Firebase Authentication 에서 Google 을 추가합니다.
- PodFile 에 GoogleSignIn 을 추가하고, 터미널에서 pod install 합니다.
- 맞춤 URL 스키마를 구성해야합니다.
위에서 다운로드했던 구성 파일 GoogleService-Info 로 들어가서 REVERSED_CLIENT_ID 값을 복사한 뒤, App TARGETS Info 의 URL TYPES 안에 있는 URL Schemes 에 값을 붙여넣습니다. 다른 값들은 비워놔도 됩니다.
이 값으로 구글은 위임할 서비스를 구분합니다.
이걸로 사전 작업이 끝났고, 코드를 작성하면 됩니다.
문제 해결 경험
다음과 같은 코드를 작성했는데 계속 오류가 발생했습니다.
GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID서치 결과, 함수 형태가 업데이트 되었음을 알게 됐습니다..
https://stackoverflow.com/questions/68950569/gidsignin-sharedinstance-sharedinstance-not-a-function
개발을 통해 얻어갈 것들
- Firebase 로 로그인 OAuth 서버를 구축할 수 있습니다.
- Multiplier 를 통해 Horizontally Center, Vertically Center 에서 비율을 조금 조정할 수 있습니다.
- Xcode Storyboard 에는 TextField 의 속성을 변경해주는 편리하고 다양한 기능들이 있습니다. (Keyboard 속성, password 가리기 등)
- UITextFieldDelegate 의 메서드를 활용하면 질 높은 개발을 할 수 있습니다. (TextField 입력 후 키보드 내리기, 다음 버튼 활성화 등)
- navigationController?.interactivePopgestureRecognizer?.isEnabled = true 로 팝 제스처를 막을 수 있습니다.
- nil 병합 연산자 ?? 를 사용해서 간단하게 언래핑을 할 수 있습니다.
- Xcode 터미널에 po error 를 입력하면 error 를 자세히 볼 수 있습니다.
- Apple 의 규정에 의해서 이런 OAuth 기능을 넣으려면 반드시 Apple 로 로그인 기능을 포함해야 합니다.
안녕하세요, iOS 와 알고리즘에 대한 글을 씁니다.