Swift 카카오 로그인

프로젝트에서 간편 로그인을 사용하는 경우는 많다. 오늘은 수 많은 간편 로그인 중 카카오 로그인을 하는 방법에 대해서 알아볼 것이다.

 

1. 카카오 디벨로퍼에서 내 어플리케이션 만들기

우선 카카오 디벨로퍼에 들어가서 어플리케이션을 하나 생성해야 한다.

앱 이름은 사용하고 싶은 앱 이름을 작성하면 되고, 사업자 명은 만약 사업자가 있다면 사업자 정보와 동일한 이름을 작성하면 되지만 없다면 우선은 개인 이름을 적고 시작한다.

 

내 어플리케이션을 추가 했다면 방금 만든 어플리케이션을 클릭해서 들어간다.

그러면 위 사진처럼 뜰 텐데 일단은 여기까지만 하고 다른 작업을 해야한다.

2. 프로젝트 생성하기

실제로 사용할 프로젝트를 만들어 주면 아래와 같은 화면이 나온다. 그런 다음 다시 카카오 디벨로퍼에 들어가서 iOS 플랫폼 등록을 해준다.

 

위에 보이는 번들 ID 부분에 방금 생성한 프로젝트의 Bundle Identifier 의 이름을 적어주고 플랫폼 등록을 하면 된다.

 

이후 제품 설정에 카카오 로그인 항목이 보일 것이다. 그 곳에 들어가 아래 사진처럼 카카오 로그인을 활성화 시켜준다.

 

모든 과정이 완료되면 카카오 디벨로퍼 페이지와 프로젝트를 전부 종료한다.

 

3. 코코아팟으로 KakaoSDK 설치하기

만약 코코아팟 설치 방법을 모른다면 코코아팟 설치하기 <-  이글에 들어가 코코아팟을 먼저 설치한다.

 

 

코코아팟 설치가 완료 되었다면 아래의 명령어를 쳐서 코코아팟을 초기화 해준다.

pod init

명령어를 실행하고 나면 아래와 같이 Podfile 이 생성될 것이다.

 

Podfile이 보인다면 편집기를 이용해 Podfile 을 수정해야 한다.

 

기존에는 use_frameworks! 와 # Pods for <프로젝트파일명> 사이에 한줄이 공백으로 설정되어 있을 것이다. 그 공간에 위 사진과 같은 내용을 작성하고 저장하면 된다.

pod 'KakaoSDK'

 

podfile 에 설정을 완료했다면 아래의 명령어를 통해 라이브러리를 설치해준다.

pod install

설치가 완료되면 마지막에 사진과 같이 영어로 된 내용이 나온다. 저 내용을 간략하게 설명하자면 현재 사용중인 프로젝트를 종료한 이후 '프로젝트명.xworkspace' 를 실행하여 파일을 열어주라는 소리이다.

 

4. 프로젝트 수정하기

위에서 말한 '프로젝트명.sworkspace' 파일을 사용해서 프로젝트를 열어주면 기존의 프로젝트를 생성한다음 실행한 것과 마찬가지로 똑같은 화면이 실행된다.

 

4-1. Info.plist 수정하기

우선 info.plist 를 소스코드로 열기를 진행하여 소스코드로 수정을 진행할 것이다. 그런 다음 아래의 코드를 'UIApplicationSceneManifest' 위에 작성을 해주면 된다. (이해가 쉽도록 전체 코드 작성)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>kakao{앱 키}</string>
            </array>
        </dict>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>kakao{앱 키}://oauth</string>
            </array>
        </dict>
    </array>
    <key>KAKAO_APP_KEY</key>
    <string>{앱 키}</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>kakaokompassauth</string>
        <string>kakaolink</string>
        <string>storykompassauth</string>
        <string>storylink</string>
    </array>
    
    <key>UIApplicationSceneManifest</key>
    ... 중략 ...
</dict>
</plist>

위의 코드에서 {앱 키} 라고 된 부분들이 몇개 존재한다. 이 부분은 맨 처음에 카카오 디벨로퍼에서 만든 어플리케이션을 들어가서 보면 앱 키가 존재를 하는데, 그 중 네이티브 앱 키 를 복사해서 중괄호 없이 앱 키를 작성해주면 된다.

예를 들어 네이티브 앱 키가 12345678 이라면 아래 처럼 작성해주면 된다.

<array>
    <string>kakao12345678://oauth</string>
</array>

 

작성이 잘 되었다면 Info.plist 를 저장하고 프로젝트를 종료한 이후 다시 프로젝트를 열어주면 아래의 사진처럼 내용들이 잘 들어가있을 것이다.

사진에서 표기한 대로 KAKAO_APP_KEY 부분과 URL Types 에 위에서 작성한 url 두가지가 적혀있으면 된다.

 

4-2 Main.Storyboard 수정하기

Main.Sortboard를 위의 사진처럼 꾸며준다. 그런 다음 각 Label 과 imageView, button 들을 모두 ViewController 에 연결을 시켜둔다.

 

4-3 AppDelegate 및 SceneDelegate 에 코드 추가하기

이 부분은 프로젝트의 버전에 따라 다르게 설정을 해줘야 한다.

