SwiftUI 카카오 로그인 사용하기

앱을 만들다 보면 필수가 되어버린 소셜로그인 그중에서 한국에서는 제일 많이 사용되고있는 카카오로그인을 swiftUI에서도 

 

사용하고싶은데 어디를 봐도 예제가... 없어서 제가 정리해봅니다!! 

 

완전 처음부터 시작해보겠습니다!!

 

우선 프로젝트를 xcode에서 프로젝트를 만들어봅시다!

새로운 프로젝트를 만들어주시고

 

프로젝트 기본을 셋팅해줍니다.

 

인터페이스는 SwiftUI를 사용해주고

생명주기도 SwiftUI

언어도 Swift로해주고 만들어주면

 

 

이렇게 프로젝트를 만들어주시고

 

 

이제 카카오 로그인을 바로 구현하기위해 필요한 라이브러리를 설치해 주셔야하는데 

 

우선 본인 맥북에 CocoaPods가 설치되어있지 않다면 설치부터 해주셔야해요!! 

 

설치방법은 엄청 간단합니다

 

터미널을 열으셔서 

 

한줄만 쳐주시면되요!

sudo gem install cocoapodsCOPY

 

살짝 시간이 걸립니다. 차분히 기다려주세요

 

설치가 완료되면

 

터미널로 돌아가서 본인의 프로젝트 파일로 들어가주세요

 

들어가시면 요렇게 나옵니다!

이 상태에서

 

pod init

 

을 입력해주시면

이렇게 Podfile 이 추가가 되고

 

vi Podfile

를 입력해주시면

이렇게 나오게되는데 이제 이곳에

 

이것들을 추가해주세요.

 

pod 'KakaoSDKCommon'  # 필수 요소를 담은 공통 모듈
pod 'KakaoSDKAuth'  # 카카오 로그인
pod 'KakaoSDKUser'  # 사용자 관리

 

 

이렇게 추가해주시면 됩니다

 

추가해주시고 나온상태에서 pod install을 해주시면 라이브러리 설치완료 정말쉽죠!

 

그러면 이제 폴더에 프로젝트명.xcworkspace 파일이 추가되셨을텐데 해당 파일을 클릭하여 들어가주세요

 

이제 카카오 로그인 기본을 코드를 짜기전에 기본 셋팅이 필요한데

 

우선 카카오 로그인 앱을 등록하셔야겠죠?

 

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

Kakao Developers

 

Info.plist 설정하기위해 해당 글을 따라해주시고

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

Kakao Developers

 

이렇게 두가지를 진행하시면서 뭔가 이상한 부분을 발견하셨나요? 

 

저희는 Appdelegate가 존재하지 않습니다 ㅜㅜ 그래서 직접 추가를 해주어야하는데 

 

우선 새로운 swift파일을 하나 만들어 줍니다 이름은 AppDelegate

 

만들어주시고 안에 코드를적어주세요 해당 고유키번호에 등록하신 어플에 대한 네이티브 앱키를 넣어주시면됩니다!

import SwiftUI

import KakaoSDKCommon
import KakaoSDKAuth


class AppDelegate: NSObject, UIApplicationDelegate{
    
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        
        KakaoSDKCommon.initSDK(appKey: "고유키", loggingEnable:false)

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

}

 

AppDelegate 까지 만들어 주셨다면 이제 사용을 해야겠죠?

 

프로젝트명.swift 파일에 들어가

import SwiftUI

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

이런식으로 앱 딜리게이트를 추가해주세요 

 

이제 실제로 로그인을 해봐야겠죠?

 

import SwiftUI
import KakaoSDKAuth
import KakaoSDKUser

struct ContentView: View {
    var body: some View {
        
        Button(action : {
            //카카오톡이 깔려있는지 확인하는 함수
            if (AuthApi.isKakaoTalkLoginAvailable()) {
                //카카오톡이 설치되어있다면 카카오톡을 통한 로그인 진행
                AuthApi.shared.loginWithKakaoTalk {(oauthToken, error) in
                    print(oauthToken?.accessToken)
                    print(error)
                }
            }else{
                //카카오톡이 설치되어있지 않다면 사파리를 통한 로그인 진행
                AuthApi.shared.loginWithKakaoAccount {(oauthToken, error) in
                    print(oauthToken?.accessToken)
                    print(error)
                }
            }
        }){
            
            Text("카카오 로그인")
        }
        //ios가 버전이 올라감에 따라 sceneDelegate를 더이상 사용하지 않게되었다
        //그래서 로그인을 한후 리턴값을 인식을 하여야하는데 해당 코드를 적어주지않으면 리턴값을 인식되지않는다
        //swiftUI로 바뀌면서 가장큰 차이점이다.
        .onOpenURL(perform: { url in
            if (AuthApi.isKakaoTalkLoginUrl(url)) {
                _ = AuthController.handleOpenUrl(url: url)
            }
        })
        
       
    }
}

 

이렇게 contentView에 간단하게 버튼하나 만들어 결과를 보겠습니다.

로그인 페이지

카카오 로그인을 실행하시나요?

결과값

 

이렇게 성공적으로 리턴값 까지 받아 오시는걸 확인 하실 수 있습니다.

 

그렇다면 받아온 값들은 확인을 했으니 accessKey말고 유저정보를 가져올수있을까요

 

유저 정보를 가져오는 함수는

  UserApi.shared.me() {(user, error) in
                        if error != nil {
                            completion(1,error?.localizedDescription,nil,nil)
                        }
                        else {
                            guard String(user!.id) != "" else {
                                completion(1,"카카오로그인 오류",nil,nil)
                                return
                            }
                            //이메일이 공백
                            guard user!.kakaoAccount!.email != nil else {
                                self.kakaoUnlink()
                                completion(1,"카카오로그인 오류",nil,nil)
                                return
                            }
                            
                            
                 
                        }
                    }

 

이렇게 UserApi.shared.me() 함수를 이용하여 가져올수있습니다. 정말 쉽죠!!

 

이렇게 간단하게 swiftUI로 카카오톡 로그인 , 유저정보를 가져오는 방법을 소개해드려봤습니다 댓글로 swiftUI에서 이런 기능은 안되나요?

 

라고 궁금하신거 있으시면 말씀해주세요!! 제가 구현이 가능한 코드라면 바로 정리해서 올려드리겠습니다 꾸벅

 

다들 즐코딩하세요