앱 개발 기록 2. 카카오톡 소셜 로그인 구현하기

 

 

시작하기 전에

카카오 로그인은 사용자를 인증하고 토큰을 발급하는 기능입니다.

토큰은 액세스 토큰(Access Token)과 리프레시 토큰(Refresh Token) 두 종류입니다.

액세스 토큰은 사용자 정보 기반의 API를 호출하는 데 쓰이고,

리프레시 토큰은 일정 기간 동안 사용자 인증 절차를 거치지 않고도 액세스 토큰을 갱신할 수 있도록 해 주는 역할입니다.

 

토큰은 OAuth 2.0 사양에 따라 다음 절차를 거쳐 발행됩니다:

1. 카카오계정 인증
2. 사용자 동의(이미 동의한 경우 건너뛰기)
3. 인가 코드(Authorization Code) 발급
4. 인가 코드로 토큰(OAuthToken) 발급

1단계에서 사용자의 카카오계정을 인증하는 방식에 따라, iOS SDK를 사용한 카카오 로그인 구현 방법은 두 가지로 나뉩니다:

• 카카오톡으로 로그인
• 기본 웹 브라우저(Default Browser)를 통해 카카오계정으로 로그인

 

카카오톡으로 로그인하는 방법은 카카오톡에 연결된 카카오계정 및 인증 정보를 사용합니다.

사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인할 수 있어 보다 권장되는 인증 방법입니다.

 

기본 웹 브라우저를 통해 카카오계정 정보를 입력하고 로그인할 경우,

사용자가 카카오계정 정보를 직접 입력하는 단계를 거칩니다.

 

이 방법은 사용자가 여러 개의 카카오계정을 사용하는 서비스나 카카오톡을 지원하지 않는 디바이스에서 사용하는 것이 좋습니다.

 

각 인증 방법의 특징과 서비스의 사용자 로그인 동선을 고려하여 어느 인증 방법이 적합한지 판단합니다.

 

두 가지 인증 방법을 함께 사용할 수도 있습니다.

인증 방법에 따라 필요한 설정이나 예외 처리에 차이가 있으므로,

인증 방법별 개발 가이드를 참고합니다.

 

 

 

아래 url로 들어가서 애플리케이션 등록을 하고 네이티브 앱 키를 갖고 오자

 

developers.kakao.com/docs/latest/ko/getting-started/app

 

 

---

필요한 모듈 설치하기

카카오 로그인은 카카오 로그인 모듈의 AuthApi가 제공하는 API를 사용하여 구현합니다.

카카오 로그인 관련 기능 중 로그아웃과 연결 끊기, 토큰 조회 기능은 사용자 관리(User) 모듈 설치를 필요로 합니다.

모듈 설치 방법은 설치하기를 참고합니다.

 

모듈 설치

1. Podfile에 pod 'KakaoSDK' 를 추가해서 SDK를 설치한다.

2. Info.plist를 설정한다.

[Info] > [Custom iOS Target Properties]에 Array 타입 키(Key)인 LSApplicationQueriesSchemes를 추가하고,

해당 키의 'Item'으로 커스텀스킴에 사용할 값인'kakaokompassauth', 'kakaolink'를 추가합니다.

 

3. URL Schemes 설정하기

카카오계정을 통한 인증과 카카오톡 메시지를 통한 앱 실행을 위해 URL Schemes 설정을 합니다.

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를

'kakao{NATIVE_APP_KEY}' 형식으로 등록합니다.

예를 들어 네이티브 앱 키가 '123456789'라면 'URL Schemes'에 'kakao123456789'를 입력합니다.

 

네이티브 앱 키? 그게 뭔데?

-> 카카오톡 개발자 사이트(https://developers.kakao.com/)에 App 등록을 하면 Native App Key를 획득 할 수 있다.
나의 네이티브 앱 키 95ea063c45c0aa3c70f73718be576f7c

그 다음에 iOS 플랫폼 등록을 누른 후에 번들ID를 입력 후에 저장하자. 아래는 관련 링크이다.

sujinnaljin.medium.com/ios-%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-58a525e6f219

 

그리고 카카오로 로그인 활성화까지 해줘야한다.

 

 

초기화

iOS 앱에서 iOS SDK를 사용하려면 iOS SDK 파일을 아래와 같이 임포트(import)해야 합니다.

또한 네이티브 앱 키를 사용해 iOS SDK를 초기화하는 과정이 필요합니다.

다음 예제를 참고하여 AppDelegate.swift에 Kakao SDK를 초기화하는 코드를 추가합니다.

 

import KakaoSDKCommon

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

  ...
  KakaoSDKCommon.initSDK(appKey: "NATIVE_APP_KEY")
  ...

}

---

여기에 본인의 네이티브 앱 키를 넣자

 

 

 

 

모듈 설치 후 카카오 로그인과 사용자 관리 API를 사용하려면 다음과 같이 모듈을 import합니다.

 

AppDelegate.swift 에 import한다.

 

import KakaoSDKAuth

import KakaoSDKUser

 

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

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

Info.plist 설정하기를 참고하여 앱에서 카카오톡을 실행시키기 위해

앱 실행 허용 목록(Allowlist)에 카카오톡을 등록하고,

서비스 앱으로 돌아올 때 쓰일 커스텀 스킴을 설정합니다.

 

