[Swift] 카카오 소셜 로그인

릴리즈를 준비하면서 카카오톡 소셜 로그인 뷰를 맡아서 미리 공부를 해보았다!

스터디하면서 구현을 했었던 적이 있었는데 그 때 엄청 꼬여서 애를 먹었었는데,, 

이번에는 천천히 구현을 해보겠다..!

 

시작하기 전에

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

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

액세스 토큰은 사용자 정보 기반의 API를 호출하는 데 쓰이고, 리프레시 토큰은 일정 기간동안 사용자 인증 절차를 거치지 않고도 액세스 토큰을 갱신할 수 있도록 해 준다.

 

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

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

- 카카오톡으로 로그인 

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

사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인할 수 있다!

 

- 기본 웹 브라우저를 통해 로그인

기본 웹 브라우저를 통해 카카오계정 정보를 입력하고 로그인할 경우, 사용자가 직접 입력하는 단계를 거친다.

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

 

토큰과 카카오 로그인 구현 방법 두 가지를 간략하게 설명했다!

저번에는 웹 브라우저 방식을 구현했었고, 이번에는 두 가지 방식 다 해보겠다!

순서에 따라 하나씩 정리를 해보겠다..! 

 

1. 애플리케이션 등록

"카카오 API는 개발자 웹사이트에 등록된 각각의 애플리케이션(이하 앱) 정보 기반으로 동작하므로, 카카오 API를 사용하려면 개발자 웹사이트에 앱을 등록해야 합니다."

앱 만들기

"카카오 API 사용을 위해 개발자 웹사이트에서 앱을 만들고, 해당 앱에 서비스 이름과 회사명, 아이콘 등 정보를 등록할 수 있습니다. 앱 정보는 서비스 이름, 제3자 정보제공동의 등 법적인 사항과도 관련이 있으므로 실제 서비스와 같은 내용으로 구성되어야 합니다."

개발자 웹사이트에서 로그인한 후, [내 애플리케이션] > [애플리케이션 추가하기]를 눌러 앱을 생성할 수 있습니다.

키 값 확인

"앱을 생성하면 플랫폼별 앱 키(App Key)가 발급됩니다. Kakao SDK for JavaScript(이하 JavaScript SDK)에는 JavaScript 키, iOS와 Android에는 네이티브 앱 키, HTTP 요청이나 서버 기능 구현에는 REST API 키를 각각 사용합니다."

발급 받은 앱 키는 [내 애플리케이션] > [앱 키]에서 확인할 수 있습니다.

이렇게 발급된다 ! (뒤에는 가렸습니다 ! ! !)

플랫폼 등록

등록한 앱에서 API를 호출하려면 사용하려는 플랫폼에 대한 정보를 개발자 웹사이트에 등록해야 한다.

iOS 플랫폼에는 다음 정보를 등록해야 합니다.

• 번들 ID(Bundle ID): iOS 앱의 고유 값입니다. Xcode의 프로젝트 정보에 설정된 Bundle Identifier 값과 동일한 값을 입력합니다.
• 앱스토어 ID(Appstore ID): 애플 앱스토어 등록 시 발급받은 앱 ID입니다.
• 마켓 URL(Market URL): 사용자의 기기에서 앱을 실행시킬 때, 사용자의 기기에 해당 앱이 설치되어 있지 않을 경우 이동할 앱스토어 주소입니다. 예를 들어, 사용자가 카카오링크 API나 카카오톡 메시지 API를 통해 전송된 메시지에서 앱을 실행시키는 링크를 눌렀을 때, 앱 실행을 요청한 사용자의 기기에 해당 앱이 설치되어 있지 않으면 지정한 마켓 URL 주소로 이동하여 해당 앱을 다운로드 받을 수 있습니다. 앱스토어 ID를 입력하면 마켓 URL이 자동으로 생성됩니다.

연습하는 단계이므로 번들 ID만 입력을 해준다!

 

