[Social Login] 소셜 로그인을 구현해보자! 1탄 - 카카오톡 로그인

오늘은 최신 어플이라면, 빠지지 않고 가장 기본적으로 들어가는 기능 "소셜 로그인"에 대해 시리즈로 글을 다루어보려 한다.

오늘은 그 첫 번째로, 카카오톡 간편 로그인에 대해 다뤄보겠다.

Kakao Developers

 

1️⃣ 카카오 개발자 웹사이트에서 해줘야 할 것들

---

카카오 소셜 로그인을 사용하려면, 카카오 개발자 웹사이트에 애플리케이션을 등록해줘야만 한다.
앱 아이콘, 앱 이름, 사업자명을 정확하게 작성하고 저장을 눌러 애플리케이션을 추가해주자.

이때 추가한 아이콘, 이름, 사업자명은 사용자에게 표출될 때 아래 오른쪽 사진과 같은 방식으로 사용된다.

애플리케이션을 등록하면,
아래와 같이 네이티브 앱 키, REST API 키, JavaScript 키, Admin 키가 발급된다.

[요약정보]에 있는 이 키들은 카카오 API를 활용할 때 전반적으로 사용되는 애들이다. 기억해두자.

우리는 카카오 로그인을 구현해줄 것이므로

[제품 설정] -> [카카오 로그인]으로 옮겨가 카카오 로그인의 활성화를 눌러준다.

[제품 설정] -> [동의항목]에는 원하는 개인 정보의 동의 항목을 설정할 수 있다.

여기서 설정한 항목은 아래 오른쪽 사진처럼 사용자에게 표출된다.

 

카카오 API와 비즈니스 솔루션 등 카카오 플랫폼을 이용하려면, 카카오 플랫폼을 등록해줘야 한다.

경로는 [내 애플리케이션] -> [앱 설정] -> [플랫폼] -> [iOS 플랫폼 등록] 순이다.

iOS 플랫폼에는 번들 ID, 앱스토어 ID, 마켓 URL을 등록할 수 있는데
이 중 번들 ID만이 필수 값이고, 나머지 두 개는 앱스토어에 등록되어 있을 때 입력할 수 있는 값들이다.

필수로 등록해야 하는 번들 ID는 Xcode의 프로젝트 정보에서 확인할 수 있다.

메인 홈에 있는 Bundle Identifier 값이 해당 iOS 앱의 고유 값이니, 이 값을 그대로 입력하면 된다.

그리고 이제 카카오톡 로그인이 사용될 버튼 이미지를 다운로드 받아주자.

보통, 코드 베이스로 사용하는 Apple 로그인 버튼과 다르게 카카오톡 로그인은 이렇게 아래 웹사이트에서 버튼 리소스를 제공해준다.

Kakao Developers

물론, 커스텀도 가능하다.

대신, 이때는 아래 카카오 개발자 공식문서에서 표기하고 있는 디자인 가이드를 준수해서 버튼을 만들어야 한다는 것 잊지 말자.
(대충 마구잡이로 어디서 카카오 모양만 따와, 노란 배경만 넣어주면 안 된다는 얘기)

Kakao Developers

 

2️⃣ Xcode에서 기본적으로 설정해줘야 할 것들

---

그럼 이제 카카오 로그인에 사용되는 모듈을 다운받아줘야 한다.
pod install을 필요한 코드를 작성해서 해주자.

iOS 9.0 이상에서 iOS SDK를 통해 카카오톡이나 카카오스토리, 카카오내비 등 애플리케이션(이하 앱)을 실행시키는 기능을 이용하려면,
앱 실행 허용 목록(Allowlist)을 등록해줘야 한다.

이 설정은 사용자 정보 보호를 위한 OS 정책에 따라 필요한 것이라고 공식문서에 나와있다.

[Info] -> [Custom iOS Target Properties]에 Array 타입 키, LSApplicationQueriesSchemes를 추가해주자.
그리고 해당 키의 'Item'으로 'kakaokompassauth', 'kakaolink'를 추가해주자.

아래 사진을 참고.

앱 실행을 위해 URL Schemes 설정도 필요하다.
[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 'kakao{NATIVE_APP_KEY}' 형식으로 등록하면 된다.

예를 들어 네이티브 앱 키가 '123456789'라면 'URL Schemes'에 'kakao123456789'를 입력하는 방식으로!

또한, 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: "네이티브 앱 키 쓰는곳")
    ...
}

(2022.01.22. 추가사항)

기존과 같이 KakaoSDKCommon.initSDK(appKey: "네이티브 앱 키 쓰는곳") 코드를 작성하면, 아래 왼쪽과 같이 에러가 뜨게 될 거다.

이는 오른쪽 사진 카카오 공식문서에 쓰여있는 것과 같이 iOS SDK 2.8.3 버전부터는 SDK 초기화에 사용되는 클래스의 이름이 변경된 까닭 때문인데,
KakaoSDK.initSDK(appKey: "네이티브 앱 키 쓰는 곳")으로 해당 코드를 바꿔주면 에러가 해결된다!!

