[iOS] 카카오톡 간편로그인 연동

Cocoapod으로 간단하게 iOS SDK v2를 이용해보자 (업데이트 완료!🌝)

두둥

이게 뭔말인고 하니, 새로운 버전이 나오면서 내가 예전에 작성했던 내용은 지원이 중단될 수 있다는 얘기이다. 나름.. iOS 카카오톡 연동으로 구글링 하면 상위에 랭크 되는 듯 하니.. 추석 맞이 글을 업데이트해보자!

근데 솔직히 이번에 v2가 나오면서 공식 문서만 보면 모든게 해결될 정도로 정리가 엄청 깔끔해졌다. 예전에는 다른 블로그도 엄청 왔다리갔다리 해야해서 이럴바엔 내가 정리한다…! 로 글을 썼는데 말이쥐..ㅎㅎ 그래도 공식 문서 알레르기가 있던 핵왕초보 시절을 생각하며 엄청 세세하게 스텝 바이 스텝으로 글을 써보겠습니당

(이때만해도 시간이 이렇게 오래 걸릴줄은 몰랐다…ㅎ.ㅎ.ㅎ.ㅎ.ㅎ.. 뭐… 추석 선물이에요 여러분~ 즐추 행추~!)

웹 설정

0. Kakao Developers 접속

https://developers.kakao.com

1. 앱 만들기

1–1. 내 애플리케이션 클릭

1–2. 애플리케이션 추가하기 클릭

1-3. 아이콘, 앱이름, 사업자명 채우고 저장 클릭

2. 플랫폼 등록

2–1. 생성된 앱 확인하고 클릭

2–2. 플랫폼 설정하기 클릭

2–3. iOS 플랫폼 등록 클릭

2–4. 번들 ID (필수) 및 앱스토어 등록되어있다면 해당 id까지 입력 후 저장

XCode 에서 번들 ID 확인하는 방법

3. 카카오 로그인 설정

3–1. 왼쪽 메뉴창의 카카오 로그인 클릭 후 활성화 상태 클릭

3–2. 활성화 클릭

on 으로 변경되어 있음

4. 동의 항목 설정

4–1. 왼쪽 메뉴창의 동의 항목 클릭 후 필요한 정보 설정 클릭

4–2. 동의 단계 선택 및 목적 입력 후 저장

• 프로필 정보를 제외한 다른 동의 항목의 ‘필수 동의’ 설정은 사용할 수 없음
• 설정한 동의 항목 내역은 앱의 카카오 로그인 동의 화면에 반영
• ‘카카오계정으로 정보 수집 후 제공’ 기능에 대한 자세한 안내는 사용자 정보 가이드를 참고
• 동의 목적은 참고 문구로 카카오 로그인 동의 화면에 나타나지 않으나, 해당 동의 항목 이용 권한 검수에 사용되는 참고 정보

항목마다 다르게 설정된 동의 단계

동의창 미리보기

5. (선택) Redirect URI 등록

5–0. 나는 REST API로 개발할거 아니니까 생략

5–1. 필요하다면 왼쪽 메뉴창의 카카오 로그인 클릭 후 Redirect URI 클릭

5–2. URI 입력 후 저장 클릭

6. (선택) 팀 멤버 등록

6- 0. 나는 혼자 개발할거니까 생략

6–1. 필요하다면 왼쪽 메뉴창의 팀 관리 클릭 후 필요한 팀원 초대 클릭

6–2. 동료 이메일 입력 및 권한 선택 후 초대 클릭

• 테스트 앱의 경우, 팀 멤버로 등록된 사용자만 API 호출이 가능

7. (선택) 비즈니스 애플리케이션 및 테스트 앱 설정

7–0. 나는 안할거니까 생략

7–1. 비즈니스 애플리케이션 및 테스트 앱에 대한 설정이 필요하다면 공식 문서 참고.

프로젝트(XCode) 설정

0. 기본 요구 사항

• iOS 11.0 이상
• Xcode 11.0 이상
• Swift 4.2 이상
• Cocoapods 1.8 이상
• iOS Deployment Target 11.0 이상

1. Cocoapods를 이용한 SDK 설치

1–1. pod 파일이 없다면 해당 폴더에서 pod init 명령어를 통해 생성

1–2. 해당 폴더에 생긴 Podfile 클릭

