[Swift] apple login 구현하기

반응형

다른 블로그들 보면 직접 공식문서 보면서 공부한 내용을 정리하시던데,, 나도 그렇게 하고 싶은데..

시간이 상당히 많이 걸리겠지만, 도전..해봐야지..

 

이전에 애플로그인을 구현할 때는 그냥 블로그들 참고해서 코드를 가져오고, 가져온 코드만 공부해서 구현했었는데

시간도 있겠다, 의욕도 있겠다 한 번 해봐야겠다.

 

그나저나 한글 공식문서도 있으면 너무 좋겠다.

한글 공식문서를 기다리는 것보다 내가 영어를 더 공부해서 잘하는게 빠르려나..?

 

 

일단 해보자구..

아래 공식문서를 참고해서 구현한 애플로그인이다 !

 

https://developer.apple.com/documentation/sign_in_with_apple/implementing_user_authentication_with_sign_in_with_apple

Implementing User Authentication with Sign in with Apple | Apple Developer Documentation

 

 

1. Sign in with Apple 추가하기 및 Identifier 등록하기

Targets → Signing & Capabilities → +Capability 를 눌러 추가해준다.

 

(이 때, Apple developer 구독을 하지 않는 개발자라면, 해당 항목을 추가할 수 없다..ㅠㅠ)

 

다음은 애플 개발자 사이트에서 identifier를 등록해줘야 한다.

개발자 사이트에 로그인을 하고, Account 항목에서, Identifiers를 눌러 다음과 같은 페이지에 들어간다.

 

만약, 이 과정을 진행하지 않는다면.. 로그인이 되지 않고, 콘솔에 출력해도 자꾸 null 값이 나오게 될 것이다.

(저도 알고싶지 않았어요..)

 

파란색 + 버튼을 눌러준다.

 

그럼 이런 창이 뜨게 되는데, App ID와 관련한 내용이므로 이 상태에서 continue를 해준다.

 

여기서도 계속 continue를 해준다.

 

 

그럼 다음과 같은 화면이 보인다.

 

Description: 특수문자를 사용할 수 없고, Identifier에 대한 간단한 설명을 적으면 된다.

Bundle ID: App의 TARGETS → Signing & Capabilities에서 확인 할 수 있다.

 

내용을 채우고, Sign In with Apple을 찾아 체크해준다.

그리고, Edit을 눌러 지금 진행중인 프로젝트의 app id를 선택해주었다.

 

이대로 next를 누르고, register까지 했는데 다음과 같은 팝업이 발생했다.

 

찾아보니, 이 에러는 Bundle ID 앞에 팀 ID(Apple에서 생성된)를 포함하지 않을 때 생긴다고 한다.

그냥 저기 있는 주황색 부분을 번들아이디 가장 앞에 붙여넣기만 하면 된다.

 

 

후 이제 세팅들은 모두 끝났다 !!

애플로그인을 구현할 코드만 짜면 된다.

 

공식 문서에서 제공한 예제 코드는 스토리보드 기반이었기에 그대로 사용할 수는 없었다.

나는 UIKit을 사용하되, 스토리보드가 아닌 코드로 어떻게 구현하는지 해보겠다 !

 

 

 

2. AuthenticationServices import 하기

먼저 애플로그인 구현이 필요한 AuthenticationServices를 파일에 import 해줘야 한다.

import AuthenticationServices

 

 

 

3. 버튼 만들기

