[iOS] 카카오 소셜 로그인 구현

곧 있을 프로젝트에서 카카오 간편 로그인 기능이 있었기 때문에 

카카오 소셜 로그인 한번 구현해보자!

 

일단 카카오 개발자 웹 사이트에서 기본 설정들을 많이 해줘야하는데,

https://developers.kakao.com/

Kakao Developers

여기로 들어가서 설정을 해보자! (설정 방법은 구글링하면 진짜 많이 나오고 많은 분들이 정리를 잘해두었기에 이부분은 생략)

 

 

---

 

내 포스팅에서 주로 다룰 내용은,

1️⃣ SDK 설치

2️⃣ Xcode 설정

3️⃣ AppDelegate, SceneDelegate 설정

4️⃣ 로그인 메소드 구현

5️⃣ 로그인한 사용자 정보 가져오기 구현

6️⃣ 로그아웃 구현

이다!

 

 

1️⃣ SDK 설치

카카오 디벨로퍼 문서를 보면 설치해야하는 SDK들에 대한 설명들을 자세히 확인해 볼 수 있다.

나는 간단하게 로그인, 로그아웃, 사용자 정보 확인 정도의 기능만 구현할 것이기 때문에

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

요정도만 하고 pod install

 

 

2️⃣ Xcode 설정

다른 어플리케이션을 실행시키기 위해 추가해줘야함!

Info > Custom iOS Target Properties 에서 Array 타입으로 LSApplicationQueriesSchemes 추가

키 내부의 Item으로 kakaokompassauth, kakaolink 추가

 

 

카카오 앱을 실행시키고, 다시 나의 앱을 실행시키기 위한 설정이 필요!

Info > URL Types

카카오 디벨로퍼 페이지에서 만든 내 애플리케이션의 네이티브 앱키를 복사하고 URL Schemes에 적어준다.

"kakao+네이티브 앱키" 형태로 쓰면 되는데, 네이티브 앱키가 "12345"라면 kakao12345 로 작성하면 됨!

 

 

 

3️⃣ AppDelegate, SceneDelegate 설정

Delegate 파일들에 아래의 코드들을 추가 및 수정!

// AppDelegate.swift

import KakaoSDKCommon

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    // KakaoSDK 초기화 코드 추가
    KakaoSDK.initSDK(appKey: "fef29b9f6e2bbd335b44c4b334fbe996")

    return true
}

// SceneDelegate.swift

import KakaoSDKAuth
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions, openURLContexts URLContexts: Set<UIOpenURLContext>) {

    // FOR Kakao login setting
    if let url = URLContexts.first?.url {
        if (AuthApi.isKakaoTalkLoginUrl(url)) {
            _ = AuthController.handleOpenUrl(url: url)
        }
    }

    guard let _ = (scene as? UIWindowScene) else { return }
}

 

 

 

4️⃣ 로그인 메소드 구현

지금부터 사용할 구현 메소드들은 https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios

Kakao Developers

여기서 잘 나와있어서 다른 로그인 관련 기능이나 이 포스팅에서 자세히 설명되지 않은 메소드들을 자세히 확인할 수 있다.

 

 

1. 로그인 버튼이 눌렸을 때

@IBAction func tappedButton(_ sender: Any) {

    // 카카오톡 설치 여부 확인
    if UserApi.isKakaoTalkLoginAvailable() {
        // 카카오톡 로그인. api 호출 결과를 클로저로 전달.
        loginWithApp()
    } else {
        // 만약, 카카오톡이 깔려있지 않을 경우에는 웹 브라우저로 카카오 로그인함.
        loginWithWeb()
    }

}

2. 실행될 메소드들

// 카카오 앱으로 로그인
    func loginWithApp() {
        UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
            if let error = error {
                print(error)
            } else {
                print("loginWithKakaoTalk() success.")
                
                UserApi.shared.me {(user, error) in
                    if let error = error {
                        print(error)
                    } else {
                        print("카카오톡으로 로그인 성공")
                        _ = oauthToken
                        self.presentToHome()
                    }
                }
            }
        }
    }
        
    // 카카오 웹으로 로그인
    func loginWithWeb() {
        UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
            if let error = error {
                print(error)
            } else {
                print("loginWithKakaoAccount() success.")
                
                UserApi.shared.me {(user, error) in
                    if let error = error {
                        print(error)
                    } else {
                        print("카카오톡으로 로그인 성공")
                        _ = oauthToken
                        self.presentToHome()
                    }
                }
            }
        }
    }

3. 로그인 성공 시 화면 전환 메소드

// 화면 전환 함수
func presentToHome() {
    guard let homeVC = homeStoryboard.instantiateViewController(withIdentifier: "HomeViewController") as? HomeViewController else { return }
    homeVC.modalPresentationStyle = .fullScreen
    present(homeVC, animated: false, completion: nil)

}

 

 

 

5️⃣ 로그인한 사용자 정보 가져오기 구현

정보 가져오는 메소드

// user 정보 가져오기
func getUserInfo() {
    UserApi.shared.me { user, error in
        if let error = error {
            print(error)
        } else {
            let name = user?.kakaoAccount?.profile?.nickname
            guard let name = name else {return}
            self.user.name = name
            self.setUI()
        }
    }
}

- user 구조체 안에 name 값을 넣어주는 형태

@IBOutlet weak var userName: UILabel!

let mainStoryboard = UIStoryboard.init(name: "Main", bundle: nil)

var user = User()

func setUI() {
    userName.text = user.name+"님"
}

- 이런식으로 화면에 뿌려지게 됨

 

 

 

6️⃣ 로그아웃 구현

@IBAction func logoutTapped(_ sender: Any) {
    let logout = UIAlertController(title: "로그아웃", message: "로그아웃 하시겠습니까?", preferredStyle: .alert)

    logout.addAction(UIAlertAction(title: "네", style: .destructive, handler: {_ in self.logoutAction()}))
    logout.addAction(UIAlertAction(title: "아니오", style: .cancel, handler: {_ in print("no")} ))

    present(logout, animated: true)
}

func logoutAction() {
    UserApi.shared.logout {(error) in
        if let error = error {
            print(error)
        }
        else {
            self.presentToMain()
        }
    }
}

- UIAlertController 로 알림창 띄우기

- 로그아웃 메소드를 호출하면, 사용자의 액세스 토큰과 리프레시 토큰을 모두 만료시킴!

 

화면전환 메소드

func presentToMain() {
    guard let mainVC = mainStoryboard.instantiateViewController(withIdentifier: "ViewController") as? ViewController else { return }
    mainVC.modalPresentationStyle = .fullScreen
    present(mainVC, animated: false, completion: nil)
}

 

 

 

🍎 구현 영상

 

 

 

---

Reference

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

- https://developers.kakao.com/ 

- https://doh-an.tistory.com/37

- https://mini-min-dev.tistory.com/38