로그인 정보 자동완성으로 사용자 편의성 높이기(feat. Swift Password AutoFill)

자동완성 기능 구현 결과물

 iOS에는 로그인 정보만 저장되어 있다면 자동완성으로

간편하게 로그인할 수 있는 Password AutoFill 기능이 있습니다.

물론 처음 로그인할 때는 로그인 정보를 저장하기 위해 아이디와 패스워드를 모두 입력해야 하지만,

한번 로그인 정보를 저장해 놓으면 이후 재로그인 시 무척 편해집니다!

---

준비물

1. 유료 애플 개발자 계정 
2. 도메인 주소 
3. 웹 서버

 

Password AutoFill 이해하기

iOS 기기에는 은행 앱, 배달 앱 등 많은 앱들이 존재하고 있습니다.

이러한 많은 앱들에서 저장된 로그인 정보 중 특정 서비스의 로그인 정보를 가져오려면 기준이 되는 유니크한 데이터가 필요합니다.

그것이 바로 도메인 주소입니다.

---

그러면 도메인 주소만 설정하면 끝일까요? 아뇨 ㅎㅎ.. 카카오톡앱에 네이버 도메인 주소를 설정하면 네이버 로그인 정보를 불러올 수 있잖아요..? 그러면 안 되겠죠!

그래서 Apple은 도메인 주소가 포함된 특정 url에 앱을 특정할 수 있는 데이터를 작성하라고 합니다. 도메인 주소가 포함된 특정 url은 서비스하는 주체만이 접근할 수 있기 때문이죠.

정리하면, 시스템에서 앱에 설정된 특정 url로 접근했을 때 보여지는 앱 식별 데이터와 켜져있는 앱과 일치해야만 Password AutoFill 기능이 작동하게 됩니다.

---

 

이해를 위해 예시로 배달의 민족 Password AutoFill 워크플로우 다시 설명해 보겠습니다.

1. 배달의 민족이라는 앱에 도메인 주소를 설정합니다. (baemin.com이라는 도메인 주소)

2. iOS 시스템은 https://www.baemin.com/.well-known/apple-app-site-association 이라는 특정 url에 접근하여 켜져 있는 앱을 특정할 수 있는 데이터를 확인합니다. 위의 웹사이트 들어가면 JSON 형식으로 되어있는데 시스템은 appID로 앱을 특정하는 것입니다.

3. 로그인 정보 자동완성 기능 완성

정말 쉽죠..!?

 

Password AutoFill 구현하기

[ 서버 ] 준비물 만들기

1. 유료 애플 개발자 계정 (1년에 99달러) (생략) 
2. 도메인 주소 (https 필요)
3. 웹 서버 

사실 Password AutoFill 기능 구현은 간단한데.. 준비물 만드는 게 약간 오래 걸리고 비용도 발생할 수 있습니다. 😭

저는 이번에 도메인 주소 만드는데 1년에 12달러, 웹 서버 구축하는데 한 달에 3.5 달러 정도 들었습니다.

돈도 들고 시간도 많이 들 수 있지만 이번에 구현해보면서 iOS 지식뿐 아니라 개발 관련 지식을 폭넓게 얻을 수 있어서 좋았습니다. ㅎㅎ 

---

1번 준비 하는법 -> https://hongz-developer.tistory.com/150

그럼 2번과 3번을 준비해 봅시다.

일단 저는 서비스할 목적이 아니라 공부하고 테스트해 볼 용도로서 쉽게 따라 할 수 있을만한 것들로 찾아봤습니다.

찾아보다가 좋은 유튜브 영상 발견했습니다. 이거 하나만 보면 2, 3번 준비물 다 만들 수 있습니다.

AWS의 Lightsail을 사용하여 클라우드 서버에 Node.js를 설치하고 웹 서버를 호스팅 하는 영상입니다.

 

https://www.youtube.com/watch?v=rtshCulV2hk&list=WL&index=1

영상 보면 중간에 Google Domain의 도메인 주소 사용하는데 Google Domain 서비스 종료되었더라고요,,

대신 Google Domain 사이트에서 Squarespace로 도메인 주소 만들라고 연결시켜 주는데 굳이 Squarespace 아니어도

도메인 만들 수 있는 서비스 업체가 많기 때문에 찾아보시면 무료 or 싼 가격에 도메인 주소 구매하실 수 있습니다. (가비아, freenon 등)

 

[ 앱 ] 도메인 주소 설정하기

1, 2, 3번 순차적인 순서로 진행하면 됩니다.

