카카오 로그인하기 swift

pengsang·2023년 9월 13일
UIkitiOSswift

개발일지

목록 보기
5/5
post-thumbnail

카카오 로그인하기

일반적으로 어플을 실행하여 로그인을 할 경우 카카오톡이나 네이버와 같은 플랫폼을 통해 로그인하는 경우를 볼 수 있다
이번 문서는 ios에서 카카오톡 계정을 통해 로그인을 하는 방법이다

1. Kakao Developers

우선 해당 링크를 통해 카카오톡 api를 이용할 수 있도록 해야한다
카카오톡 계정을 통해 해당 사이트에서 개발자를 등록해야 한다

https://developers.kakao.com/

a. 로그인 및 내 애플리케이션 등록

사진에서 빨간색 표시에 들어가 내 어플리케이션을 등록해야 한다


앱 이름은 임의로 지정하여 입력하면 된다
사업자가 있다면 사업자명을 입력하면 된다

b. 네이티브 키 확인하기

등록한 내 앱에 들어가면 사진과 같이 필요한 키값이 존재한다. 앞으로 네이티브 값을 사용할 것이므로 이를 기억하자

c. ios 플랫폼 등록

등록된 앱 화면에서 빨간색으로 표시한 플랫폼에 들어가 내가 등록하고자 하는 프로젝트를 등록해줘야 한다

ios를 선택하고

해당 위치에 프로젝트 번들을 입력해야 한다

프로젝트 번들의 경우에는 xcode 프로젝트에서 확인이 가능하다
프로젝트 파일 -> general -> identity -> Budle identifier
빨간색으로 표시된 부분에 있는 번들키를 입력하면 된다

2. 카카오톡 ios SDK 설치하기

아래 링크되어 있는 문서를 따라 카카오톡 api을 사용할 수 있도록 해야한다

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

1. 카카오톡 ios SDK 설치하기

방법은 2가지로 CocoaPods를 이용하거나 SPM(Swift Package Manager)를 사용하는 방법이 있다
또한 이용하기 위한 방식을 swift와 Rxswift가 있는다

해당 문서에서는 SPM을 사용하며 swift를 이용하였다

아래에서 작성된 그대로 따라한다

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

우선 아래 사진과 같이 순서대로 클릭한다
프로젝트 파일 -> project -> Package Dependencies -> + 버튼

아래 사진과 같이 제공되는 레포지토리 URL을 복사하여

  • 출처: kakao development ios 문서

    아래 사진에서 표시한 부분에 언어에 맞는 Repository URL을 붙여넣고 설치한다
    Dependancy Rule 부분을 Branch로 변경하고 브런치 명은 master로 한다

    설치 할 모듈은 필요에 의해 선택하면 되지만 현재 문서에서는 모든 모듈을 설치한다
  • 출처: kakao development ios 문서

    모든 설치과정을 마치면 아래 사진과 같이 새로운 패키지가 추가된다

3. 앱 실행 허용 목록 설정

1. info.list 수정하기

info.list를 수정하는 방법은 2가지가 존재한다
이 2가지 방식 중 하나를 선택하면 된다

  • info.list 딕셔너리에 목록을 추가하여 수정하기
  • info.list를 코드를 이용해 직접 수정하기

a. 딕셔너리에 목록을 추가하여 수정하기

[Info] > [Custom iOS Target Properties]에 Array 타입 키(Key)인 LSApplicationQueriesSchemes를 추가하고, 해당 키의 [Item]으로 커스텀 URL 스킴에 사용할 값인 "kakaokompassauth", "kakaolink"를 추가.

  • 출처: kakao development ios 문서

b. 코드로 직접 수정하기

우선 info파일에 접근을 해야한다

그러면 info파일이 navigator pane에 생성된 것을 확인할 수 있다

[info 파일 마우스 우클릭] -> [Open As] -> [Source Code]
순서로 실행

아래 코드를 info.list의 딕셔너리에 삽입한다.(딕셔너리 내 삽입 위치 주의!) 

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

4. URL Schemes 등록하기

1. 네이티브 앱 키 입력하기

URL Schemes이란
본래 파란색으로 표시한 부분에 네이티브 앱 키를 입력해도 실행이 되지만 네이티브 키는 중요한 정보이므로 해당 내용을 소스코드에서 노출되는 점을 해결해야한다. 따라서 config 파일을 이용하여 네이티브 앱 키를 저장하고 변수에 네이티브 앱 키를 저장해 변수로 사용이 가능하다

아래 사진처럼 새로운 파일을 생성한다
검색창에 config를 검색하고 해당 파일을 만들면 된다 - 확장자는 xconfig다

아래 사진과 같이 변수를 지정하고 개인별로 지급된 네이티브 앱 키를 저장한다

