KaKao 소셜 로그인 구현하기

1. 내 어플리케이션 추가

1. https://developers.kakao.com/ 접속
2. '내 어플리케이션' 페이지 이동
3. '+ 어플리케이션 추가하기'
4. 앱 이름 / 회사명 / 카테고리 작성 (임의로 가능)

저장

2. 플랫폼 추가하기

1. 앱설정 -> 플랫폼 페이지

2. iOS 플랫폼 등록

앱스토어 ID가 없는 경우
번들 ID만 우선 입력하여 저장할 수 있다.

3. 카카오 로그인 활성화

[내 어플리케이션] -> [제품 설정] -> [카카오 로그인]

3. KaKao SDK - 모듈 추가하기

프로젝트 앱 실행 허용 목록 추가

1. 프로젝트 앱 실행 허용목록 추가

1) [Info] > [Custom iOS Target Properties]에 Array 타입 키(Key)인 Queried URL Schemes을 추가

2) 해당 키의 [Item]에 값으로 모듈 이름 추가

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

카카오 로그인만 쓸거지만 추후에 공유 기능도 추가될 것 같아서 우선 넣어뒀다.

2. 커스텀 URL 스킴

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록한다.

다만 이럴 경우 카카오 네이티브 앱 키가 노출될 가능성이 있기 때문에, config 파일을 등록하여 사용하는 것이 좋다.

방법은 다음과 같다.

1) 아래와 같이 'kakao${KAKAO_NATIVE_APP_KEY}'를 문자 그대로 입력해준다.

2) 새 파일 - Configuration Settings File 생성

3) KAKAO_NATIVE_APP_KEY 입력

네이티브 앱 키는 [내 어플리케이션] - [앱 설정] - [앱 키]에서 확인 가능하다.
기껏 외부 노출 안되게 분리해놓고 gitIgnore에 설정안해놔서 깃허브에 올라가는 일이 없도록 하자...

4) Info.plist에 KAKAO_NATIVE_APP_KEY 키 값 추가

KAKAO_NATIVE_APP_KEY 키를 추가하여 ${KAKAO_NATIVE_APP_KEY} value에 넣어주어야 Config에서 사용한 KAKAO_NATIVE_APP_KEY를 대신하여 우리가 저장한 앱 키 값이 들어간다.

5) 프로젝트 Info Configuration에 Config 추가하기

기본은 None으로 설정되어있는 Configuration File을 아까 생성한 Config 파일로 변경해준다.

SDK 모듈 설치 - SPM

1. SPM으로 설치

iOS SDK	kakao-ios-sdk	

- https://github.com/kakao/kakao-ios-sdk

ReactiveX iOS SDK	kakao-ios-sdk-rx	

- https://github.com/kakao/kakao-ios-sdk-rx

dependency Rule은 Branch - master로 설정한다.

로그인 부분은 Auth와 User 모듈만 설치하면 된다.
++ Rx여도 기본 SDK Auth와 User도 설치해야한다.
자세한 내용은 https://developers.kakao.com/docs/latest/ko/ios/getting-started 를 참고하자.

외부 라이브러리 의존성으로 인하여
아래와 같이 라이브러리가 추가로 설치된다.

4. SDK 초기화

1. AppDelegate에서 KakaoSDK 초기화

NATIVE_APP_KEY는 단순히 문자열이기 때문에 configure로 설정했던 KAKAO_NATIVE_APP_KEY를 가져와야 하기 때문에, 아래와 같이 변경한다.

import RxKakaoSDKCommon

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
	let nativeAppKey: String = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] as? String ?? ""
	RxKakaoSDK.initSDK(appKey: nativeAppKey)
        
	return true
}

카카오톡으로 로그인

사전 설정

카카오톡으로 로그인 기능을 구현하기 위한 필수 설정이다.

카카오톡으로 로그인은 서비스 앱에서 카카오톡으로 이동한 후, 사용자가 [동의하고 계속하기] 버튼 또는 로그인 취소 버튼을 누르면 다시 카카오톡에서 서비스 앱으로 이동하는 과정을 거친다.

카카오톡에서 서비스 앱으로 돌아왔을 때 카카오 로그인 처리를 정상적으로 완료하기 위해 AppDelegate.swift 파일에 handleOpenUrl()을 추가한다.

Deployment target이 iOS 13 이상으로 생성된 프로젝트라면 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, UISceneDelegate.swift를 기본으로 사용하도록 설정되어있다.

UISceneDelegate.swift를 기본으로 사용하는 경우, AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 handleOpenUrl()을 추가한다.

// 카카오톡으로 로그인 기능을 구현하기 위한 필수 설정
// 카카오톡에서 서비스 앱으로 돌아왔을 때 카카오 로그인 처리를 정상적으로 완료하기 위해 handleOpenUrl()을 추가
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        
	if let url = URLContexts.first?.url {
		if (AuthApi.isKakaoTalkLoginUrl(url)) {
			_ = AuthController.rx.handleOpenUrl(url: url)
		}
	}
}

로그인 요청 코드 구현부

UserApi.isKakaoTalkLoginAvailable()로 카카오톡이 설치되어있는지 판별한다.

• 설치: 카카오톡 로그인
• 미설치: 카카오 계정 로그인

// 카카오 앱 설치 여부 확인
if (UserApi.isKakaoTalkLoginAvailable()) {
                    
	// 카카오 앱으로 로그인 요청
	owner.kakaoAppLoginRequest()
                    
	} else {
                    
	// 카카오 계정으로 로그인 요청
	owner.kakaoAccountLoginRequest()
	}

// 카카오 앱으로 로그인 요청
private func kakaoAppLoginRequest() {
        
	UserApi.shared.rx.loginWithKakaoTalk()
		.subscribe(with: self) { owner, oauthToken in
                
			_ = oauthToken
                
		} onError: {owner, error  in
			print(error)
		}
		.disposed(by: disposeBag)
}
   
// 카카오 계정으로 로그인 요청
private func kakaoAccountLoginRequest() {
        
	UserApi.shared.rx.loginWithKakaoAccount()
		.subscribe(with: self) { owner, oauthToken in
			print("loginWithKakaoAccount() success.")

			_ = oauthToken
		} onError: {owner, error in
			print(error)
		}
		.disposed(by: disposeBag)
}