[Social Login] 소셜 로그인을 구현해보자! 2탄 - Apple 로그인

아주 예전에 작성했던 "소셜 로그인" 시리즈, 오랜만에 그 2탄을 써보려고 한다.

오늘은 "Apple 로그인"에 대해서 알아보도록 하자.
(👇🏻예전 카카오톡 소셜 로그인을 다뤘던 글은 아래에서 확인할 수 있습니다!👇🏻)

[iOS] 소셜 로그인을 구현해보자! 1탄 - 카카오톡 로그인

728x90

예전 카카오톡 로그인을 다뤘을 때는 "카카오 개발자 페이지"에 나와있는 공식 설명을 따랐는데,
오늘은 애플의 공식문서에 나와있는 설명을 기반으로 따라가 보려 한다.

Apple Developer Documentation

 

1️⃣ 애플 로그인을 위해 기본으로 세팅해줘야 할 것들

---

카카오톡과 마찬가지로 애플 로그인도 사전에 준비해줘야 할 것들이 있다.

우선, Signing & Capabilities -> + Capability -> Sign in with Apple을 추가해주자.

그리고 아래 애플 개발자 문서로 들어가서 -> Account로 들어가보자.

여기서는 본인의 개발자 계정과 애플 로그인을 사용할 수 있도록 연동시켜두자.

Apple Developer

그리고 마지막으로 사용할 뷰컨트롤러에 애플 로그인을 사용하기 위한 프레임워크를 호출해주자.

그러면, 애플 로그인을 구현하기 위한 사전 준비는 모두 끝나게 된다.

import AuthenticationServices

 

2️⃣ 애플 로그인 버튼 세팅하기

---

애플 로그인 버튼은 보통 코드로 많이 사용을 한다.

애플 로그인 버튼은 ASAuthorizationAppleIDButton 을 사용해서 아래와 같이 코드로 넣어주는 것이 흔한 방식이다.

func setAppleLoginButton() {
    let authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: .signIn, authorizationButtonStyle: .black)
    authorizationButton.addTarget(self, action: #selector(handleAuthorizationAppleIDButtonPress), for: .touchUpInside)
    self.view.addSubview(authorizationButton)
}

ASAuthorizationAppleIDButton의 Type 종류는 3가지가 있다.

왼쪽부터 순서대로 .signIn .signUp . continue의 순서이다.

마찬가지로, ASAuthorizationAppleIDButton의 스타일 종류도 3가지가 있다.

왼쪽부터 순서대로 .black .white . whiteOutline의 순서이다.

애플 로그인 버튼 규칙도 Apple 공식문서에서 설명해주고 있다.

대충 워딩 규칙도 정해져 있고, 색상은 배경색과 대조되어야 하고 등등의 내용이 굉장히 엄격한 편이기 때문에,
만약 릴리즈를 목표로 할 때, 애플에 거절당하기 싫다면 꼼곰하게 읽어보고 결정하는 것을 추천한다...^__^

Buttons - Sign in with Apple - Human Interface Guidelines - Apple Developer

+ 추가(21.01.08)로, 처음 코드로 넣어준 버튼은 Sign in with Apple과 같이 영문으로 나오게 될 거다.

이 부분은 아래 앱스토어에 나오는 것처럼, 앱 언어가 default값(영어)으로 설정되어 있기 때문이다.

Info.plist -> Information Property List -> Localization native development region을 Korea로 변경해주면 된다.

앱 자체의 언어가 변경되었으므로, 자동으로 영어로 표출되던 버튼 글씨도 이제 한글로 바뀌게 될 것이다!

이렇게!

 

3️⃣ 애플 로그인 버튼 클릭 시, 일어날 액션 구현하기

---

사용자가 버튼을 탭하면,
사용자의 이름과 이메일 주소에 대한 인증 요청을 수행하여 로그인을 진행할 수 있도록 하는 아래 함수를 호출해야 한다.

@objc
func handleAuthorizationAppleIDButtonPress() {
    let appleIDProvider = ASAuthorizationAppleIDProvider()
    let request = appleIDProvider.createRequest()
    request.requestedScopes = [.fullName, .email]
        
    let authorizationController = ASAuthorizationController(authorizationRequests: [request])
    authorizationController.delegate = self
    authorizationController.presentationContextProvider = self
    authorizationController.performRequests()
}

 

