[iOS]카카오 로그인(소셜)

본 게시물은 쓴이의 경험을 토대로 한 것임으로, 100% 정답이라고 할 수 없습니다.
가볍게 참고만 해주시면 감사하겠습니다 😁

카카오 로그인 

Set Up ▾

요구사항 ⚠️

• Xcode 11.0 이상
• iOS 11.0 이상
• iOS Deployment Target 11.0 이상
• Swift 4.2 이상

• 위 요구사항이 충족이 된다는 가정으로 진행하겠습니다.

설치하기 ⬇️

• 우선 쓴이는 Cocoapods를 이용해 iOS SDK를 설치하였습니다.

# 전체 추가
pod 'KakaoSDK'

# or

# 필요한 모듈 추가
pod 'KakaoSDKCommon'  # 필수 요소를 담은 공통 모듈
pod 'KakaoSDKAuth'  # 사용자 인증
pod 'KakaoSDKUser'  # 카카오 로그인, 사용자 관리
pod 'KakaoSDKTalk'  # 친구, 메시지(카카오톡)
pod 'KakaoSDKStory'  # 카카오스토리 
pod 'KakaoSDKLink'  # 메시지(카카오링크)
pod 'KakaoSDKTemplate'  # 메시지 템플릿 
pod 'KakaoSDKNavi'  # 카카오내비

 

Info.plist 설정 ▾

• 앱 실행 허용 목록(Allowlist) 등록하기
  • iOS 9.0 이상에서 iOS SDK를 통해 카카오톡이나 카카오스토리, 카카오내비 등 애플리케이션(이하 앱)을 실행시키는 기능을 이용하려면 Info.plist 파일에 설정을 추가하여 커스텀 URL 스킴 정보를 등록합니다.
  • 이 설정은 사용자 정보 보호를 위한 OS 정책에 따라 필요한 것으로, 자세한 내용은 Privacy and Your App을 참고합니다.
  • [Info] > [Custom iOS Target Properties]에 Array 타입 키(Key)인 LSApplicationQueriesSchemes를 추가하고, 해당 키의 'Item'으로 커스텀 URL 스킴에 사용할 값인 'kakaokompassauth', 'kakaolink'를 추가합니다.

info.plist

• 코드를 통해서 추가할 수도 있습니다.

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

 

URL Schemes 설정하기 ▾

• 카카오계정을 통한 인증과 카카오톡 메시지를 통한 앱 실행을 위해 URL Schemes 설정을 합니다.
• [Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 'kakao{NATIVE_APP_KEY}' 형식으로 등록합니다.
• 예시로, 네이티브 앱 키가 'ABC1234' 라고 하면, kakaoABC1234 라고 입력하면 된다.

URL Schemes

 

초기화 ⚙️

• iOS 앱에서 iOS SDK를 사용하려면 iOS SDK 파일을 아래와 같이 임포트(import)해야 합니다.
• 또한 네이티브 앱 키를 사용해 iOS SDK를 초기화하는 과정이 필요합니다. AppDelegate.swift에 Kakao SDK를 초기화하는 코드를 추가합니다.

import KakaoSDKCommon

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

  ...
  KakaoSDK.initSDK(appKey: "{NATIVE_APP_KEY}")
  ...

}

 

• Deployment target이 iOS 13 이상으로 생성된 프로젝트라서 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, UISceneDelegate.swift를 기본으로 사용하도록 설정이 되는데, 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)
            }
        }
    }
    ...
}

---

카카오 로그인 메소드 관련 ▾

카카오톡 설치 여부 확인 

• 이를 통해 카카오톡이 설치된 유저들은 카카오톡을 통하여 로그인을 할 수 있도록 구현하였습니다.
• 반면에 카카오톡이 없다면 카카오계정을 이용하여 로그인 할 수 있도록 했습니다. (아래 참고)

// 카카오톡 설치 여부 확인
if (UserApi.isKakaoTalkLoginAvailable()) {
    UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
        if let error = error {
            print(error)
        }
        else {
            print("카카오 로그인 성공")
            
            _ = oauthToken
            /// 로그인 관련 메소드 추가
        }
    }    
}

 

카카오 계정으로 로그인

• 카카오 계정으로 로그인을 할 시, iOS SDK는 웹뷰(Web View)를 사용하지 않고, 기본 웹 브라우저를 사용하여 로그인을 진행한다고 합니다.
• 사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태라면 ID 및 비밀번호 입력 과정을 생략하고 간편하게 로그인할 수 있다고 합니다.
• UserApi의 loginWithKakaoAccount() API를 호출합니다. API 호출 시 iOS SDK가 웹 브라우저를 실행하고 카카오 로그인 화면을 띄웁니다.
• 카카오톡으로 로그인 요청과 마찬가지로 로그인 요청 결과 처리를 클로저 객체로 전달해야 합니다.

