[UIKit] - 카카오 로그인

iOS SDK를 사용한 카카오 로그인 구현 방법을 카카오에서 정리해준 걸 참고하여 작성하였다.

 

Kakao Developers

 

iOS SDK를 사용한 카카오 로그인 구현 방법은 두 가지이다.

 

• 카카오톡으로 로그인
• 기본 웹 브라우저를 통해 카카오 계정으로 로그인

 

 

1️⃣ 애플리케이션 등록

 

 

🟡 애플리케이션 등록

 

"카카오 API는 개발자 웹사이트에 등록된 각각의 애플리케이션(이하 앱) 정보 기반으로 동작하므로, 카카오 API를 사용하려면 개발자 웹사이트에 앱을 등록해야 합니다."

 

카카오 웹사이트에서 로그인한 후, [내 애플리케이션] > [애플리케이션 추가하기]를 눌러 앱을 생성한다.

 

Kakao Developers

 

아래와 같이 나오는데 이걸 다 작성하고 저장한다.

 

그럼 애플리케이션이 만들어지고, [내 애플리케이션]에서 등록한 앱을 확인할 수 있다. 

 

🟡 키 확인

 

"앱을 생성하면 플랫폼별 앱 키(App Key)가 발급됩니다. Kakao SDK for JavaScript(이하 JavaScript SDK)에는 JavaScript 키, iOS와 Android에는 네이티브 앱 키, HTTP 요청이나 서버 기능 구현에는 REST API 키를 각각 사용합니다."

 

iOS 앱이니 네이티브 앱 키가 필요하고, [요약 정보]에서 앱 키를 확인할 수 있다. 

 

 

 

🟡 플랫폼 등록

 

그리고 등록한 앱에서 API를 호출하려면 사용하려는 플랫폼에 대한 정보를 개발자 웹사이트에 등록해야 한다.

iOS 플랫폼에 아래 정보들을 등록해야 한다.

 

• 번들 ID: Xcode 프로젝트 정보에 설정된 Bundle Identifier 값과 동일한 값을 입력
• 앱스토어 ID: 애플 앱스토어 등록 시 발급받은 앱 ID
• 마켓 URL: 사용자의 기기에서 앱 실행시킬 때, 사용자의 기기에 해당 앱이 설치되어 있지 않을 경우 이동할 앱스토어 주소

 

아직 앱스토어에 등록한 것이 아닌 연습 프로젝트여서 번들 ID만 입력하면 된다.

 

2️⃣ cocoapod 모듈 설치

 

 

카카오 로그인 API를 사용하려면 로그인관련 모듈을 설치해야 한다.

 

# 전체 추가
pod 'KakaoSDK'
# or
# 필요한 모듈 추가
pod 'KakaoSDKCommon'  # 필수 요소를 담은 공통 모듈
pod 'KakaoSDKAuth'  # 카카오 로그인
pod 'KakaoSDKUser'  # 사용자 관리
pod 'KakaoSDKTalk'  # 친구, 메시지(카카오톡)
pod 'KakaoSDKStory'  # 카카오스토리 
pod 'KakaoSDKLink'  # 메시지(카카오링크)
pod 'KakaoSDKTemplate'  # 메시지 템플릿 
pod 'KakaoSDKNavi'  # 카카오내비

 

필수 요소 담은 KakaoSDKCommon과 카카오 로그인 모듈인 KakaoSDKUser, 사용자 인증 및 토큰 관리자 모듈인 KakaoSDKAuth를 설치했다.

 

 

3️⃣ info.plist 설정

 

 

iOS 9.0 이상에서 iOS SDK를 통해 카카오톡같은 앱을 실행시키는 기능을 이용하려면 info.plist 파일에 설정을 추가하여 정보를 등록한다.

info.plist에 LSApplicationQueriesSchemes를 추가하고 해당 키의 value에 'kakaokompassauth', 'kakaolink'를 추가한다.

 

 

 

 

4️⃣  URL Schemes 설정하기

 

 

카카오계정을 통한 인증과 카카오통 메시지를 통한 앱 실행을 위해 URL Schemes를 설정한다.

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키를 'kakao{NATIVE_APP_KEY}' 형식으로 등록한다.

예를 들어 앱 키가 '12341234'이면 'kakao12341234'를 입력한다.

 

 

 

5️⃣ SDK 초기화

 

 