3번 같은 경우 <service>:<fully qualified domain> 형태로 적으면 됩니다. 

service 같은 경우 앱 클립(appclips), 유니버셜 링크(applinks), 웹 자격 증명(webcredentials)이 있는데,

배달의 민족 AASA 파일 (https://www.baemin.com/.well-known/apple-app-site-association)을 보니 applinks만 있는데 Password AutoFill 기능이 작동하길래 저도 applinks만 설정 후 Password AutoFill 기능 테스트 해봤는데 작동되었습니다.

물론 웹과 앱을 연결시켜 주는 webcredentials 설정해도 Password AutoFill 기능 잘 작동합니다.

공식문서 참고
https://developer.apple.com/documentation/xcode/supporting-associated-domains

 

[ 앱 ] 아이디, 패스워드 텍스트 필드 설정하기

로그인 정보를 자동완성하려면 어떤 텍스트 필드가 아이디 텍스트 필드인지 패스워드 텍스트 필드인지 구분할 수 있어야 합니다.

그것을 위한 텍스트 필드를 설정해 줍니다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpEmailTextField()
        setUpPasswordTextField()
    }

    // 아이디 텍스트 필드 설정
    func setUpEmailTextField() {
        emailTextField.textContentType = .username
        emailTextField.keyboardType = .emailAddress
    }
    
    // 패스워드 텍스트 필드 설정
    func setUpPasswordTextField() {
        passwordTextField.textContentType = .password
        passwordTextField.isSecureTextEntry = true
    }
}

공식문서 참고
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_a_text_input_view

 

[ Web ] 도메인 주소/.well-known/apple-app-site-associtation 위치에 파일 올리기

저 위에 준비물 만들기 영상을 보고 웹 서버를 구축하셨으면 아래의 상태일 것입니다. 

이미지 클릭 시 해당 깃허브 사이트로 이동해요!

위의 상태에서 아래의 과정들을 진행해 줍니다.

1. 웹서버의 루트에 .well-known 폴더를 생성합니다.
2. .well-known 하위에 apple-app-site-association 파일을 생성합니다. 확장자는 없어야 합니다.
3. apple-app-site-association 파일 내용은 아래의 내용을 복사 붙여 넣기 합니다.

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

"ABCDEF1234.com.passwordautofillstudy.app" -> 본인 앱의 정보로 변경하셔야 합니다.

ABCDEF1234 -> Apple Developer 웹페이지에 나와있는 TeamID
com.passwordautofillstudy.app -> Bundle Identifier

 

그러면 아래와 같은 상태가 됩니다.

이미지 클릭 시 해당 깃허브 사이트로 이동해요!

 

[ Web ] index.js 변경

iOS 시스템이 도메인 주소/.well-known/apple-app-site-association 에 접근할 때

apple-app-site-association파일 내용을 다운로드할 수 있도록 아래와 같이 index.js를 변경해야 합니다.

const express = require("express");
const fs = require("fs");
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

// 도메인 주소/.well-known/apple-app-site-association로 get 요청 받을 시
app.get("/.well-known/apple-app-site-association", (req, res) => {
  // 파일 시스템에서 apple-site-association 파일을 읽습니다.
  fs.readFile(__dirname + '/.well-known/apple-app-site-association', 'utf8', (err, data) => {
    if (err) {
      console.error("Error reading file:", err);
      res.status(500).send("Internal Server Error");
      return;
    }
    // 파일 내용을 그대로 응답으로 전달합니다.
    res.type('json').send(data);
  });
});

 

이러면 끝!!!!@@@@@@@@@@@@

AWS LightSail에서 node index.js 명령어로 서버를 실행시키고

앱을 켜보면..

이미지 클릭 시 해당 앱의 깃허브 사이트로 이동해요!

완료

 

 

---

참고

Password Autofill 스터디 깃허브
https://github.com/HongzCloud/PasswordAutoFillStudy

Password Autofill 설명
https://developer.apple.com/documentation/security/password_autofill/

Password Autofill 관련 WWDC2019, WWDC 2020
https://developer.apple.com/videos/play/wwdc2019/516
https://developer.apple.com/videos/play/wwdc2020/10115

앱과 웹사이트를 연결하여 기본 앱과 브라우저 경험을 모두 제공하기
https://developer.apple.com/documentation/xcode/supporting-associated-domains

Password Autofill Workflow 
https://developer.apple.com/documentation/security/password_autofill/about_the_password_autofill_workflow

Password AutoFill로 로그인 정보 자동으로 채우기 위한 TextField 설정하기
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_a_text_input_view