// 카카오 계정으로 로그인
UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
    if let error = error {
        print(error)
    }
    else {
        print("카카오 로그인 성공")     

        _ = oauthToken
        /// 로그인 관련 메소드 추가
    }
}

 

토큰 존재 여부 확인하기

• 이 메소드를 통해 자동 로그인을 구현했습니다.
• 앱 실행 시 사용자가 앞서 로그인을 통해 발급 받은 토큰이 있는지 확인하려면 AuthApi의 hasToken() API를 호출합니다.
• 이 API는 기존에 발급 받은 액세스 토큰 또는 리프레시 토큰의 존재 여부를 Boolean 값으로 알려줍니다.

단, hasToken()의 결과가 true라도 현재 사용자가 로그인 상태임을 보장하지 않습니다.

// 토큰 존재 여부 확인하기
if (AuthApi.hasToken()) {
    UserApi.shared.accessTokenInfo { (_, error) in
        if let error = error {
            if let sdkError = error as? SdkError, sdkError.isInvalidTokenError() == true  {
                //로그인 필요
            }
            else {
                //기타 에러
            }
        }
        else {
            //토큰 유효성 체크 성공(필요 시 토큰 갱신됨)
        }
    }
}
else {
    //로그인 필요
}

 

토큰 정보 보기

• UserApi의 accessTokenInfo() API로 토큰 정보를 조회할 수 있습니다.

// 사용자 엑세스 토큰 정보 조회(캐시에 저장하여 사용중인 토큰)
UserApi.shared.accessTokenInfo {(accessTokenInfo, error) in
    if let error = error {
        print(error)
    }
    else {
        print("엑세스 토큰 정보 가져오기 성공")
        _ = accessTokenInfo        
    }
}

 

사용자 정보 가져오기

⚠️ 동의 항목 설정 필요 (아래 참고)
이 API를 사용하려면 동의 항목 설정을 참고하여 필요한 사용자 정보 동의 항목을 설정해야 합니다.
동의 항목이 설정이 되어있더라도 사용자가 동의하지 않으면 사용자 정보를 받을 수 없습니다. 동의 내역 확인하기 API를 통해 사용자가 동의한 동의 항목을 먼저 확인 할 수 있습니다.

• 현재 로그인한 사용자의 정보를 불러옵니다.
• 사용자 정보 관련 API는 UserApi가 제공합니다.
• 해당 클라이언트가 제공하는 shared 객체를 통해 me() API를 호출하여 사용자 정보를 불러옵니다.
• 사용자 정보 응답은 KakaoSDKUser에 정의되어 있는 User 클래스 객체로 전달됩니다.
• 예를 들어 회원번호 값을 조회하려면 user.id, 카카오계정 프로필 정보들은 user.kakaoAccount.profile, 이메일은 user.kakaoAccount.email과 같이 접근할 수 있습니다.

UserApi.shared.me() {(user, error) in
    if let error = error {
        print(error)
    }
    else {
        print("사용자 정보 가져오기 성공")
        _ = user
    }
}

 

동의 항목 설정하기

• 아래 사진처럼 [카카오 로그인] > [동의항목] 에서 설정할 수 있습니다.

 

로그아웃

• 로그아웃 API는 토큰을 삭제하여, 더 이상 해당 사용자 정보로 카카오 API를 호출할 수 없도록 합니다.
• 사용자 정보 기반 API 호출을 맡은 클라이언트인 UserApi의 logout() API로 로그아웃을 요청할 수 있습니다.

로그아웃은 API 요청의 성공 여부와 관계없이 토큰을 삭제 처리한다는 점에 유의합니다.

// 로그아웃
UserApi.shared.logout {(error) in
    if let error = error {
        print(error)
    }
    else {
        print("로그아웃 성공")
    }
}

---

 

개발 이슈

카카오톡 관련 로그인 이슈 ▾

카카오톡 실행만 된다 ❓

• 카카오 계정 로그인 및 애플 로그인은 이상이 없었습니다. → 로그인 API 문제 아닌 것 확인
• 카카오톡을 이용한 로그인만 카카오톡이 실행되고 이 후 로그인 프로세스가 진행되지 않았습니다.
• 에러 관련 로그도 찍히지 않아 어디가 문제인지 찾을 수 없어서 처음부터 다시 살펴보았습니다.

 

원인은 URL Shcemes ❗️

• 사진에 나와있는 URL Schemes가 바뀌어 있던 것 !
• CI/CD 때문에 최근 App Center를 도입하던 중 URL Schemes를 추가해야하는 것을 수정하고 말았습니다.
  • 카카오 URL Schemes가 안들어가있고, App Center URL Schemes가 들어가 있었습니다.
• 이에 URL Schemes를 수정하여 로그 없는 오류를 해결할 수 있었습니다.