Swift 앱에서 아이디와 비밀번호 자동완성 구현 (Firebase Hosting 사용)

cheshire0105·2024년 10월 21일

목록 보기

23/45

1. 개요

Swift 앱에서 사용자 경험을 개선하기 위해 아이디와 비밀번호 자동완성 기능을 구현할 수 있다. 이 글에서는 Firebase Hosting을 사용하여 아이디와 비밀번호 자동완성 기능을 구현하는 방법을 단계별로 설명한다.

서버가 필요한 이유는 iOS가 암호화된 서버를 통해 사용자 정보를 안전하게 보호하기 위해서다. iOS는 SSL 인증서를 기반으로 해당 서버가 안전하게 암호화되어 있는지 확인하고, 이를 통해 사용자의 민감한 정보가 해킹 등으로부터 보호받을 수 있다고 판단한다. 만약 서버가 안전한 인증 체계를 제공하고 있다면 iOS는 이를 신뢰하고, 자동완성 기능을 통해 아이디와 비밀번호를 제공한다. 결국, 서버는 iOS와 사용자의 데이터를 안전하게 연결하기 위해 필수적이다.

따라서 자체 서버가 필요하고 그 서버와 연결해주는 과정이 필요하다. 도메인을 구매하고 서버를 호스팅해야 한다. 하지만 이번 글에서는 Firebase Hosting을 이용하여 무료로 호스팅하는 방법을 안내한다.

2. Firebase 프로젝트 설정

2.1 Firebase 콘솔에서 프로젝트 생성

Firebase 콘솔에 접속하여 새로운 프로젝트를 생성한다.
여러 Firebase 기능 중에 Hosting 기능을 사용한다.
안내하는 일련의 과정이 나오는데, 프로젝트 파일을 만들고 그곳에서 터미널을 열어서 시작하는 것을 추천한다. 그렇지 않으면 사용자 이름 폴더 안에 바로 생성되어 찾기가 어렵다.
Hosting 설정이 완료되면 public 폴더가 생기는데, 그 안의 index.html은 호스팅되는 앱의 모양을 만드는 부분이다.
숨겨져 있는 .well-known 폴더 안에 apple-app-site-association 파일을 생성해야 한다. 그 안의 코드는 다음과 같다.

{
  "webcredentials": {
    "apps": [
      "ABCDEF1234.com.passwordautofillstudy.app"
    ]
  }
}

"ABCDEF1234.com.passwordautofillstudy.app" 부분은 본인 앱의 정보로 변경해야 한다.
- ABCDEF1234는 Apple Developer 웹페이지에 나와 있는 Team ID이다.
- com.passwordautofillstudy.app는 Bundle Identifier이다.

이런 식으로 생성되어야 하고, 파일 형식은 따로 없어야 한다. 새 파일을 만드는 방법은 터미널에서 touch 파일이름을 입력하면 된다.

이렇게 생성하고 호스팅하면 서버에 올라가고 호스팅이 완료된다. 이제 서버는 완료되었고 iOS 앱 단에서 편집하면 된다.

3. Firebase Hosting을 이용한 앱 배포

3.1 Firebase CLI 설치

Firebase Hosting을 사용하기 위해 Firebase CLI를 설치한다. 터미널에서 다음 명령어를 실행한다.

npm install -g firebase-tools

3.2 Firebase 프로젝트 초기화

프로젝트 디렉토리에서 다음 명령어로 Firebase Hosting을 초기화한다.

firebase init

Hosting 옵션을 선택한다.
Firebase 콘솔에서 생성한 프로젝트를 선택한다.
public 폴더를 기본 디렉토리로 설정한다.

3.3 Firebase Hosting에 앱 배포

앱을 Firebase Hosting에 배포하려면 다음 명령어를 사용한다.

firebase deploy

성공적으로 배포되면, Firebase Hosting에서 제공하는 URL을 통해 앱에 접근할 수 있다.

4. 아이디와 비밀번호 자동완성 구현

4.1 UITextFieldDelegate 설정

아이디와 비밀번호 입력란에 자동완성 기능을 적용하기 위해 UITextFieldDelegate를 설정한다.

class LoginViewController: UIViewController, UITextFieldDelegate {
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        emailTextField.delegate = self
        passwordTextField.delegate = self

        // 자동완성 타입 설정
        emailTextField.textContentType = .username
        passwordTextField.textContentType = .password
    }
}

textContentType 속성을 설정하면 iOS에서 자동완성 데이터를 제안할 수 있다. emailTextField는 .username, passwordTextField는 .password로 설정한다.

4.2 Firebase Authentication을 사용한 로그인 구현

아이디와 비밀번호 입력을 통해 로그인할 수 있도록 Firebase Authentication을 이용한다.

import FirebaseAuth

func loginUser(email: String, password: String) {
    Auth.auth().signIn(withEmail: email, password: password) { authResult, error in
        if let error = error {
            print("Error signing in: \(error.localizedDescription)")
            return
        }
        // 로그인 성공 처리
        print("User signed in successfully")
    }
}

사용자가 아이디와 비밀번호를 입력하면 Auth.auth().signIn 메소드를 통해 Firebase 서버에서 인증이 진행된다.

5. 결론

Swift 앱에서 Firebase Hosting을 사용하여 아이디와 비밀번호 자동완성 기능을 쉽게 구현할 수 있다. Firebase Authentication을 이용한 로그인 기능과 함께 사용하면 사용자에게 편리한 인증 경험을 제공할 수 있다. Firebase Hosting을 이용해 배포하는 과정도 간단하며, 앱 배포와 관리를 효율적으로 할 수 있다.

6. 추가적으로...

지금은 앱이 자동 완성이 잘 되는데 앱 이름이 web.App 이렇게 뜬다. Firebase 기본 도메인 이기 때문에 그런거 같은데 이걸 해결하려면 도메인을 사야 한다. 그건 추후에....
또한 웹 호스팅을 할 때의 화면도 깔끔하게 하고 싶은데 소스코드 자체가 뜬다. 이것도 차차 알아보자...