Apple로 로그인하는 화면을 표시하기 위해서는 아래 함수를 호출해야 한다.

func presentationAnchor(for controller: ASAuthorizationController) -> ASPresentationAnchor {
    return self.view.window!
}

 

4️⃣ 로그인 성공 시, 사용자 데이터 가져오기

---

로그인이 성공되었을 때, 사용자의 정보를 가져오는 함수를 살펴보자.

애플 로그인의 경우 카카오와 다른 점은
ID값에 해당하는 userIdentifier값을 로그인할 때마다 return 해주지만, email과 fullName값은 최초 로그인에만 받을 수 있다는 점이다.

// Apple ID 연동 성공 시
    func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
        switch authorization.credential {
        // Apple ID
        case let appleIDCredential as ASAuthorizationAppleIDCredential:
            
            let userIdentifier = appleIDCredential.user
            let fullName = appleIDCredential.fullName
            let email = appleIDCredential.email
            
            print("User ID : \(userIdentifier)")
            print("User Email : \(email ?? "")")
            print("User Name : \((fullName?.givenName ?? "") + (fullName?.familyName ?? ""))")
            
        default:
            break
        }
    }

 

로그인이 실패되었을 경우에는 아래 함수를 호출하게 된다.

// Apple ID 연동 실패 시
    func authorizationController(controller: ASAuthorizationController, didCompleteWithError error: Error) {
        // Handle error.
    }

 

💡애플 로그인 관련 풀코드

---

import UIKit
import AuthenticationServices

class ViewController: UIViewController {

    // MARK: - View Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setAppleLoginButton()
    }

    // MARK: - @Functions
    
    // 애플 로그인 버튼 세팅하기
    func setAppleLoginButton() {
        let authorizationButton = ASAuthorizationAppleIDButton(authorizationButtonType: .signIn, authorizationButtonStyle: .black)
        authorizationButton.addTarget(self, action: #selector(handleAuthorizationAppleIDButtonPress), for: .touchUpInside)
        self.view.addSubview(authorizationButton)
        
        // AutoLayout
        authorizationButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            authorizationButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            authorizationButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            authorizationButton.widthAnchor.constraint(equalToConstant: 300),
            authorizationButton.heightAnchor.constraint(equalToConstant: 48)
        ])
    }
    
    // 버튼 클릭시 액션
    @objc
    func handleAuthorizationAppleIDButtonPress() {
        let appleIDProvider = ASAuthorizationAppleIDProvider()
        let request = appleIDProvider.createRequest()
        request.requestedScopes = [.fullName, .email]
        
        let authorizationController = ASAuthorizationController(authorizationRequests: [request])
        authorizationController.delegate = self
        authorizationController.presentationContextProvider = self
        authorizationController.performRequests()
    }
    
}

// MARK: - Apple Login Extensions

extension ViewController: ASAuthorizationControllerDelegate, ASAuthorizationControllerPresentationContextProviding {
    
    // 로그인 진행하는 화면 표출
    func presentationAnchor(for controller: ASAuthorizationController) -> ASPresentationAnchor {
        return self.view.window!
    }
    
    // Apple ID 연동 성공 시
    func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
        switch authorization.credential {
            // Apple ID
        case let appleIDCredential as ASAuthorizationAppleIDCredential:
            
            let userIdentifier = appleIDCredential.user
            let fullName = appleIDCredential.fullName
            let email = appleIDCredential.email
            
            print("User ID : \(userIdentifier)")
            print("User Email : \(email ?? "")")
            print("User Name : \((fullName?.givenName ?? "") + (fullName?.familyName ?? ""))")
            
        default:
            break
        }
    }
    
    // Apple ID 연동 실패 시
    func authorizationController(controller: ASAuthorizationController, didCompleteWithError error: Error) {
        // Handle error.
    }
}

 

여기까지 하면, 애플 로그인과 사용자의 정보를 가져오기 위한 준비는 모두 끝나게 된다.

다음 글에서는 앱 실행 시 로그인 상태 확인하는 로직, 강제로 연결 해제 시, 자동 로그인에 대한 내용을 모두 모아서 카카오톡 로그인과 함께 업로드해보도록 하겠다.

오늘은 여기까지✌🏻