func setupAppleLoginButton() {
    // ASAuthorizationAppleIDButton을 사용해 애플 로그인 버튼 생성
    let appleLoginButton = ASAuthorizationAppleIDButton(type: .signIn, style: .whiteOutline)
    appleLoginButton.translatesAutoresizingMaskIntoConstraints = false
    appleLoginButton.addTarget(self, action: #selector(handleAuthorizationAppleIDButtonPress), for: .touchUpInside)

    // 버튼을 화면에 추가
    self.view.addSubview(appleLoginButton)

    // 오토레이아웃 설정
    NSLayoutConstraint.activate([
        appleLoginButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        appleLoginButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        appleLoginButton.heightAnchor.constraint(equalToConstant: 50),
        appleLoginButton.widthAnchor.constraint(equalToConstant: 300)
    ])
}

 

이렇게 오토레이아웃으로 버튼의 크기와 위치를 잡아주었다.

애플은 애플로그인 API를 사용하면 알아서 버튼을 디자인해주고, default로 디자인되어 있는 로그인 버튼을 사용할 수 있다.

 

색상, 디자인이 이미 지정되어 있어 상황에 맞게 적절하게 사용하라고 HIG에도 가이드라인을 제시한다.

 

나는 일단 SignIn 타입으로 아웃라인이 흰색인 버튼을 만들었다. 

ASAuthorizationAppleIDButton이라는 함수만 가져오면 바로 생성할 수 있다 !!

 

이제 버튼을 클릭했을 때, 호출할 함수를 만들어줘야한다.

 

 

 

 

3. 버튼 클릭 시 애플로그인 구현하기

나는 일단 공식문서에 있는 handleAuthorizationAppleIDButtonPress 함수를 그대로 연결해주었다.

// apple id로 권한 요청하기 위한 함수
@objc func handleAuthorizationAppleIDButtonPress() {
    // 애플 ID Provider 생성 (애플로그인 요청을 생성하기 위한 ASAuthorizationAppleIDProvider객체임)
    let appleIDProvider = ASAuthorizationAppleIDProvider()
    // 애플 로그인에 필요한 request 객체 생성하기
    let request = appleIDProvider.createRequest()
    // 사용자에게 얻고자 하는 정보 지정하기 (이름, 메일)
    request.requestedScopes = [.fullName, .email]

    // 애플로그인 절차를 관리하는 컨트롤러이다.
    let authorizationController = ASAuthorizationController(authorizationRequests: [request])
    // 로그인 과정의 성공/실패 결과를 처리한다.
    authorizationController.delegate = self
    // 인증 컨트롤러가 어떤 화면에 표시될지 결정하는 부분. 보통 현재 화면을 지정한다.
    authorizationController.presentationContextProvider = self
    // 애플로그인 request 시작 !
    authorizationController.performRequests()
}

 

이렇게 조금은 복잡해보이지만, 우린 객체를 생성하고, 관리하는 컨트롤러를 만들어 연결하기만 하면 애플로그인 과정이 진행된다.

 

나는 사용자가 애플로그인을 완료하면, 로그인 한 사용자의 이름과 이메일을 서버에 넘겨줘야 하고, 앱 내에 저장해야 한다.

그 전에, 받은 정보를 잘 저장할 수 있도록 콘솔에 출력해보자 !

 

 

 

 

4. 로그인 정보 콘솔에 출력하기

공식문서에서는 성공했을 때 사용자 데이터를 키체인에 저장하라고 한다.

이게 무슨말인지 이해가 잘 안돼서 지피티한테 물어봤다.

 

좀 길긴 하지만,, 이해는 됐다.

필수는 아니지만 개인정보는 소중하기 때문에.. 키체인에 저장해 보안을 강화하고, 사용자가 앱을 다시 삭제하고 재설치하거나 앱을 종료한 뒤 다시 들어왔을 때 다시 로그인하는 번거로움을 없앨 수 있다는 것이다.

 

지금까지 애플로그인 그저 코드만 넣어서 구현해왔는데 이렇게 공부해보니,, 더 파야할 길이 있는 것 같다.

 

키체인 저장까지 하는 과정을 경험해보고 싶기도 하지만, 너무 복잡할까 겁이 나기도 하고, 지금 로그인보단 주기능 구현이 더 우선이기에..! 일단 난 userDefaults에 저장하는 방식을 선택하겠다.

 

조금 더 용감해져서 돌아올게..

 

 

 

다시 돌아와서, 로그인 정보를 콘솔에 출력해보자.

그 전에, 한 번 로그인하면 출력할 때 userIdentifier만 보여지기 때문에, 받아옴과 동시에 UserDefaults에 저장할 것이다.

 

// didCompleteWithAuthorization = 애플로그인 후 사용자 정보를 처리하는 함수
// 이 함수는 애플로그인 절차가 완료된 뒤 호출된다.
func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
    switch authorization.credential {
    
    // case1: 사용자가 apple ID로 로그인했을 때 반환되는 정보를 처리
    case let appleIDCredential as ASAuthorizationAppleIDCredential:

        // Create an account in your system.
        let userIdentifier = appleIDCredential.user
        let fullName = appleIDCredential.fullName
        let email = appleIDCredential.email

        print("useridentifier: \(userIdentifier)")
        print("fullName: \(String(describing: fullName))")
        print("email: \(email ?? "failed")")

        // UserDefaults에 이름과 이메일 저장
        let defaults = UserDefaults.standard

        // Optional fullName 처리
        if let givenName = fullName?.givenName, let familyName = fullName?.familyName {
            let completeName = "\(givenName) \(familyName)"
            defaults.set(completeName, forKey: "fullName")
            print("Saved fullName: \(completeName)")
        } else {
            defaults.set("", forKey: "fullName") // 이름이 없을 경우 빈 문자열로 저장
            print("Saved fullName as empty string")
        }

        if let email = email {
            defaults.set(email, forKey: "email")
            print("Saved email: \(email)")
        } else {
            defaults.set("", forKey: "email") // 이메일이 없을 경우 빈 문자열로 저장
            print("Saved email as empty string")
        }

	// case2 : iCloud 키체인에 저장된 것을 사용해 로그인하는 방식 (여기선 사용하지 않음)	
    case let passwordCredential as ASPasswordCredential:

        // Sign in using an existing iCloud Keychain credential.
        let username = passwordCredential.user
        let password = passwordCredential.password

        print("passwordCredential = \(username)")
        print("passwordCredential = \(password)")

    default:
        break
    }
}

 

