[SwiftUI] 카카오 로그인 구현하기

iOS/SwiftUI

[SwiftUI] 카카오 로그인 구현하기

시로- 2024. 9. 6. 15:03

카카오 로그인 버튼 디자인

카카오 로그인 디자인 가이드에서 버튼 디자인을 다운받을 수 있다.

플랫폼 등록하기

https://developers.kakao.com/docs/latest/ko/getting-started/app#platform

위 링크의 가이드를 따라 플랫폼을 등록한 후 네이티브 앱 키를 기억해두자.

만약 테스트앱을 팀원과 함께 사용하는 경우 팀 관리에서 팀원의 계정을 추가해야 카카오 API 사용이 가능하다.

카카오 로그인 iOS SDK 설치하기 (SPM)

1. ➊ [Project Target] > ➋ [Package Dependencies] > ➌ [Packages]의 [+] 버튼을 누른 후 아래 링크로 패키지를 검색한다.

https://github.com/kakao/kakao-ios-sdk

2. KakaoSDKUser , KakaoSDKAuth, KakaoSDKCommon 모듈을 선택 후 설치한다.

KakaoSDKUser : 카카오 로그인 모듈
KakaoSDKAuth : 사용자 인증 및 토큰 관리자 모듈
KakaoSDKCommon : 필수 요소를 담은 공통 모듈

프로젝트 설정

앱 실행 허용 목록

앱에서 카카오톡을 실행시키기 위해 앱 실행 허용 목록을 등록한다.

Info.plist에 Array 타입 키(Key)인 Queried URL Schemes을 추가
해당 키의 [Item]에 값으로 아래 문구 추가

kakaokompassauth: 카카오 로그인

커스텀 URL 스킴

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록

위 두 가지 설정을 완료했을 때 Info.plist 파일 형태이다. KAKAO_NATIVE_APP_KEY는 Configuration 파일에 보호해두었다.

sdk 초기화

앱이름App.swift 파일에서 다음과 같이 sdk를 초기화 할 수 있다.
만약 네이티브 앱키를 config 파일에 넣지 않고 직접 사용을 하고싶다면, initSDK의 appKey 부분에 String으로 넣어주면 된다.

import KakaoSDKCommon

@main
struct AppNameApp: App {
    init() {
        // kakao sdk 초기화
        let kakaoNativeAppKey = (Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] as? String) ?? ""
        KakaoSDK.initSDK(appKey: kakaoNativeAppKey)
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

카카오톡으로 로그인을 위한 설정

카카오톡은 서비스 앱에서 카카오톡으로 이동한 후, 사용자가 [동의하고 계속하기] 버튼 또는 로그인 취소 버튼을 누르면 다시 카카오톡에서 서비스 앱으로 이동하는 과정을 거친다. 카카오톡에서 서비스 앱으로 돌아왔을 때 카카오 로그인 처리를 정상적으로 완료하기 위해 앱이름App.swift 파일에 handleOpenUrl()을 추가한다.

import KakaoSDKAuth

@main
struct AppNameApp: App {
    init() {
        // kakao sdk 초기화
        let kakaoNativeAppKey = (Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] as? String) ?? ""
        KakaoSDK.initSDK(appKey: kakaoNativeAppKey)
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
                .onOpenURL(perform: { url in
                    if AuthApi.isKakaoTalkLoginUrl(url) {
                        _ = AuthController.handleOpenUrl(url: url)
                    }
                })
        }
    }
}

카카오 로그인

카카오 로그인은 [카카오톡으로 로그인], [카카오계정으로 로그인] 두 가지의 방법으로 구현할 수 있다.
이 글에서는 [카카오톡으로 로그인]으로 구현하고 카카오톡 실행이 불가능하다면 [카카오계정으로 로그인]을 하도록 구현할 것이다.

먼저 필요한 모듈인 KakaoSDKUser를 import 한다.

import KakaoSDKUSer

카카오톡이 실행 가능한지는 UserApi.isKakaoTalkLoginAvailable()로 확인할 수 있다.
[카카오톡으로 로그인] 시 사용하는 함수는 UserApi.shared.loginWithKakaoTalk() 이고,
[카카오계정으로 로그인] 시 사용하는 함수는 UserApi.shared.loginWithKakaoAccount()이다.

위 내용을 바탕으로 한 최종 코드는 다음과 같다.

import KakaoSDKUser

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

               // 추가작업
               _ = oauthToken 
            }
         }
     } else {
        // 카카오계정 로그인
        UserApi.shared.loginWithKakaoAccount { oauthToken, error in
            iif let error = error {
                print(error)
            } else {
                print("카카오계정 로그인 success")

                // 추가작업
               _ = oauthToken 
            }
        }
    }
}