2. CocoaPods 통해 모듈 설치

iterm2나 터미널을 켜고 자신의 파일이 위치한 경로로 이동한다 !

// 첫번째
pod init

// 두번째 Pod을 열고
vi Podfile

// Podfile에 추가해준다
# 전체 추가
pod 'KakaoSDK'

# or

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

// 마지막으로 설치
pod install

카카오 로그인 API를 사용하려면 카카오 로그인 모듈인 KakaoSDKUser, 사용자 인증 및 토큰 관리자 모듈인 KakaoSDKAuth를 설치해야 합니다.

 

저번에 구현할 때 애먹었던 부분이 이 부분이었다.

"기존에는 카카오 로그인 API를 KakaoSDKAuth 모듈의 AuthApi와 KakaoSDKUser 모듈의 UserApi를 통해 호출해야 했으나, iOS SDK 2.4.0 버전부터는 UserApi 하나로 호출할 수 있도록 개선하였습니다. 단, 사용자 인증 관련 API인 토큰 존재 여부 확인하기 API는 AuthApi를 통해 호출합니다. 문서의 예제 또한 최신 버전에 맞게 업데이트되었습니다."

지금은 UserApi 하나로 통합해서 쓸 수 있다!

 

3. info.plist 설정

iOS 9.0 이상에서 iOS SDK를 통해 카카오톡이나 카카오스토리, 카카오내비 등 애플리케이션(이하 앱)을 실행시키는 기능을 이용하려면 Info.plist 파일에 설정을 추가하여 커스텀 스킴 정보를 등록합니다.

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

Info.plist 파일을 직접 수정하여 적용할 수도 있습니다. 

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

4. URL Schemes 설정하기

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

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 'kakao{NATIVE_APP_KEY}' 형식으로 등록합니다. 예를 들어 네이티브 앱 키가 '123456789'라면 'URL Schemes'에 'kakao123456789'를 입력합니다.

이 설정은 커스텀 스킴 생성 시 사용됩니다. 커스텀 스킴은 카카오톡으로 로그인 후 서비스 앱으로 돌아오거나, 카카오링크 메시지 또는 카카오스토리 게시물을 통해 앱을 실행할 때 사용되며 각각 다음과 같은 형식이다.

• 카카오 로그인: kakao{NATIVE_APP_KEY}://oauth
• 카카오링크: kakao{NATIVE_APP_KEY}://kakaolink
• 카카오스토리: kakao{NATIVE_APP_KEY}://kakaostory

5. 초기화

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

 

// AppDelegate.Swift

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

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

}

initSDK(appKey:  "NATIVE_APP_KEY") 

"NATIVE_APP_KEY" 발급받은 네이티브 앱 키 값으로 수정하여 넣어줘야 한다! 

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

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

Info.plist 설정하기를 참고하여 앱에서 카카오톡을 실행시키기 위해 앱 실행 허용 목록(Allowlist)에 카카오톡을 등록하고, 서비스 앱으로 돌아올 때 쓰일 커스텀 스킴을 설정합니다.

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

Deployment target이 iOS 13 이상으로 생성된 프로젝트라면 Info.plist 파일에 UIApplicationSceneManifest 설정이 추가되며, UISceneDelegate.swift를 기본으로 사용하도록 설정됩니다. UISceneDelegate.swift를 기본으로 사용하는 경우, AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 handleOpenUrl()을 추가합니다.

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

7. 카카오톡으로 로그인

카카오톡으로 로그인 기능을 구현하기 위한 사전 설정 후, UserApi의 loginWithKakaoTalk()를 호출합니다. 이때 isKakaoTalkLoginAvailable()로 카카오톡 설치 여부를 확인할 수 있습니다.

 

카카오톡으로 로그인 API가 호출되면 iOS SDK가 카카오톡을 실행시키고 사용자에게 앱 이용 관련 동의를 구하는 동의 화면을 출력합니다. API 호출 시 결과 처리를 클로저(Closure) 객체로 정의하여 전달해야 합니다.

 

