[iOS] Firebase를 이용해서 회원가입 구현하기

정환우·2021년 1월 27일

Firebase app iOS swift

iOS

목록 보기

15/24

회원가입창을 구현하고, 입력받은 이메일, 이름, 비밀번호를 Firebase서버에 기록하는 방법에 대해 알아보자.

사전 준비

먼저, Firebase 프로젝트에 들어가면 왼쪽에 이런 창이 있는데,

Authentication, Realtime Database, Storage 3개를 활성화 해준다. 그리고 이것들을 사용하기 위해서 podfile 에

pod 'Firebase/Auth'
pod 'Firebase/Database'
pod 'Firebase/Storage'

를 추가해준다.

세팅을 마친 나의 podfile

그리고 Firebase 공식 문서 를 들어가면 xcode에서 Authentication, Realtime Database, Storage 를 사용하는 방법이 적혀있다. 별 어려운게 아니고 그냥 pod install 해준다음 Appdelegate.swift에 코드 한 줄 쓰고 내가 사용할 코드 창에서 import Firebase 뭐시기 해주면 되는 아주 간단한.. 공식 문서에도 아주 자세히 써져있다.

레이아웃

회원가입창은 text Field랑 Button 으로 꾸미면 된다. 저 위에 플러스 버튼은 프로필 사진을 추가할 곳인데 Image View이고, material.io에서 사진을 다운받아서 추가해주었다.

코드

텍스트 필드?

사실 정말 어려운 건 없는게, 구글 공식문서에 어떤 코드를 써야하는지 다 나와있어서 정말 그대로 베끼면 된다.
그래서 한 가지(사진) 이외에는 코드 설명을 따로 하지 않을거다!
버튼액션은 addTarget으로 작업해주었고(IBAction을 써도 무방할 듯), 그나마 가장 어려웠던 건 사진 이용하는 거였다.

강의에서는 UIImagePickerController.SourceType.photoLibrary 이걸 이용하라는데, 그래서 UIImagePickerController 클래스에 추가하고 등등 있었다. 이 방법을 이용해도 되는데, 난 처음 보니까 궁금해서 애플 공식 문서에서 찾아보았다.~~(모르는 것은 공식 문서를 처음 보는게 가장 좋은듯)~~ 공식 문서

너무 단호하게 Deprecated라고 되어있어서, 오잉? 하고 저기 파란색으로 칠해진 PHPickerViewController 를 클릭해서 찾아보았다. 저게 ios14 부터 지원하는 건데, 훨씬 편리하고 좋은 기능인 듯 하다. 그래서 저걸 이용하기로 했고, 저 프레임워크에 대한 자세한 설명은 ZeddiOS 이 페이지에서 정말 기가막히게 설명을 잘해 놓으셔서...이거 보고 따라했다.

완성 코드

import UIKit
import Firebase
import FirebaseAuth
import FirebaseDatabase	// 이상하게 그냥 Firebase에서 인식을 못한다. 그래서 따로 추가해주니까 됐다.
import FirebaseStorage
import PhotosUI

class SignUpViewController: UIViewController, UINavigationControllerDelegate, PHPickerViewControllerDelegate{
    
    @IBOutlet weak var email: UITextField!
    @IBOutlet weak var name: UITextField!
    @IBOutlet weak var password: UITextField!
    @IBOutlet weak var signUpButton: UIButton!
    @IBOutlet weak var cancelButton: UIButton!
    @IBOutlet weak var imageView: UIImageView!
    
    var color : String?
    let remoteconfig = RemoteConfig.remoteConfig()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let statusBar = UIView()
        self.view.addSubview(statusBar)
        statusBar.snp.makeConstraints { (m) in
            m.right.top.left.equalTo(self.view)
            m.height.equalTo(40)
        }

        color = remoteconfig["splash_background"].stringValue
        statusBar.backgroundColor =  UIColor(hex:color!)
        signUpButton.backgroundColor = UIColor(hex: color!)
        cancelButton.backgroundColor = UIColor(hex: color!)
        // Do any additional setup after loading the view.
        
        signUpButton.addTarget(self, action: #selector(signupEvent), for: .touchUpInside)
        cancelButton.addTarget(self, action: #selector(cancelEvent), for: .touchUpInside)
        
        
        let tapGesutre = UITapGestureRecognizer(target: self, action: #selector(imagePicker))
        imageView.addGestureRecognizer(tapGesutre)
        imageView.isUserInteractionEnabled = true

    }
    
    @objc func imagePicker(){
        var configuration = PHPickerConfiguration()
        configuration.filter = .any(of: [.images,.livePhotos])
        
        let imagepicker = PHPickerViewController(configuration: configuration)
        imagepicker.delegate = self
        self.present(imagepicker, animated: true, completion: nil)

    }
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true) // 1
        let itemProvider = results.first?.itemProvider // 2
        if let itemProvider = itemProvider, itemProvider.canLoadObject(ofClass: UIImage.self) {
            itemProvider.loadObject(ofClass: UIImage.self) { (image, error) in DispatchQueue.main.async { self.imageView.image = image as? UIImage  } }
    }
    }
    
    @objc func signupEvent(){
        Auth.auth().createUser(withEmail: email.text!, password: password.text!) { (authresult, err) in
            let uid = authresult?.user.uid
            let image = self.imageView.image?.jpegData(compressionQuality: 0.1)
            print("auth fetch")
            
            Storage.storage().reference().child("userImages").child(uid!).putData(image!, metadata: nil) { (data, err) in
                
                print("data fetch")
                Storage.storage().reference().child("userImages").child(uid!).downloadURL { (url, err) in
                    print("url fetch")
                    Database.database().reference().child("users").child(uid!).setValue(["name":self.name.text,"profileImageUrl":url?.absoluteString])
                }
            }
        }
    }
    
    @objc func cancelEvent(){
        
        self.dismiss(animated: true, completion: nil)
    }