1–3. Kakao SDK를 전체 또는 모듈(Module)별로 추가. (일단 나는 카카오톡 로그인만 필요하니까 해당 모듈만 추가할거임)

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

1–4. Command+S 로 Podfile 저장 후 해당 폴더에서 pod install 명령어 실행

iOS SDK를 설치하면 SDK에 필요한 외부 라이브러리가 자동으로 설치 됨

• iOS SDK 외부 라이브러리 디펜던시: Alamofire, DynamicCodable

2. info.plist에 앱 실행 허용 목록(Allowlist) 등록

방법 1. UI에서 설정하기

2–1. info.plist 클릭 후 나오는 목록에서 아무데나 마우스 올려 놓으면 나타나는 + 버튼 클릭

2–2. 새 항목으로 LSApplicationQueriesSchemes 입력 후 Type을 Array로 선택

2–3. 화살표가 ▼ (아래로 가게) 모양이 되도록 클릭한 후에 마우스를 올려 놓으면 나타나는 + 버튼 두번 클릭

2–4. kakaokompassauth, kakaolink를 각각 값으로 입력

방법 2. Info.plist 파일을 직접 수정하기 (방법 1. UI로 설정하기 로 진행하신 분들은 넘어가셔도 됩니다 (택 1))

2–1. Info.plist를 Source Code로 열기

2–2. 아래 내용 </dict> 위에 붙여넣기

<key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오링크 -->
      <string>kakaolink</string>
  </array>

3. URL Schemes 설정하기

3–1. URL Types에서 + 버튼 클릭

3–2. URL Schemes에 항목에 네이티브 앱 키(Native App Key)를 ‘kakao{NATIVE_APP_KEY}’ 형식으로 등록.

예를 들어 네이티브 앱 키가 '123456789'라면 'URL Schemes'에 'kakao123456789'를 입력

카카오 네이티브 앱 키 확인하는 방법

• 이 설정은 kakao{KAKAO_APP_KEY}://kakaolink 형식의 앱 실행 커스텀 스킴을 생성하는 데 사용
• 이 설정을 누락한다면 카카오링크 메시지를 통해 앱을 실행하는 것이 불가능

4. 초기화

4–1. pod install을 통해 생긴 .xcworkspace 프로젝트 클릭

4–2. AppDelegate.swift에 Kakao SDK를 초기화하는 코드를 추가

import KakaoSDKCommon
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
...
  KakaoSDKCommon.initSDK(appKey: "NATIVE_APP_KEY")
...
}

예를 들어 네이티브 앱 키가 ‘123456789’ 라면

KakaoSDKCommon.initSDK(appKey: "123456789")

didFinishLaunchingWithOptions 로 찾아서 그 안에 집어넣으면 된다

예제 코드

1. 카카오톡을 통한 사용자 인증에 필요한 함수 추가

• iOS 13 이하 일때 ( UISceneDelegate.swift를 기본이 아닐때)

AppDelegate에서 카카오톡을 통한 사용자 인증에 필요한 함수 추가

import KakaoSDKAuth
...
class AppDelegate: UIResponder, UIWindowSceneDelegate {
   ...
   func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if (AuthApi.isKakaoTalkLoginUrl(url)) {
      return AuthController.handleOpenUrl(url: url)
    }
   return false
   }
   ...
}

• iOS 13 이상 버전 이상일때 (난 iOS 13 이상이니까 이걸로 함! ㅋㅎ)

iOS 13 이상 버전 이상에서 만든 프로젝트라면 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, UISceneDelegate.swift를 기본으로 사용하도록 설정됨.

UISceneDelegate.swift를 기본으로 사용하는 경우, AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 다음 코드를 추가

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

2. ViewController 등에서 카카오톡 로그인 버튼에 대한 로직 추가

import KakaoSDKAuth
@IBAction func onKakaoLoginByAppTouched(_ sender: Any) {
 // 카카오톡 설치 여부 확인
  if (AuthApi.isKakaoTalkLoginAvailable()) {
    // 카카오톡 로그인. api 호출 결과를 클로저로 전달.
    AuthApi.shared.loginWithKakaoTalk {(oauthToken, error) in
        if let error = error {
            // 예외 처리 (로그인 취소 등)
            print(error)
        }
        else {
            print("loginWithKakaoTalk() success.")
           // do something
            _ = oauthToken     
           // 어세스토큰   
           let accessToken = oauthToken?.accessToken   
        }
    }    
  }
}