동의 화면에서 사용자는 필수 항목에 모두 동의하여야 로그인할 수 있으며, 동의하지 않고 로그인을 취소할 수도 있습니다. 예외 처리를 위해 사용자의 로그인 취소 등 주요 에러가 공통 모듈인 KakaoSDKCommon의 AuthFailureReason에 정의되어 있으며 레퍼런스를 참고합니다.

 

동의 화면에서 사용자가 모든 필수 항목에 동의하고 [동의하고 계속하기]를 선택하면, iOS SDK는 카카오톡에서 서비스 앱으로 돌아와 다음 단계인 인가 코드 발급과 토큰 발급을 요청합니다. 토큰 발급에 성공하면 카카오 로그인 완료입니다.

 

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

            //do something
            _ = oauthToken            
        }
    }    
}

8. 카카오계정으로 로그인

카카오계정 정보를 입력하여 로그인합니다. iOS SDK는 웹뷰(Web View)를 사용하지 않고 기본 웹 브라우저를 사용하여 로그인을 진행합니다. 사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태라면 ID 및 비밀번호 입력 과정을 생략하고 간편하게 로그인할 수 있습니다.

 

UserApi의 loginWithKakaoAccount() API를 호출합니다. API 호출 시 iOS SDK가 웹 브라우저를 실행하고 카카오 로그인 화면을 띄웁니다. 카카오톡으로 로그인 요청과 마찬가지로 로그인 요청 결과 처리를 클로저 객체로 전달해야 합니다.

 

카카오계정으로 로그인 요청 시, iOS SDK는 OS 기본 웹 브라우저를 통해 사용자로부터 카카오계정 정보를 받아 인증을 완료한 뒤, 사용자에게 앱 이용 관련 동의를 요청하는 동의 화면을 출력합니다. 동의 화면에서 사용자가 모든 필수 항목에 동의하고 [동의하고 계속하기]를 선택하면 iOS SDK는 인가 코드 및 토큰 발급을 진행하여 카카오 로그인을 완료합니다.

 

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

            //do something
            _ = oauthToken            
        }
    }

9.  로그인 여부와 상관없이 로그인 요청

보안을 위해 기존의 로그인 여부와 상관없이 사용자에게 재인증을 요청하려면, prompts를 .Login 으로 지정하여 전달합니다.

사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태임에도 로그인 화면을 출력합니다.

UserApi.shared.loginWithKakaoAccount(prompts:[.Login]) {(oauthToken, error) in
    if let error = error {
        print(error)
    }
    else {
        print("loginWithKakaoAccount() success.")           

        //do something
        _ = oauthToken

    }
}

'로그인 여부와 상관없이 로그인 요청' 부분은 구현하는 과정에서는 필요없었지만,

알아두면 좋을 것 같아서 정리를 해보았다 !

10.  토큰 존재 여부 확인하기

앱 실행 시 사용자가 앞서 로그인을 통해 발급 받은 토큰이 있는지 확인하려면 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 {
    //로그인 필요
}

hasToken() API의 결과가 false라면 토큰이 없는 상태이므로 사용자가 로그인할 수 있도록 처리합니다. 반면 결과가 true라면 UserApi의 accessTokenInfo() API를 통해 액세스 토큰의 유효성을 확인할 수 있으며, 요청 결과에 따라 다음과 같이 처리합니다.

• 요청 성공, 액세스 토큰 정보 반환
  • 액세스 토큰이 유효한 상태이므로 사용자 로그인 불필요
  • 해당 액세스 토큰으로 카카오 API 호출 가능
• 에러 발생
  • 액세스 토큰 및 리프레시 토큰이 유효하지 않아 사용자 로그인 필요
  • 각 에러에 맞는 처리 필요, 레퍼런스 참고

 

로그아웃은 이후에 ..~