카카오톡으로 로그인은 서비스 앱에서 카카오톡으로 이동한 후,

사용자가 '동의하고 계속하기' 버튼 또는 로그인 취소 버튼을 누르면

다시 카카오톡에서 서비스 앱으로 이동하는 과정을 거칩니다.

 

카카오톡에서 서비스 앱으로 돌아왔을 때

카카오 로그인 처리를 정상적으로 완료하기 위해 

AppDelegate.swift 파일에 handleOpenUrl()을 추가합니다.

 

 

iOS 13 이상 버전에서 만든 프로젝트라면 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, 

UISceneDelegate.swift를 기본으로 사용하도록 설정됩니다. 

UISceneDelegate.swift를 기본으로 사용하는 경우, 

AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 다음 코드를 추가해야 합니다.

 

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

 

 

 

카카오톡으로 로그인

카카오톡으로 로그인 기능을 구현하기 위한 사전 설정 후,

카카오톡으로 로그인 API인 loginWithKakaoTalk()를 호출합니다.

 

이때 isKakaoTalkLoginAvailable()로 카카오톡 설치 여부를 확인할 수 있습니다.

 

카카오톡으로 로그인 API가 호출되면 iOS SDK가 카카오톡을 실행시키고

사용자에게 앱 이용 관련 동의를 구하는 동의 화면을 출력합니다.

 

API 호출 시 결과 처리를 클로저(Closure) 객체로 정의하여 전달해야 합니다.

 

동의 화면에서 사용자는 필수 항목에 모두 동의하여야 로그인할 수 있으며,

동의하지 않고 로그인을 취소할 수도 있습니다.

 

예외 처리를 위해 사용자의 로그인 취소 등 주요 에러가 AuthFailureReason에 정의되어 있으니 레퍼런스를 참고합니다.

 

동의 화면에서 사용자가 모든 필수 항목에 동의하고 '동의하고 계속하기'를 선택하면,

iOS SDK는 카카오톡에서 서비스 앱으로 돌아와 다음 단계인 인가 코드 발급과 토큰 발급을 요청합니다.

 

토큰 발급에 성공하면 카카오 로그인 완료입니다.

 

 

// 카카오톡 설치 여부 확인
if (AuthApi.isKakaoTalkLoginAvailable()) {
    AuthApi.shared.loginWithKakaoTalk {(oauthToken, error) in
        if let error = error {
            print(error)
        }
        else {
            print("loginWithKakaoTalk() success.")

            //do something
            _ = oauthToken            
        }
    }    
}

 error 

여기까지하고 빌드 해보았더니 158개의 컴파일 에러가 발생한다.

 

검색을 해보았더니 아래와 같은 답이 있었다.

 

stackoverflow.com/questions/40040570/swift-compiler-error-on-pods

 

xcode의 낮은 버젼을 사용해서라고 하는데 나는 최신버젼의 xcode와 swift를 사용하고 있다...

 

일단 swiftyJSON에서 오류가 나고 있다는 사실을 알았다.

그래서 podfile에서 swiftyJSON을 삭제하고 $pod install 해줬더니 오류가 사라졌다.   미해결 

 

나중에 다시 확인해보자.

 

 

 error 

canOpenURL: failed for URL: "kakaokompassauth://authorize" - error: "The operation couldn’t be completed. (OSStatus error -10814.)"

 

위와 같은 오류가 AuthApi.isKakaoTalkLoginAvailable() 에서 발생한다.

 

devtalk.kakao.com/t/topic/33970

카카오톡이 설치 되어 있지 않을 때 발생하는 오류하고 한다.

카카오톡으로 로그인이 아니라 카카오톡 계정으로 로그인하는 방식으로 구현하자.

 해 결 

 

 

카카오계정으로 로그인

카카오계정 정보를 입력하여 로그인합니다.

iOS SDK는 웹뷰(Web View)를 사용하지 않고 기본 웹 브라우저를 사용하여 로그인을 진행합니다.

 

사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태라면

ID 및 비밀번호 입력 과정을 생략하고 간편하게 로그인할 수 있습니다.

 

카카오계정으로 로그인하려면 loginWithKakaoAccount() API로 요청합니다.

이 API를 호출하면 iOS SDK가 웹 브라우저를 실행하고 카카오 로그인 화면을 띄웁니다.

 

카카오톡으로 로그인 요청과 마찬가지로 로그인 요청 결과 처리를 클로저 객체로 전달해야 합니다.

카카오계정으로 로그인 요청 시,

iOS SDK는 OS 기본 웹 브라우저를 통해 사용자로부터 카카오계정 정보를 받아 인증을 완료한 뒤,

사용자에게 앱 이용 관련 동의를 요청하는 동의 화면을 출력합니다.

 

동의 화면에서 사용자가 모든 필수 항목에 동의하고 '동의하고 계속하기'를 선택하면

iOS SDK는 인가 코드 및 토큰 발급을 진행하여 카카오 로그인을 완료합니다.

 

AuthApi.shared.loginWithKakaoAccount {(oauthToken, error) in
        if let error = error {
            print(error)
        }
        else {
            print("loginWithKakaoAccount() success.")            

            //do something
            _ = oauthToken            
        }
    }

 

위의 코드를 카카오 로그인 버튼을 눌렀을 때 실행하게 하면 된다.