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

이번 포스팅에선 카카오 소셜 로그인 구현에 대한 여정을 작성해볼까 합니다.

개발 전 사전 준비

카카오 소셜 로그인은 개발 전 카카오 개발자 웹사이트에서 준비할 사항들이 좀 많이 있었는데요.

그 과정을 하나하나 살펴보겠습니다.

 

애플리케이션 등록

카카오 소셜 로그인을 사용하려면 카카오 개발자 웹사이트에 애플리케이션을 등록해주어야 합니다.

앱 아이콘, 앱 이름,  회사명을 입력해줍니다. 

 

여기서 가장 중요한 게 앱 아이콘인데요. 이는 앱을 카카오 Biz앱(실질적인 앱 운영을 위한 비지니스 앱)으로 등록하는 과정 중 필수과정이며, 추후 앱을 테스트 앱으로 전환하기 위함입니다. 왜냐하면 이후 유저가 카카오 로그인 시 유저에게 제공 받을 개인정보 동의항목 설정의 제한을 더 확장시켜주기 위함이죠. 이부분에 대한 더 자세한 설명은 아래에서 더 설명하도록 하겠습니다.

 

Biz 앱 전환

이제 웹사이트에 앱도 등록되었으니 Biz 앱으로 전환 해보겠습니다. 

 

카카오 개발자 웹사이트에 접속하셔서 [내 애플리케이션] > [비즈니스] > [개인 개발자 비즈 앱] 경로로 이동하시면 아래 사진과 같은 화면을 보실 수 있는데요. 여기서 전환해주시면 됩니다.

 

개인 개발자 Biz 앱 전환 과정은 여기를 클릭하시면 확인해보실 수 있습니다.

 

테스트 앱 생성

자 이제 그럼 테스트 앱을 생성해 보겠습니다. 

 

여기서 테스트 앱을 생성해주는 이유는 앞서 등록한 일반 앱에서 유저 개인정보 동의항목을 테스트해보려면 뭔가 복잡한 비지니스 앱 검사 절차를 거처야 하기 때문입니다. 따라서 테스트용 앱을 생성하여 개인정보 동의항목에 대해 테스트해 볼 수 있습니다.

 

사실 절차는 굉장히 간단합니다. 단순히 카카오 개발자 문서를 참고하여 설정해주시면 됩니다.

 

 

개인정보 동의항목 설정

다음은 개인정보 동의항목 설정입니다. 사실 이 부분을 위해 위 과정을 진행해왔다고 해도 과언이 아닙니다.

 

일단 [제품 설정] > [카카오 로그인] 으로 이동하여 카카오 로그인을 활성화 시켜줍니다.

 

그 다음 [제품 설정] > [동의항목]으로 이동해서 유저에게 제공받을 개인정보 항목들에 대해 필수, 선택 여부 등을 설정해줍니다.

 

카카오 플랫폼 등록

카카오 API와 비즈니스 솔루션 등 카카오 플랫폼을 이용하려면, 카카오 플랫폼을 등록해주어야 합니다.

경로는  [내 애플리케이션] > [앱 설정] > [플랫폼] > [iOS 플랫폼 등록]을 따라 이동해 줍니다.

 

이동 후, Bundle ID를 등록해줍니다.

여기까지가 카카오 개발자 웹사이트에서 설정해주어야 할 준비사항들이었습니다. 참으로 설정해주어야 것들이 많았던 것 같습니다. 하지만 카카오 개발자 공식문서만 잘 따라 간다면 무리없이 설정가능한 것들이었습니다.

 

Xcode에서 설정해주어야 할 것들

앱 허용 목록 설정

[Info] > [Custom iOS Target Properties] 로 이동하여 Queried URL Schemes 키를 추가후, 해당 키들 중 필요한 값을 [Item]에 값으로 아래 문구 추가해줍니다.

• kakaokompassauth: 카카오 로그인
• kakaolink: 카카오톡 공유
• kakaoplus: 카카오톡 채널

저의 경우 카카오 로그인 기능만 사용 예정이므로 kakaokompassauth만 [Item]으로 추가해주었습니다.

 

커스텀 URL 스킴 설정

추후 카카오톡 앱을 통해 카카오 로그인을 진행하기 위해 커스텀 URL 스킴을 설정해줍니다.