SceneDelegate에서도 추가해줘야 할 코드가 있다. 아래 코드를 복사해서 넣어주자.

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    if let url = URLContexts.first?.url {
        if (AuthApi.isKakaoTalkLoginUrl(url)) {
            _ = AuthController.handleOpenUrl(url: url)
        }
    }
}

힘들지만, 여기까지 잘 따라왔다면 이제 카카오톡 로그인을 구현하기 위한 사전 준비가 모두 끝나게 된다.

이제 실제로 뷰컨트롤러로 이동해서 로그인 기능을 코드로 구현해보자!

 

3️⃣ 뷰컨에서 기능 구현

---

직접 로그인 코드를 작성할 때는 두 가지 방법이 있다.

첫 번째는 카카오톡으로 직접 연결되는 방식으로,
사용자의 핸드폰에 카카오톡이 이미 설치되어 있을 경우, 따로 계정 입력 없이 동의 버튼 하나만 클릭할 경우 간편하게 연결되는 방식이다.

아래 코드를 살펴보면, 우선 카카오톡이 설치됐는지 여부를 조건문으로 확인한 다음, UserApi에 들어가, 통신을 하는 방식인 것을 확인할 수 있다.

// #1. 카카오톡 설치 여부 확인

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

            //do something
            _ = oauthToken            
        }
    }    
}

 

두 번째는 카카오톡 웹 브라우저로 연결되는 방식이다.

이는 OS 기본 웹 브라우저를 통해 사용자로부터 카카오 계정 정보를 받아 인증을 받은 후,
사용자에게 앱 이용 관련 동의를 요청하는 동의 화면을 출력하는 방식으로 진행되는 방식이다.

// #2. 웹 브라우저로 카카오 로그인

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

            //do something
            _ = oauthToken            
        }
    }

시뮬레이터 상에는 카카오톡이 설치되지 않았으므로, 나는 후자의 방식을 사용해서 로그인을 구현했다.

그럼 이제 로그인 화면을 띄웠으니, 로그인을 하고 난 후 이 유저의 정보를 가져와야 하겠다.
그 부분이 바로 아래 코드다.

사용자 관련 정보를 제공하는 UserApi에서 해당 클라이언트가 제공하는 shared 객체를 통해 me() API를 호출하여 사용자 정보를 가져오게 될 것이다.

UserApi.shared.me() {(user, error) in
    if let error = error {
        print(error)
    }
    else {
        print("me() success.")
        
        //do something
        _ = user
    }
}

전체 코드는 아래와 같다.

import UIKit

import KakaoSDKCommon
import KakaoSDKAuth
import KakaoSDKUser

class ViewController: UIViewController {
    
    // MARK: - View Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setKakaoLoginButton()
    }
    
    // MARK: - @Functions
    
    func setKakaoLoginButton() {
        let kakaoButton = UIButton()
        kakaoButton.setImage(UIImage(named: "kakao_login_large_narrow"), for: .normal)
        kakaoButton.addTarget(self, action: #selector(kakaoSignInButtonPress), for: .touchUpInside)
        view.addSubview(kakaoButton)
        
        // AutoLayout
        kakaoButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            kakaoButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            kakaoButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            kakaoButton.widthAnchor.constraint(equalToConstant: 200),
            kakaoButton.heightAnchor.constraint(equalToConstant: 48)
        ])
    }
    
    // 카카오 로그인 버튼 클릭 시
    @objc
    func kakaoSignInButtonPress() {
        // 카카오톡 설치 여부 확인
        if UserApi.isKakaoTalkLoginAvailable() {
            // 카카오톡 로그인. api 호출 결과를 클로저로 전달.
            loginWithApp()
        } else {
            // 만약, 카카오톡이 깔려있지 않을 경우에는 웹 브라우저로 카카오 로그인함.
            loginWithWeb()
        }
    }
}

// MARK: - Kakao Login Extensions

extension ViewController {
    
    // 카카오톡 앱으로 로그인
    func loginWithApp() {
        UserApi.shared.loginWithKakaoTalk {(_, error) in
            if let error = error {
                print(error)
            } else {
                print("loginWithKakaoTalk() success.")
                
                UserApi.shared.me {(user, error) in
                    if let error = error {
                        print(error)
                    } else {
                        self.presentToMain()
                    }
                }
            }
        }
    }
    
    // 카카오톡 웹으로 로그인
    func loginWithWeb() {
        UserApi.shared.loginWithKakaoAccount {(_, error) in
            if let error = error {
                print(error)
            } else {
                print("loginWithKakaoAccount() success.")
                
                UserApi.shared.me {(user, error) in
                    if let error = error {
                        print(error)
                    } else {
                        self.presentToMain()
                    }
                }
            }
        }
    }
    
    // 화면 전환 함수
    func presentToMain() {
        let nextVC = UserViewController()
        nextVC.modalPresentationStyle = .overFullScreen
        self.present(nextVC, animated: true)
    }
}

추가로, 토큰 존재 확인, 로그아웃, 연결 끊기, 토큰 정보 보기, 사용자 정보 저장하기 같은 다른 코드들도
가장 처음에 첨부했던 카카오 개발자 공식문서에서 제공하고 있으니 필요하다면, 직접 들어가서 확인해보도록 하자!