[iOS] KakaoSocial 로그인 구현

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

Kakao Developers

위 문서 참고해서 카카오톡 소셜 로그인을 구현해보고자 한다!

 

카카오계정을 인증하는 방식에 따라, 카카오 로그인 구현 방법은 카카오톡으로 로그인하는 방법과 카카오계정으로 로그인하는 방법, 이 두 가지로 나뉜다. 여기서는 카카오톡으로 로그인하는 방법을 구현해볼 것이다!

 

1. 플랫폼 등록

등록한 앱에서 API를 호출하기 위해 플랫폼에 대한 정보를 Kakao developers 웹 사이트에 등록해야한다. 

https://developers.kakao.com/

Kakao Developers

위의 웹 사이트에 들어가서 로그인 한 후 내 애플리케이션에서 애플리케이션 추가하기 버튼을 클릭하면, 아래와 같은 화면이 나올것이다.

앱 아이콘, 앱 이름, 사업자 명을 정확하게 입력하는게 좋지만, 앱 아이콘이 없다면 그냥 넘어가도 상관없다. 세 가지 항목 모두 추후에 수정이 가능한 부분이기 때문이다. 해당 부분을 다 기업하면 애플리케이션이 추가될것이다.

추가한 애플리케이션으로 들어가면 아래와 같은 화면이 나타날 것이다. 

 

아니,,,카카오톡으로 하고싶었는데,,,안되길래 걍 내 영어이름으로 해버렸다,,,,허허,,,,

플랫폼 등록을 해주기위해 위의 작업들을 거쳤으므로 아래 보이는 버튼을 클릭해 플랫폼을 설정을 해주면된다! 

해당 버튼을 클릭하면 어떤 플랫폼을 등록할지 설정할 수 있다! 

iOS 플랫폼 등록을 클릭해보자!

iOS 버튼을 클릭하면 아래와 같은 화면이 나오는데, 번들 ID는 필수 값이고, 나머지 항목은 앱스토어에 등록된 후에 입력하면 된다!

번들 ID는 본인의 Xcode의 프로젝트 → General → Bundle Identifier 에서 확인할 수 있다.

앱스토어에 앱이 등록되어 있지 않다면 번들 ID만 입력하고 등록하면 된다! 이렇게 하면 플랫폼 등록은 완료된것이다!

 

2. 카카오 로그인 활성화

플랫폼 등록을 완료한 뒤, 카카오 로그인 활성화를 해주어야 한다. Kakao Developers 웹 사이트에서 활성화 상태를 ON으로 변경해주면 된다!

 

3.  사용자 동의 (동의항목)

플랫폼과 활성화를 완료하면, 카카오 로그인 사용자의 카카오계정 정보나 카카오톡 메시지 보내기와 같은 카카오 서비스 기능을 활용하기 위해 사용자 동의가 필요하다.

(보통 다른 앱을 사용하면서 카카오로그인을 할때, 닉네임, 성별 등 동의하는 항목들이 있던 화면처럼!) 

사용자의 카카오 계정 정보의 필요한 부분이나, 카카오 서비스 기능을 위한 부분을 설정해주면된다! (필요에 맞게 설정해준다.)

동의 목적은 필수로 적어야하는 부분이라 그냥 위에있는 문장을 그대로 적어주었다!

 

4. 필요한 모듈 설치하기

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

• Cocoapods 을 통해 설치하기

Cocoapods을 이용하여 모듈을 설치할 수 있는데, Cocoapods이 설치되어 있다면, 해당 프로젝트 파일에서 pod install을 해주고,
Podfile을 작성해주면 된다!

https://developers.kakao.com/sdk/reference/ios/release/KakaoSDKUser/index.html

Kakao Developers

# 전체 추가
pod 'KakaoSDK'

# or

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

 

뭐 위처럼 설치해도되고,,,아래처럼 그냥 패키지를 설치해주어도 좋다!

https://github.com/kakao/kakao-ios-sdk

GitHub - kakao/kakao-ios-sdk

해당 URL을 검색창에 입력하면 다운로드 받을 수 있다. 아래와 같이 뜨는데 그냥 KakoSDK를 다운로드 받았다! (전체추가 해버리기~)

다운로드 완료된것 확인!

 

5. 등록하기

• 앱 실행 허용 목록 설정하기

버전이 iOS 9.0 이상이라면 iOS SDK를 통해 카카오톡, 카카오스토리 등 애플리케이션을 실행시키는 기능을 이용하기 위해 info.plist 파일에 앱 실행 허용 목록을 설정해야 한다.

info.plist 파일에서 key에 Queried URL Schemes를 추가하고, 해당 키의 item으로 kakaokompassauth, kakaolink를 추가해주면된다!

 

•  URL Schemes 설정하기

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

 

본인의 프로젝트 파일에서 Target → Info → URL Types → URL Schemes 항목에 네이티브 앱 키를 kakao${NATIVE_APP_KEY} 형식으로 등록해준다.