경로는 [Info] > [URL Types] > [URL Schemes] 로 이동하셔서 설정해주시면 됩니다.

 

보다 상세한 설정 방법은 카카오 공식문서를 참고 하시면 될 것 같습니다.

 

코드 구현

여기까지 오느라 정말 호흡이 너무 길었습니다. ㅜㅜ 

자 이제 드디어 코드 구현 시간입니다.

코드 구현은 생각보다 간단합니다. 저 같은 경우 SwiftUI로 앱을 구성하였기에 SwiftUI 기반으로 설명해겠습니다.

 

카카오톡으로 로그인을 하기 위한 설정

SwiftUI App Life Cycle 사용 시에는 SDK 초기화와 마찬가지로 ${PROJECT_NAME}App 클래스 내부에 onOpenURL()을 사용하여 handleOpenUrl()을 추가합니다.

import SwiftUI
import KakaoSDKCommon
import KakaoSDKAuth

@main
struct MyBitApp: App {
    
    @StateObject private var appIntent = AppIntent()
    
    init() {
        KakaoSDK.initSDK(appKey: APIKeys.kakaoNativeAppKey)
    }
    
    var body: some Scene {
        WindowGroup {
            LaunchScreenView()
                .onOpenURL(perform: { url in
                    if (AuthApi.isKakaoTalkLoginUrl(url)) {
                        let _ = AuthController.handleOpenUrl(url: url)
                    }
                })
                .onAppear {
                    appIntent.send(.isLogin)
                }
                .environmentObject(appIntent)
        }
    }
}

 

카카오톡으로 로그인

이제 정말 카카오톡으로 로그인하는 기능을 구현해보겠습니다.

 

우선 아래 코드를 보시면 유저가 카카오 로그인 버튼을 클릭했을 때, startLoginWithKakaoTalk() 메서드가 호출되면서 카카오톡 로그인이 시작됩니다. 

 

가장 먼저 isKakaoTalkLoginAvailable() 메서드를 통해 카카오 실행 가능 여부를 확인하고, loginWithKakaoTalk() 메서드를 실행하게 되면 iOS SDK는 카카오톡을 실행해 사용자에게 앱 이용 관련 동의를 구하는 동의 화면을 출력합니다. API 호출 시 결과 처리를 클로저(Closure) 객체로 정의하여 전달됩니다. 여기서 전달된 토큰 정보를 가지고 서버로 로그인을 요청하게 됩니다.

private func startLoginWithKakaoTalk() {
    // 카카오톡 실행 가능 여부 확인
    if (UserApi.isKakaoTalkLoginAvailable()) {
    	// 카카오톡 연결 및 실행
        UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
            if let error = error {
                print("Fail to login with KakaoTalk.")
                print(error)
            }
            else {
                print("Successfully login with KakaoTak.")
                // 서버로 로그인 요청
                intent.send(.loginWithKakao(oauthToken: oauthToken?.accessToken))
            }
        }
    }
}

 

마무리

자 여기까지 참으로 긴 여정이었던 것 같습니다. 뭔가 실질적으로 코드로 구현한 내용은 많이 없었는데, 그전에 환경설정해주어야 할 사항들이 좀 많았던 것 같습니다.

하지만 카카오 공식문서만 잘 따라가다 보니 무리없이 구현할 수 있었던 것 같습니다.

 

지금까지 긴 글 읽어 주셔서 감사합니다!

 

참고 사이트

https://mini-min-dev.tistory.com/38 (기본 참고 사이트)

https://devtalk.kakao.com/t/topic/133430/2 (카카오로부터 받을 정보 설정 오류 - 비즈앱 신청해야 사용자 이메일을 받을 수 있음)

https://developers.kakao.com/docs/latest/ko/getting-started/app#biz-app-for-individual (개인 개발자가 비즈앱 설정하는 법)

https://developers.kakao.com/docs/latest/ko/ios/getting-started#project-plist (앱 실행 허용 목록 설정하는 법)

https://developers.kakao.com/docs/latest/ko/documentation-guideline/glossary#%E3%85%8B (커스텀 URL 스킴 용어 설명)

https://developers.kakao.com/docs/latest/ko/ios/getting-started#project-schemes (커스텀 URL 스킴 설정하는법)

https://developers.kakao.com/docs/latest/ko/kakaologin/ios (iOS SDK로 카카오 로그인 설정하는 문서)