카카오톡 로그인 구현하기

국민 메신저인 카카오톡 로그인 구현은 필수일 것 같아 구현하면서 기록하려한다.

간단한 Auth만 구현하는 것이기 때문에 스토리보드로 해보려고 한다.

 

1. 종류 

우선, 카카오에서 제공하는 로그인 종류는 2가지이다. (하단참고)

필자는 권장이라 써있는, 카카오톡으로 로그인을 구현할 것이다..!

 

 

 

2. iOS 플랫폼 등록 & 카카오 로그인 활성화

https://developers.kakao.com/

상단 링크에 들어가서 로그인   >>   시작하기   >>  애플리케이션 추가하기   >>    정보 기입 (테스트용이기 때문에 필자는 임의로 넣었다 - 차후 수정도 가능하다고함)

 

여기까지 하면, 상단의 이미지처럼 앱이 추가된 것을 확인할 수 있다.

 

 

이제 본격적인 플랫폼 등록을 해야한다.

앱 키 밑의 '플랫폼'  >>  iOS 플랫폼 등록   을 누른다.

 

그럼 하단의 화면을 볼 수 있다.

 

이제 하단 화면에 만들고있는 프로젝트의 번들ID만 기입해주면 된다. (프로젝트를 앱스토어에 배포하지 않을 것이기 때문에..!)

 

(참고로 번들ID는 여기에 있습니다 - 하단 이미지 참고)

 

기입하고 완료 누르면 '성공적으로 반영되었습니다' 뜬다.

초간단하게 끝!

 

 

 

이젠 카카오 로그인 활성화를 하면 된다.

상태의 OFF로 된 스위치를 ON 으로 가게 누르고

 

 

원하는 동의 항목을 '설정'버튼을 눌러 설정한다. (외부에서 카카오톡 로그인 할 때마다 나오는 동의항목 체크 리스트가 이것이다!)

필자는 닉네임을 다음 화면에 띄우도록 구현해보고 싶어서 닉네임 하나만 필수로 설정했다.

 

이제 카카오 로그인을 본격적으로 구현해보자!

 

 

 

4. Cocoapods으로 모듈 설치

만약 Swift Package Manager로 받는 경우, https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios#apply-sdk-spm 참고하면 될 것 같다.

(일단 저는 코코아팟으로 받겠습니다...)

 

1. 프로젝트 파일에 pod init하기

2. 원하는 모듈 골라서 설치하기 (출처 : kakao developers)

# 전체 추가
pod 'KakaoSDK'

# or

# 필요한 모듈 추가
pod 'KakaoSDKCommon'  # 필수 요소를 담은 공통 모듈
pod 'KakaoSDKAuth'  # 사용자 인증
pod 'KakaoSDKUser'  # 카카오 로그인, 사용자 관리
pod 'KakaoSDKTalk'  # 친구, 메시지(카카오톡)
pod 'KakaoSDKStory'  # 카카오스토리 
pod 'KakaoSDKShare'  # 메시지(카카오톡 공유)
pod 'KakaoSDKTemplate'  # 메시지 템플릿 
pod 'KakaoSDKNavi'  # 카카오내비 
pod 'KakaoSDKFriend' # 카카오톡 소셜 피커, 리소스 번들 파일 포함

 

필자는 카카오 로그인만 구현할 것이기 때문에, 하단의 2가지 모듈만 설치했다.

install 완료!

 

이제 새로 생성된 모듈이 들어간 새하얀 xcode 프로젝트를 한 번 빌드 해주면 된다!

 

 

 

 

 

5. 등록

 1. 플랫폼등록은 이미 2번 단계에서 했기에 패스하고, 앱 실행 허용 목록 설정을 해야한다.

 

친절한 카카오님

 

 

 

이렇게 입력하고

자동으로 Queried URL Schemes로 바뀌어도 (Xcode 14.3버전) 당황하지 말고..~

RawValue로 보면 LSApplicationQueriesSchemes로 잘 보이니까 괜찮습니다..!

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

 

 

 

2. URL Schemes 설정

이제 드디어 발급받은 키를 활용할 때가 왔다.

 

 

각자 해당되는 네이티브 앱 키를 복사하고~

 

 

 

 info > URL Types > + 버튼 > URL Schemes에 각자 받은 'kakao + 네이티브 앱 키' 붙여넣기 하면 된다.

 

 

 

 

6. 초기화

1. App Delegate에 하단의 코드를 입력해준다.

   import KakaoSDKCommon
   import KakaoSDKAuth
   
   ...
   
   func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        KakaoSDK.initSDK(appKey: "각자 본인의 네이티브 앱 키 입력")
        return true
    }

2. 타겟이 13.0 이상인 경우, Scene Delegate에도 추가로 상단의 코드 작성해야한다!

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)
            }
        }
    }
    ...
}

 

 

 

7.  로그인 코드 구현하기

주의 : 시뮬레이터로 하면 카카오톡 없어서 에러 발생 -> 아이폰 실 기기로 돌리기

func handleKakaoButton(_ sender: Any) {
        // 카카오톡 공유 가능한 상태 (카카오 설치된 상태면 실행)
        if (UserApi.isKakaoTalkLoginAvailable()) {
            UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
                if let error = error {
                    print(error)
                }
                else {
                    print(#function)

                    //do something
                    _ = oauthToken
                }
            }
        }
    }

해당 함수를 아울렛의 버튼 액션에 넣었다.

 

 

이제 로그인을 하면, 라벨에 로그인 된 유저 이름을 띄워보려고 한다.

 

 

 

 

    @IBAction func handleKakaoButton(_ sender: Any) {
        // 카카오톡 공유 가능한 상태 (카카오 설치된 상태면 실행)
        if (UserApi.isKakaoTalkLoginAvailable()) {
            UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
                if let error = error {
                    print(error)
                }
                else {
                    print(#function)

                    //do something
                    _ = oauthToken
                    self.setUserInfo()
                }
            }
        }
    }
    

func setUserInfo() {
        UserApi.shared.me() {(user, error) in
                    if let error = error {
                        print(error)
                    }
                    else {
                        print("me() success")
                        self.userNameLabel.text = user?.kakaoAccount?.profile?.nickname
                    }
                }
            }

1. 카카오톡 버튼을 누르면, 기기에 카카오톡이 깔려있는지 확인

2. 유저가 정보 동의 후 로그인하면, label에 유저 카카오 계정 프로필 닉네임 띄우기

 

 

 

끝!