config에 있는 네이티브 앱 키를 사용하기 위해서 info.plist에 카카오에서 표기한 kakao${NATIVE_APP_KEY} 형식의 문자열을 저장해야 한다
url 스킴을 위해 사용하는 ${KAKAO_NATIVE_APP_KEY}에 config파일에 저장한 KAKAO_NATIVE_APP_KEY변수에 저장된 네이티브 앱 키로 설정하고 사용한다는 의미가 된다

그리고 아래 url스킴을 만드는 자리에 지정해놓은 토큰인 ${KAKAO_NATIVE_APP_KEY}를 넣으면 된다

그리고 아래와 같이 config파일을 사용하겠다는 의미로 3번 부분의 요소를 none에서 config로 바꿔줘야 한다

인터넷 api통신에서의 안정성을 위해 아래 사진과 같이 info.plist에 파란색으로 표기된 요소를 삽입한다

5. 카카오 로그인 활성상태 on

kakao Development에서 내 애플리케이션 -> 등록된 어플 -> 카카오 로그인 -> 활성상태 변경을 해야 한다

  • 출처: kakao development ios 문서

6. Redirect URI 설정

아래 사진에 위치한 Redirect URI을 추가한다
해당 위치에 들어가는 주소는 회사 사이트 주소로 지정하면 된다

  • 출처: kakao development ios 문서

7. Delegate에 코드 넣기

카카오 문서를 보면 아래 사진과 같이 AppDelegate에 라이브러리 import와 코드 삽입에 관한 정보를 볼 수 있다.

  • 출처: kakao development ios 문서

    해당 코드에 대하여 AppDelegate에 붙여 넣는 과정에서 약간의 변형이 필요하다
    "${NATIVE_APP_KEY}"는 단순히 문자열 상수이므로. 실제 앱키 값을 의미하지 않는다
    반면에 Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"]는 info.plist 파일에서 실제 앱키 값을 동적으로 읽어오는 코드다.
    그러므로 현재 프로젝트의 주 번들인 info.plist에 에서 키값을 추출해 오는 과정이 필요하다 따라서 아래와 같이 appDelegate에 코드를 삽입하면 된다
import KakaoSDKCommon
...
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let nativeAppKey = Bundle.main.infoDictionary?["KAKAO_NATIVE_APP_KEY"] ?? ""
        KakaoSDK.initSDK(appKey: nativeAppKey as! String) 
        return true
    }
 ...

이후로 아래 사진과 같이 AppDelegate에 작성해야할 카카오톡으로 로그인을 위한 필수적인 요소가 존재하는데 해당 코드를 작성해야 한다

그리고 SceneDelegate에도 작성해야 할 코드가 있다
해당 코드를 복사해 SceneDelegate에 삽입해준다

7. 카카오톡 로그인 코드 작성하기

https://developers.kakao.com/docs/latest/ko/kakaologin/ios

아래 사진과 같이 해당 코드를 작성하라고 한다

  • 출처: kakao development ios 문서

    구동 방식에 관하여 아래에서 작성된 대로 우선 카카오톡이 해당 디바이스에 존재하는지 여부를 먼저 판단한다
    만약 카카오톡이 디바이스에 존재하지 않는 경우에는 웹뷰를 통해 카카오톡을 인증하도록 할 수 있다
    업로드중..
  • 출처: kakao development ios 문서

새로운 swift파일을 생성하여 Model로 사용하면 된다
아래 코드처럼 작성하면 된다
이후 원하는 방식에 따라 비동기로 처리가 가능하다

import Foundation
import Combine
import KakaoSDKAuth
import KakaoSDKUser

class KakaoAuthVM: ObservableObject {
    
    var subscriptions = Set<AnyCancellable>()
    
    func handleKakaLogin() {
        print("KakaoAuthVM - handleKakaoLogin() called")
        
        // 카카오톡 실행 가능 여부 확인
        if (UserApi.isKakaoTalkLoginAvailable()) {
            // 카카오 앱으로 로그인
            UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
                if let error = error {
                    print(error)
                }
                else {
                    // 카카오 계정으로 로그인
                    print("loginWithKakaoTalk() success.")

                    //do something
                    _ = oauthToken
                }
            }
        }else {// 카카오톡 미설치 상태 -> 웹으로 이동해 로그인
            UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
                    if let error = error {
                        print(error)
                    }
                    else {
                        print("loginWithKakaoAccount() success.")

                        //do something
                        _ = oauthToken
                    }
                }
        }
    }
    
    func kakaoLogOut() {
        UserApi.shared.logout {(error) in
            if let error = error {
                print(error)
            }
            else {
                print("logout() success.")
            }
        }
    }
}
profile
pengsang
내 꿈은 고등어

0개의 댓글