iOS SDK를 사용하기 위해 AppDelegate파일에 KakaoSDKCommon을 import 한다.

 

import KakaoSDKCommon

class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        KakaoSDK.initSDK(appKey: "네이티브 앱키")
        
        return true
    }
}

 

 

6️⃣ SceneDelegate 설정

 

 

Deployment target이 iOS 13 이상으로 생성된 프로젝트라면 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, UISceneDelegate.swift를 기본으로 사용하도록 설정된다고 한다.
UISceneDelegate.swift를 기본으로 사용하는 경우, AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 handleOpenUrl()을 추가한다.

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    if let url = URLContexts.first?.url {
        if (AuthApi.isKakaoTalkLoginUrl(url)) {
            _ = AuthController.handleOpenUrl(url: url)
        }
    }
}

 

 

7️⃣ 카카오톡 로그인

 

 

위의 항목들을 다 설정했다면 이제 로그인을 해보자.

처음에 설명했던 두가지 방법 [1. 카카오톡으로 로그인, 2. 기본 웹 브라우저를 통해 카카오 계정]으로 로그인을 구현해보자.

 

아래 두 모듈을 import 해야한다.

import KakaoSDKAuth
import KakaoSDKUser

 

 

🟡 카카오톡으로 로그인

 

UserApi의 loginWithKakaoTalk()를 호출하고, isKakaoTalkLoginAvailable()로 카카오톡 실행 가능 여부를 확인할 수 있다.

 

// 카카오톡 실행 가능 여부 확인
if (UserApi.isKakaoTalkLoginAvailable()) {
    UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
        if let error = error {
            print(error)
        }
        else {
            print("loginWithKakaoTalk() success.")

            //do something
            _ = oauthToken            
        }
    }    
}

 

동의화면에서 사용자는 필수 항목에 모두 동의해야 로그인할 수 있으며, 동의하지 않고 로그인을 취소할 수도 있다.

※ 예외 처리를 위한 사용자의 로그인 취소 등 주요 에러는 공통 모듈인 KakaoSDKCommon의 AuthFailureReason에서 확인할 수 있다.

 

동의 화면에서 사용자가 모든 필수 항목에 동의하고 [동의하고 계속하기]를 선택하면, iOS SDK는 카카오톡에서 서비스 앱으로 돌아와 다음 단계인 인가 코드 발급과 토큰 발급을 처리하고 카카오 로그인을 완료한다.

 

 

🟡 카카오계정으로 로그인 하기

 

UserApi의 loginWithKakaoAccount()를 호출하고, 카카오톡으로 로그인 요청과 마찬가지로 로그인 요청 결과 처리를 클로저 객체로 전달해야 한다.

loginWithKakaoAccount() 호출 시 iOS SDK가 OS 기본 웹 브라우저를 실행하고 카카오계정 로그인 화면을 출력한다.

iOS SDK는 웹뷰(Web View)를 사용하지 않고 기본 웹 브라우저를 사용하여 로그인을 진행한다. 사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태라면 ID 및 비밀번호 입력 과정을 생략하고 곧바로 동의 화면을 출력한다.

 

동의화면은 카카오톡으로 로그인과 동일하다.

 

UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
    if let error = error {
        print(error)
    }
    else {
        print("loginWithKakaoAccount() success.")            

        //do something
        _ = oauthToken            
    }
}

 

 

8️⃣ 사용자 정보 조회

 

 

현재 로그인한 사용자의 정보를 불러오며, UserApi의 me()를 호출한다.

사용자 정보 응답은 KakaoSDKUser에 정의되어 있는 User 클래스 객체로 전달된다.

 

예를 들어 회원번호 값을 조회하려면 user.id, 카카오계정 프로필 정보들은 user.kakaoAccount.profile, 이메일은 user.kakaoAccount.email과 같이 접근할 수 있다.

 

하지만 사용자 정보 중 동의항목으로 설정되지 않았거나, 사용자가 정보 제공에 동의하지 않았거나, 사용자가 해당 정보를 카카오에 제공한 적 없는 경우에는 값이 존재하지 않을 수 있으므로 예외 처리에 유의해야 한다.

 

UserApi.shared.me() {(user, error) in
    if let error = error {
        print(error)
    }
    else {
        print("me() success.")
        
        //do something
        _ = user
    }
}

 

 

---

 

 

난 카카오 계정으로 로그인하기를 구현했고 다음과 같이 실행되는 걸 확인할 수 있다.