실행했는데 아래의 에러가 뜬다면?

HappyChuseok[94234:4999848] -canOpenURL: failed for URL: “kakaokompassauth://authorize” — error: “The operation couldn’t be completed. (OSStatus error -10814.)”

해당 폰(시뮬레이터)에 카카오톡이 안깔려있어서 뜨는 에러이니 시뮬레이터 말고 핸드폰으로 실행해보자.

만약 시뮬레이터에 카카오톡 설치가 안되어 있어서 카카오로 로그인 말고 “웹 브라우저를 통한 카카오 계정으로 로그인”으로 실험해보고 싶다면 아래의 코드로 대체

AuthApi.shared.loginWithKakaoAccount {(oauthToken, error) in
   if let error = error {
     print(error)
   } 
   else {
    print("loginWithKakaoAccount() success.")
    
    //do something
    _ = oauthToken
   }
}

3. 사용자 정보까지 불러오고 싶다면..

서버가 있는 경우라면 accessToken을 해당 서버로 보내고 끝내겠지만 자체적으로 현재 로그인한 사용자의 정보(닉네임 등)를 불러오고 싶을 수 있다.

사용자 관리 API는 사용자 관리 모듈인 KakaoSDKUser 가 제공한다.

다만 사용자 관리 API는 카카오 로그인이 필요한 API이기 때문에 카카오 로그인을 먼저 구현하고, 카카오 로그인을 통해 사용자 토큰을 발급 받은 후 사용자 관리 API를 호출해야 한다

3–1. podfile 에 사용자 관리 모듈 추가

pod 'KakaoSDKUser'  # 사용자 관리

3–2. pod install

3–3. import KakaoSDKUser

3-4. 카카오 로그인을 통해 사용자 토큰을 발급 받은 후 사용자 관리 API 호출

//사용자 관리 api 호출
UserApi.shared.me() {(user, error) in
    if let error = error {
        print(error)
    }
    else {
        print("me() success.")
//do something
        _ = user
    }
}

사용자 정보는 User 클래스 객체로 전달된다. 회원번호 값을 조회하려면 user.id, 카카오계정 프로필 정보들은 user.kakaoAccount.profile, 이메일은 user.kakaoAccount.email과 같이 접근할 수 있다.

하지만 값이 존재하지 않는 사용자 정보가 있을 수 있으므로 예외 처리에 유의한다.

사용자 정보 종류는 공통 가이드를, 각 항목의 자료형 등 자세한 정보는 레퍼런스를 참고한다.

ViewController 전체 코드

로그인 전/후

로그인 버튼 리소스는 여기서 다운받을 수 있답니다

기타 예제

로그아웃, 연결끊기, 사용자 토큰 정보 보기 등의 예제는 아래의 공식 문서를 참고한다

Kakao Developers

트러블 슈팅

사실 로그인을 할라니까 invalid_client 에러(not exist client_id [native_app_key])가 떴었다.

엥.. 제대로 한거 같은디요.. 공식 문서의 문제 해결 파트를 보자.

iOS SDK 초기화 시 사용한 네이티브 앱 키 값이 [내 애플리케이션] > [앱 키]의 네이티브 앱 키와 일치하는지 확인??? 백번 확인했는데 왜 안되지? 했는데 그 이유를 찾았다.

바로바로 AppDelegate 초기화 부분에서 설명에 KakaoSDKCommon.initSDK(appKey: "NATIVE_APP_KEY") 라고 써있어서 그대로 쳐버린 것.. ㅎㅎ

아니 카카오 선생님들… 저렇게 하면.. 저같은 바보들은 그대로 “NATIVE_APP_KEY” 쳐버린다고요.. ^^.. 또 삽질해 버렸다 후..ㅠ

appKey의 인자로 native app key의 값을 쳐야했는데 저대로 걍 복붙해버렸었음 ㅎㅎ

튼 KakaoSDKCommon.initSDK(appKey: "123456789") 처럼 native app key 값으로 고쳐서 해결해따~

마무리

이 포스팅은 약 다섯시간 동안 한땀 한땀 캡쳐로 만들어졌읍니다 ^^..

도움이 되셨다면 박수와 댓글 부탁드려요 ㅎㅎ..