위 코드는 공식문서에서 가져와서 출력하고, UserDefaults에 저장하는 코드만 추가했다.

이렇게 코드를 짜고, 빌드를 해보자 !

 

이메일 가리기를 하면, 다음과 같이 나온다.

 

애플 로그인의 "이메일 가리기" 기능은 사용자가 자신의 실제 이메일 주소를 공유하지 않고도 애플 ID를 통해 서비스에 로그인할 수 있도록 하는 기능이다.

그렇기에 사용자가 '이메일 가리기'로 로그인을 하면, 애플은 사용자를 대신해 무작위로 생성된 프록시 이메일 주소를 제공하는 것이다.

user@privaterelay.appleid.com 과 같은 형태로 메일이 생성된다.

 

왜 앱 내에서 최초 로그인 때만 사용자 이름과 이메일이 나올까?

앞에서 말했듯, 받아옴과 동시에 UserDefault에 저장했던 이유는 최초 로그인때만 사용자의 이름과 이메일을 받을 수 있기 때문이다.

왜 그런지 궁금해서 찾아봤다.

 

보안에 철저한 애플은 애플 로그인을 통해 이름과 이메일을 가져오는 것은 처음 로그인할 때에만 가능하도록 한다.

이는 애플이 사용자의 개인 정보를 최소한으로 제공하는 방식을 채택했기 때문이라고 한다.

• 처음 로그인 시 정보 제공: 애플 로그인 절차에서 처음 로그인을 할 때, 사용자의 이름과 이메일을 가져올 수 있다. 이때 사용자가 애플 ID를 통해 서비스에 처음 연결될 때만 이름과 이메일이 애플에서 전달된다.
• 다음 로그인 시 이름과 이메일 제공 불가: 이후 동일한 애플 ID로 로그인할 때는 애플에서 제공하는 userIdentifier (애플 ID 고유 식별자)만 전달된다. 이름이나 이메일 주소는 다시 제공되지 않는다. 이는 사용자 데이터 보호 및 프라이버시 강화를 위한 애플의 정책이다.

하지만, userIdentifier는 계속 받아옴을 볼 수 있다.

이는 애플 ID 고유 식별자로, 이를 사용해 사용자를 식별할 수 있게 하기 위함이라고 한다.

 

어쩐지 아무리 로그인해도 null이 나오더라니..!

이걸 모르면 구현이 잘 안된줄 알고 삽질을 꽤나 할 것 같다 !!

 

 

이제 애플로그인은 끝났다 !!

 

다음에 다시 화면들을 몇개 만들고 나서, 앱 내 접근 할 때마다 로그인 여부를 확인해 적절한 화면으로 이동시키는 자동로그인을 구현하고 정리해봐야겠다 !

 

 

후 힘들었다.