카카오톡 로그인 in SwiftUI

Updated: August 02, 2022

카카오톡 로그인 기능 구현하기

Kakao API Docs - https://developers.kakao.com/docs

SNS 로그인 기능중 자주 사용하는 카카오 서비스를 통해서 사용자의 DB 정보를 카카오로부터 토큰값을 받아와서 SwiftUI 에서 구현하는 것입니다

1.프로젝트 생성

먼저 Kakao Page 에서 내 애플리케이션 에서 test 용 어플리케이션을 만듭니다.

아래의 그림과 같이 앱키 가 발급되는데 여기서 사용되는것이 네이티브 앱키 입니다

그리고 iOS 플랫폼을 등록 시켜줘야 하는데 여기서 필요한 것이 bundleID 입니다 (앱의 주소라고 보시면 됩니다)

2.iOS SDK 카카오톡 설치 (SPM)

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios#apply-sdk-spm

앱내에서 설정해주기

info.plist 파일에서 커스텀 url 스킴을 넣어줘야 합니다

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

URL Schemes 설정하기

네이티브 앱키를 넣어주면 되는데, 이 키같은 경우에는 소스코드를 공유시 공유가 안되도록 하는것이 중요하기 때문에, 보안작업이 필요합니다

command + n 새파일 생성에서 검색 창에 config 치면 Configuration Setting File 을 생성해줍니다

그다음엔, info.plist 에서 KAKAO_NATIVE_APP_KEY 값을 등록 해줍니다

이렇게 하면 KAKAO_NATIVE_APP_KEY 을 메인 bundle 로써 가져 올 수 있게 됩니다

추가로 App Project 내에서 생성된 Config 파일을 사용할 수 잇도록 Debug, Release 환경에서 사용할 수 있도록 연결 시켜 줘야 합니다

🔑 장점은 보안이 필요한 API Key 라던지 app key 를 환경변수로 만들어서 사용하게 되면 관리도 편하고 키 노출을 막을 수 있습니다 또한 github 올릴때 .gitignore 에 등록하면 됩니다

# in .gitignore
# API Key 값 감추기
*.xcconfig

초기화 하기

SwiftUI 자체에서 초기화 하기

import SwiftUI
import KakaoSDKCommon
import KakaoSDKAuth

@main
struct KakaoAuthApp: App {
	init() {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
	}

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

App Delegate 을 설정해서 초기화 하기

// in MyAppDelegate.swift

import Foundation
import UIKit
import KakaoSDKCommon

class MyAppDelegate: UIResponder, UIApplicationDelegate {

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
		return true
	}
}

@main
struct KakaoAuthApp: App {

	@UIApplicationDelegateAdaptor var appDelegate : MyAppDelegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

3.카카오 로그인 Delegate 설정하기

카카오톡으로 로그인을 구현하기 전에 필수 설정인 AppDelegate 설정법입니다.

https://developers.kakao.com/docs/latest/ko/kakaologin/ios

import Foundation
import UIKit
import KakaoSDKAuth


class MySceneDelegate: UIResponder, UIWindowSceneDelegate {

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

import UIKit
import KakaoSDKCommon
import KakaoSDKAuth

class MyAppDelegate: UIResponder, UIApplicationDelegate {

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

		// 메인번들에 있는 카카오 앱키 불러오기
		let kakaoAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""

		// kakao SDK 초기화
		KakaoSDK.initSDK(appKey: kakaoAppKey as! String)
		return true
	}

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

		return false
	}

	// appDelegate 에서 sceneDelegate 연결 하기
	func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {

		let sceneConfigutation = UISceneConfiguration(name: nil, sessionRole: connectingSceneSession.role)

		sceneConfigutation.delegateClass = MySceneDelegate.self

		return sceneConfigutation
	}
}

Internet 추가 설정

info.plist 에서 App Transport Security Settings 에서 Allow Arbitrary Loads 에서 No 추가 하기

카카오 로그인 활성화

카카오 Developer page 에서 상단 내애플리케이션 -> 가서 생성된 app 에 들어간다음에 좌측 메뉴에 카카오 로그인에서 활성화를 설정 ON 해줍니다

그리고 하단의 Redirect URI 을 설정해 줍니다

좌측메뉴 동의 항목에 가서 사용자의 개인 항목을 가져오기 때문에 사용자로 부터 동의를 받아와야되는 단계입니다

4.카카오톡 설치 여부 확인

사용자의 환경에 따라서, 카카오톡이 설치 또는 안되어 있는지 확인 하는 절차입니다

https://developers.kakao.com/docs/latest/ko/kakaologin/ios#login-through-kakaotalk

5.ViewModel 에서 카카오톡 로그인 로직 생성

// in ViewModel

import Foundation
import Combine
import KakaoSDKAuth
import KakaoSDKUser


class KakaoAuthVM: ObservableObject {

	func handleKakaoLogin() {
		// 카카오톡 설치 여부 확인 - 사용자의 앱에 카카오톡 설치 여부 확인

		// 카카카톡 앱을 통해서 로그인 하기
		if (UserApi.isKakaoTalkLoginAvailable()) {
			UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
				if let error = error {
					print(error)
				}
				else {
					print("loginWithKakaoTalk() success.")

					//do something
					_ = oauthToken
				}
			}
		} else { // 카카오톡이 설치가 안되어 있을 경우
			// 카카오 계정으로 로그인 하기 - 웹뷰를 열러서 로그인 하기
			UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
					if let error = error {
						print(error)
					}
					else {
						print("loginWithKakaoAccount() success.")

						//do something
						_ = oauthToken
					}
				}
		}

	}
}

6.카카오톡 계정 로그아웃하기

https://developers.kakao.com/docs/latest/ko/kakaologin/ios#logout

	// MARK: - 카카오톡 로그아웃
	func handleKakaoLogout() {
		UserApi.shared.logout {(error) in
			if let error = error {
				print(error)
			}
			else {
				print("logout() success.")
			}
		}
	}

🗃 Reference

개발하는 정대리 - https://youtu.be/sADVK2mJ_XE parkgyurim - https://velog.io/@parkgyurim/iOS-SwiftUI-Kakao-Login x

Share on

Twitter Facebook LinkedIn

Jacob Ko