솔직히 카카오 로그인 구현에 일조한 부분..? 카카오는 나한테 스티커라도 줘라 (뻔뻔)

+) 구버전 Legacy iOS SDK (지원이 중단 될 수 있으니 새로 보시는 분들은 사용하지 마세요)

수정 전 sdk 다운로드 링크도 404 뜨던데.. 왜 꽤 최근까지 좋아요가 눌린것인지 알수 없는 부분이다…

웹 설정

1. Kakao Developers 접속

https://developers.kakao.com

2. 앱 만들기 클릭

3. 아이콘, 앱이름, 회사명 채우고 앱 만들기 클릭

앱만들기 누르면 뜨는 화면

4. 사용자 관리 클릭

5. 활성화 on으로 전환. 필요한 정보 체크 및 수집목적 작성 후 저장 클릭

6. 메인화면에서 앱정보 옆에 설정 클릭

7. 플랫폼 추가

8. iOS 클릭 후 번들 ID 입력

번들 ID

프로젝트 설정

1. 최신 카카오 sdk 다운로드

https://developers.kakao.com/docs/latest/ko/sdk-download/ios-v1

2. KakaoOpenSDK.framework 폴더를 프로젝트의 Frameworks 폴더 안에 드래그&드롭

3. 프로젝트의 BuildPhases에서 해당 프레임워크가 잘 추가되었나 확인

4. Build Settings의 Other Linker Flags에 -all_load 로 수정

여기서 에러나면 “-all_load” 대신에 아래 명령어를 사용하여 Kakao SDK를 강제 로드

-force_load $(SRCROOT)/KakaoOpenSDK.framework/KakaoOpenSDK

5. 웹페이지에서 앱 키 표시 클릭 후 네이티브 앱 키 값 복사

6. Info에서 URL Types 추가. URL Schemes에 위에서 복사한 네이티브 앱 키 앞에 kakao를 붙여서 등록 (ex. kakaoNativeAppKey123)

7. plist 파일에 “KAKAO_APP_KEY”라는 이름으로 Key를 추가하고, Type은 String, Value는 네이티브 앱 키 값으로 등록

8. plist 파일에 필요한 설정 추가 (+ Kakao SDK가 사용하는 카카오 앱들의 커스텀 스킴 스위칭을 허용하는 화이트리스트 추가)

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 공통 -->
    <string>kakao네이티브앱키</string>

    <!-- 간편로그인 -->
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>

    <!-- 카카오톡링크 -->
    <string>kakaolink</string>         
    <string>kakaotalk-5.9.7</string>

    <!-- 카카오스토리링크 -->
    <string>storylink</string>
</array>

— — — 여기까지가 공식 개발문서까지 적혀 있는 것..같았는데 — — —

session open 의 completionHandler가 작동을 안했다. 백만번 삽질했는데 역시 답은 구글링..

AppDelegate쪽 url 핸들링 부분이 빠진 것 같다는 답변을 보았다. 근데 가이드에서는 AppDelegate 얘기가 없었던 것 같은데요..! 흑흑 ㅠ

샘플 프로젝트를 다운받아서 그곳에 있는 AppDelegate 쪽 url 핸들링 부분을 복사해왔다.

9. AppDelegate url 핸들링 함수 작성

func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
   if KOSession.handleOpen(url) {
      return true
   }
      return false
}
internal func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any]) -> Bool {
   if KOSession.handleOpen(url) {
      return true
   }
      return false
}

짜잔 놀랍게도 성공!

샘플 실행 코드

KakaoOpenSDK 임포트

import KakaoOpenSDK

아래와 같이 session에 접근할 수 있다.

let session = KOSession.shared()

참고로 중간에 이런 에러가 찍힌다면

-canOpenURL: failed for URL: “kakaokompassauth://authorize” — error: “작업을 완료할 수 없습니다.(OSStatus 오류 -10814.)”

-canOpenURL: failed for URL: “storykompassauth://authorize” — error: “작업을 완료할 수 없습니다.(OSStatus 오류 -10814.)”

해당 디바이스에 카카오톡과 카카오스토리 등이 설치되지 않아서 나오는 로그이니 당황하지 말자.

공식 개발 문서

Kakao Developers_

Kakao Developers_

Session open의 completionhandler 가 작동을 안합니다

Kakao Developers

Kakao Developers

Kakao Developers