[SwiftUI] Social Login 기능 도입하기 - KaKao

지난 포스트에 이어서 계속한다.

 

2024.11.26 - [앱 개발/iOS] - [SwiftUI] Social Login 기능 도입하기 - Apple

[SwiftUI] Social Login 기능 도입하기 - Apple

 

---

 

Kakao Developers에서 앱 추가하기

 

앱 키 > 네이티브 앱 키를 복사해준다. 

iOS 플랫폼 등록 > 그리고 내 XCode Project의 번들 아이디를 복사해준다.

 

그리고 카카오 로그인 상태를 OFF -> ON으로 해준다.

---

디자인 리소스 다운

그리고 등록하고 나서 아래 로그인 관련 문서에서 카카오 로그인 관련 리소스 다운을 받는다. 친절한 카카오..

 

 

Kakao Developers

 

---

XCode Asset 업데이트

그리고 zip 다운을 받은 폴더를 압축 해제해서 그대로 Assets에 넣어준다!

 

그럼 저절로 등록이 된다. (1x가 디폴트인데, 2x로 옮겼다.)

 

---

Kakao 패키지 설치

그리고 XCode에 아래 패키지를 추가해준다.

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

GitHub - kakao/kakao-ios-sdk

 

 

자동으로 AF도 추가가 되는것까지 확인.

 

 

---

info.plist 

에 가서, LSApplicationQueriesSchemes 라는 새로운 키를 추가해줄것이다. 

(iOS 14부터 LSApplicationQueriesSchemes가 Queried URL Schemes 로 바뀌었다. 그러나 Source code로 info.plist를 추가해줄 때는 LSApplicationQueriesSchemes 키값을 써야한다.)

 

다른 애들을 호출을 해주려면 스킴을 별도로 등록을 해주는 거고 URL Scheme 관련 상식이 있다는 전제 하에 설명 없이 그냥 패스

자동 완성이 안되므로, 오타에 유의한다.

 

String -> Array 타입으로 형식을 변경한 후에 row를 추가해준다.

Item 0의 값에 kakaokompassauth 라고 값을 넣어준다.

새로 키를 추가하면서 생긴 Info.plist 파일을 source code 버전으로 열어주고 아래와 같이 등록된 것을 더블체크 해준다.

 

---

KakaoLoginView.swift

를 만들어준다.

 

import kakao API, api key 넣기

 

api key같은 경우는  App Delegate에 넣고 불러오는 편이다. 그리고 민감한 정보의 경우는 xcconfig에 넣고 나중에 그걸 불러오는 식으로 사용하곤 하는데.. 그래서 Project 파일 이름과 같은 swift 파일에 가서 AppDelegate class를 만들어준다.

---

SocialLoginTestApp.swift

 

그리고 application 안에 아까 .onAppear 함수 안의 initSDK()를 복붙해서 넣어준다.

 

최종 코드

import SwiftUI
import KakaoSDKCommon

@main
struct SocialLoginTestApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        KakaoSDK.initSDK(appKey: "카카오톡 앱키")
        return true
    }
}

---

KakaoLoginView.swift

body View 밑에 kakaoLogin() 함수를 구현해준다.

그리고 UserA..pi..라고 치면 카카오 라이브러리에서 제공하는 모듈이 있다.

 

이렇게 받아준다.

 

중간에

me 라는 함수를 써준다.

 

 

me에서는 user를 받을 수 있다. user에 접근하면 이렇게 여러 프로퍼티가 나온다.

 

 

계속 반복되는 메서드같은 경우 드래그 > 리펙토 > 새 함수로 구현

 

따로 리팩토링으로 빼준다.

 

---

최종 코드

KakaoLoginView.swift

import SwiftUI
import KakaoSDKCommon
import KakaoSDKUser

struct KakaoLoginView: View {
    var body: some View {
        Button {
            kakaoLogin()
        } label: {
            Image("kakao_login_large_wide")
                .resizable().frame(maxWidth: .infinity, maxHeight: 55).padding()
        }

    }
    
    fileprivate func fetchUserInfo() {
        UserApi.shared.me { user, error in
            if let error {
                print(error.localizedDescription)
            } else {
                if let id = user?.id {
                    print("kakao_user_id: \(id)")
                }
            }
        }
    }
    
    func kakaoLogin(){
    
        if UserApi.isKakaoTalkLoginAvailable() {
            UserApi.shared.loginWithKakaoTalk { token, error in
                if let error {
                    print(error.localizedDescription)
                } else {
                    print(token!)
                    
                    fetchUserInfo()
                    
                }
            }
        } else {
            UserApi.shared.loginWithKakaoAccount { token, error in
                if let error {
                    print(error.localizedDescription)
                } else {
                    print(token!)
                }
            }
        }
    }
}

#Preview {
    KakaoLoginView()
}

 

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            SignInWithAppleView()
            KakaoLoginView()
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

 

 

---

No such module.... 라고 하면서 카카오 라이브러리를 못찾길래 다시 삭제했다가 spm을 재설치하면서 타겟 설정을 프로젝트로 제설정해주었다.

 

 

 

참고로 spm 삭제할때는 프로젝트 > Package Dependencies에서 삭제한다.

 

 

실행하면 아래와 같이 정상적으로 카카오 로그인이 활성화되는 것이 확인된다.