+ 네이티브 앱 키는 Kakao Developers → 내 애플리케이션 → 요약정보에서 확인할 수 있다.

ex) 네이티브 앱 키가 "123456789"라면 "kakao123456789"를 입력해주면된다.

 

6.  초기화

iOS 앱에서 iOS SDK를 사용하려면 iOS SDK 파일을 아래와 같이 import 해야한다. 또한 네이티브 앱 키를 사용해 iOS SDK를 초기화하는 과정이 필요하다.

AppDelegate.swift에 Kakao SDK를 초기화하는 코드를 추가.

AppDelegate.swift

import KakaoSDKCommon

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

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

}

 

7.  카카오톡으로 로그인

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

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

 

- Deployment target iOS 13보다 전
카카오톡으로 로그인은 서비스 앱에서 카카오톡으로 이동한 후, 사용자가 [동의하고 계속하기] 버튼 또는 로그인 취소 버튼을 누르면 다시 카카오톡에서 서비스 앱으로 이동하는 과정을 거친다. 카카오톡에서 서비스 앱으로 돌아왔을 때 카카오 로그인 처리를 정상적으로 완료하기 위해 AppDelegate.swift 파일에 handleOpenUrl()을 추가한다.

 

AppDelegate.swift

import KakaoSDKAuth
...

class AppDelegate: UIResponder, UIApplicationDelegate {
    ...
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        if (AuthApi.isKakaoTalkLoginUrl(url)) {
            return AuthController.handleOpenUrl(url: url)
        }

        return false
    }
    ...
}

 

- Deployment target이 iOS 13 이상
AppDelegate.swift 파일 대신 SceneDelegate.swift 파일에 handleOpenUrl()을 추가한다.

 

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

 

• 로그인 구현

이제는 설정은 완료하고 로그인을 구현할 차례!

UserApi의 loginWithKakaoTalk()를 호출한다. (먼저 isKakaoTalkLoginAvailable()로 카카오톡 설치 여부를 확인을 하는것을 권장)

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

            //do something
            _ = oauthToken            
        }
    }    
}

이제 위 코드를 버튼에 적용해서 로그인 버튼을 눌렀을때 어떻게 나오는지 확인해본다.

- 그러려면 카카오 로그인 버튼 이미지가 있어야하는데, 아래 웹 사이트에 잘 다운받을 수 있다.

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

Kakao Developers

 

먼저 버튼을 하나 달아주고 액션을 아울렛으로 선언해준다! 그 후 버튼을 클릭했을 때 아래의 코드를 넣어주었다.

@IBAction func kakaoLoginButtonTouchUpInside(_ sender: UIButton) {
        // 카카오톡 설치 여부 확인
        if (UserApi.isKakaoTalkLoginAvailable()) {
            UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
                if let error = error {
                    print(error)
                }
                else {
                    print("loginWithKakaoTalk() success.")

                    //do something
                    _ = oauthToken
                }
            }
        }
    }

+ 상단에 KakaoSDKUser도 import 시켜주어야한다.

import KakaoSDKUser

 

오늘도 어김없이 오류가 뜬다~!~! ^^~!~!

 

같은 에러네여,,,,

https://devtalk.kakao.com/t/ios-15/119559

같은 앱인데 iOS 15 에서만 에러가 납니다

 

LSApplicationQueriesSchemes가 문제라는데,,,

바꾸니까 오류가 또 생긴다,,,ㅠㅡㅠ

 

다시 원상복귀 시켜두고,,,,뭐가문제일까,,,,

 

https://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] 카카오톡 소셜 로그인 연동

 

시뮬레이터에 카카오톡이 안깔려있어서 뜨는 에러이니 시뮬레이터 말고 핸드폰으로 실행하면된다고 하는데, 원래는 카카오톡으로 로그인하는 방법을 하려고했지만,,,그냥 카카오톡이 없을때는 웹으로 연결하는 방식으로 동아리 오빠의 도움을 받아 코드를 살짝 수정해보았다,,,!

 

//
//  ViewController.swift
//  KakaoSocialLogin
//
//  Created by 김민경 on 2022/11/30.
//

import UIKit
import KakaoSDKUser

class ViewController: UIViewController {
    
    @IBOutlet weak var kakaoLoginButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        kakaoLoginButton.setImage(UIImage(named: "KakaoImage"), for: .normal)
        // Do any additional setup after loading the view.
    }
    
    
    @IBAction func kakaoLoginButtonTouchUpInside(_ sender: UIButton) {
        
        // isKakaoTalkLoginAvailable() : 카톡 설치 되어있으면 true
        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)
                    print("oginWithKakaoAccount() fail.")
                } else {
                    print("oginWithKakaoAccount() success.")
                    
                    //do something
                    _ = oauthToken
                }
            }
        }
    }
}

 

코드를 바꾸자마자 다다닥! 바로 연결되는것을 볼 수 있다!

 

• 참고

https://velog.io/@mandos1995/iOS-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0