우선 iOS 버전을 확인하는 방법은 프로젝트 파일을 선택한 후 General에 들어가서 Minimum Deployments 부분을 확인하면 버전을 확인할 수 있다.

4-3-1 iOS 13 이전 버전

iOS 13 이전 버전이라면 AppDelegate에 들어가서 아래 코드를 추가하면 된다.

import KakaoSDKAuth
...

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

        return false
    }
    ...
}

 

4-3-2 iOS 13 이후 버전

iOS 13 이후 버전이라면 SceneDelegate 에 들어가 아래 코드를 추가하면 된다.

import KakaoSDKAuth
...

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

 

버전에 따라 추가하는 코드가 다르니 꼭 iOS 버전을 확인하고 코드를 작성해야 한다.

 

4-4 ViewController 에 코드 추가하기

4-4-1 필요한 라이브러리 import 하기

우선은 ViewController 에 필요한 라이브러리를 import 시켜야 한다. 더 필요한 부분이 있으면 더 import 를 해서 사용하면 되고 우선은 아래의 3개만 먼저 import 를 해둔다.

import KakaoSDKCommon
import KakaoSDKAuth
import KakaoSDKUser

class ViewController: UIViewController {
    ... 중략 ...
}

 

4-4-2 ViewController 에서 KakaoSDK 초기화하기

우선 ViewController 에서 화면이 로딩될 때 KakaoSDK 를 초기화 시켜줘야 한다. 아래의 코드처럼 초기화를 진행해주면 된다.

override func viewDidLoad() {
    super.viewDidLoad()
    // 카카오 SDK 초기화
    KakaoSDK.initSDK(appKey: "앱 키")        
}

KakaoSDK 를 초기화할 때 앱 키가 필요하므로 "앱 키" 부분에 실제 네이티브 앱 키를 입력하면 된다.

 

4-4-3 카카오 로그인

카카오 로그인을 진행하는 경우 총 2가지로 로그인을 진행할 수 있다. 바로 카카오톡 어플로 로그인을 하는방법과 카카오계정으로 로그인을 하는 방법이다.

func loginWithKakao() {
    // 카카오톡 어플로 로그인하기
    if UserApi.isKakaoTalkLoginAvailable() {
        UserApi.shared.loginWithKakaoTalk { (oauthToken, error) in
            if let error = error {
                print("에러 발생!")
            } else {
                print("카카오톡 로그인 성공")
            }
        }
    // 웹에서 카카오계정으로 로그인 하기
    } else {
        UserApi.shared.loginWithKakaoAccount { (oauthToken, error) in
            if let error = error {
                print("에러 발생!")
            } else {
                print("카카오계정 로그인 성공")
            }
        }
    }
}

 

위의 코드를 보면 "UserApi.isKakaoTalkLoginAvailable()" 부분이 존재한다. 이 부분은 카카오톡을 실행해 카카오 로그인을 진행할 수 있는지 확인하는 코드이며 만약 없다면 카카오계정 로그인 부분이 실행될 것 이다.

 

위의 두개 사진은 핸드폰을 사용해 진행하는 모습이고 아래 두 사진은 시뮬레이터를 통해 카카오톡이 없는 상태에서 실행하는 모습이다. 저 코드로 인해 두 가지 방식으로 로그인을 하는 모습이 달라지는 것을 확인할 수 있다.

 

4-4-4 카카오 로그아웃

로그인을 했으니 이제는 로그아웃을 하는 법도 알아볼 것이다.

로그아웃을 진행하는 코드는 아래와 같다.

// 로그아웃 기능
func logout() {
    UserApi.shared.logout { (error) in
        if let error = error {
            print("로그아웃 실패:", error)
        } else {
            print("로그아웃 성공")
        }
    }
}

 

생각 보다 로그인과 로그아웃은 간단하게 처리가 되는 모습을 볼 수 있다.

 

4-4-5 카카오 정보 조회

카카오 로그인을 하면 본인이 동의한 부분에 대해서는 조회가 가능하다. 조회를 하는 코드는 아래와 같다.

func fetchUserProfile() {
    UserApi.shared.me { (user, error) in
        if let error = error {
            print("사용자 정보 요청 실패:", error)
        } else {
            if let user = user {
                print("사용자 정보 요청 성공: \(user)")
                if let nickname = user.kakaoAccount?.profile?.nickname {
                    print("사용자 닉네임: \(nickname)")
                }
                if let profileImageUrl = user.kakaoAccount?.profile?.thumbnailImageUrl {
                    print("프로필 사진 URL: \(profileImageUrl)")
                }
            }
        }
    }
}

 

카카오 디벨로퍼에서 만든 어플리케이션에서 카카오 로그인 동의 항목에 대해 설정한 적이 있을 것이다. 위에서는 닉네임과 프로필 사진만 동의 항목에 있으므로 두 가지를 확인할 수 있다.

 

이후 로그인 기능과 로그아웃 기능을 위에서 만든 Main.Storyboard 에 연결된 버튼에 연결을 해주고 정보를 확인하고 label 들과 imageView 에 프로필 사진을 보이게 할 수 있다.

 

◎ 참조 : 카카오 디벨로퍼 iOS 공식문서 , 카카오 디벨로퍼 카카오 로그인 iOS 공식문서