Ios 카카오 간편 로그인 | 카카오계정으로 로그인하기 (카카오톡 로그인 Api 사용하기) 285 개의 가장 정확한 답변

당신은 주제를 찾고 있습니까 “ios 카카오 간편 로그인 – 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기)“? 다음 카테고리의 웹사이트 https://you.tfvp.org 에서 귀하의 모든 질문에 답변해 드립니다: https://you.tfvp.org/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 개발자의품격 이(가) 작성한 기사에는 조회수 35,348회 및 좋아요 411개 개의 좋아요가 있습니다.

ios 카카오 간편 로그인 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

여기에서 동영상 보기

d여기에서 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기) – ios 카카오 간편 로그인 주제에 대한 세부정보를 참조하세요

[개발자의 품격] 품격있는 개발자 되기!

ios 카카오 간편 로그인 주제에 대한 자세한 내용은 여기를 참조하세요.

[iOS] 카카오톡 간편로그인 연동 – naljin

웹 설정 · 0. Kakao Developers 접속 · 1. 앱 만들기 · 2. 플랫폼 등록 · 3. 카카오 로그인 설정 · 4. 동의 항목 설정 · 5. (선택) Redirect URI 등록 · 6. (선택) 팀 멤버 등록.

+ 더 읽기

Source: sujinnaljin.medium.com

Date Published: 3/22/2021

iOS | Kakao Developers 문서

이 문서는 Kakao SDK for iOS(이하 iOS SDK)를 사용한 카카오 로그인 구현 방법을 안내 … 사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인 가능.

+ 여기에 자세히 보기

Source: developers.kakao.com

Date Published: 10/17/2022

[iOS] 소셜 로그인을 구현해보자! 1탄 – 카카오톡 로그인

오늘은 그 첫 번째로, 카카오톡 간편 로그인에 대해 다뤄보겠다. 사실 카카오톡 소셜 로그인 기능은 카카오 개발자 페이지에 정말 자세하게 잘 정리되어 …

+ 여기에 더 보기

Source: mini-min-dev.tistory.com

Date Published: 11/28/2021

[Swift] 카카오 소셜 로그인 – 둥로그

사용자의 카카오계정을 인증하는 방식에 따라, iOS SDK를 사용한 … 사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인할 수 있다!

+ 여기에 자세히 보기

Source: seungchan.tistory.com

Date Published: 3/9/2021

[iOS]카카오 로그인(소셜) – 서기의 개발집

사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태라면 ID 및 비밀번호 입력 과정을 생략하고 간편하게 로그인할 수 …

+ 여기에 보기

Source: jiseok-zip.tistory.com

Date Published: 4/14/2021

iOS 소셜 로그인 구현 – 카카오톡 로그인 연동 – CORE DATA

+) 이메일 필수 동의를 위해서는 비즈니스 앱으로 전환을 해야 합니다! 사업자 번호 없어도 간단하게 약관 동의만 하면 개인 개발자로 비즈 앱 전환 할 …

+ 여기에 표시

Source: doh-an.tistory.com

Date Published: 10/11/2021

iOS) Kakao Login 구현 – hyun9iOS

iOS 9.0 이상에서 iOS SDK를 통해 카카오톡이나 카카오스토리, … 사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인할 수 있어 …

+ 자세한 내용은 여기를 클릭하십시오

Source: gyuios.tistory.com

Date Published: 2/1/2022

[iOS] 카카오 간편로그인 – sweetdev

[iOS] 카카오 간편로그인. SweetDev 2021. 2. 9. 12:17. developers.kakao.com/docs/latest/ko/kakaologin/ios. * 간편 로그인 버튼은 크기, 영문/한글 선택해서 psd랑 …

+ 여기에 더 보기

Source: sweetdev.tistory.com

Date Published: 12/21/2021

[iOS – Login] 카카오로 로그인

(를 10자리로 표현하는 특징). 1. OAuth 2.0. – 카카오 로그인은 두 단계로 진행 : 로그인 인증 코드 받기, 사용자 토큰 발급. – iOS에서 Redirect …

+ 여기에 표시

Source: ios-development.tistory.com

Date Published: 9/9/2021

[Swift] 카카오 로그인 v2 사용하기!

iOS 개발자 취업 준비생 – FastCampus 9기 수료 – 2nd Pathhack 쉬운 해커톤 GDG Busan 트랙상 수상.

+ 자세한 내용은 여기를 클릭하십시오

Source: developer-fury.tistory.com

Date Published: 8/10/2021

주제와 관련된 이미지 ios 카카오 간편 로그인

주제와 관련된 더 많은 사진을 참조하십시오 카카오계정으로 로그인하기 (카카오톡 로그인 API 사용하기). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

주제에 대한 기사 평가 ios 카카오 간편 로그인

Author: 개발자의품격
Views: 조회수 35,348회
Likes: 좋아요 411개
Date Published: 2021. 1. 11.
Video Url link: https://www.youtube.com/watch?v=Re2R2rid1K4

Kakao Developers iOS

iOS

이 문서는 Kakao SDK for iOS(이하 iOS SDK)를 사용한 카카오 로그인 구현 방법을 안내합니다.

카카오 로그인 구현에 필요한 로그인 버튼 이미지는 [도구] > [리소스 다운로드]에서 제공합니다. 해당 로그인 버튼은 디자인 가이드를 참고하여 서비스 UI에 적합한 크기로 수정하여 사용할 수 있습니다.

리소스 다운로드outlink 디자인 가이드

시작하기 전에

구현 방식 선택

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

구현 방법 메서드 설명 카카오톡으로 로그인(권장) loginWithKakaoTalk() 카카오톡에 연결된 카카오계정 및 인증 정보를 사용

사용자가 카카오계정 정보를 직접 입력하지 않아도 간편하게 로그인 가능 카카오계정으로 로그인 loginWithKakaoAccount() 기본 웹 브라우저(Default Browser)를 통해 카카오계정 정보를 입력하고 로그인

사용자가 카카오계정 정보를 직접 입력하는 단계를 거침

사용자가 여러 개의 카카오계정을 사용하는 서비스, 카카오톡 미설치 또는 미지원 디바이스에서 사용

각 인증 방법의 특징과 서비스의 사용자 로그인 동선을 고려하여 어느 인증 방법이 적합한지 판단합니다. 두 가지 인증 방법을 함께 사용할 수도 있습니다. 인증 방법에 따라 필요한 설정이나 예외 처리에 차이가 있으므로, 인증 방법별 개발 가이드를 참고합니다.

필요한 모듈 설치하기

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

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

Swift RxSwift import KakaoSDKCommon import KakaoSDKAuth import KakaoSDKUser import KakaoSDKCommon import RxKakaoSDKCommon import KakaoSDKAuth import RxKakaoSDKAuth import KakaoSDKUser import RxKakaoSDKUser

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

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

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

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

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

Swift RxSwift 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 } … } import RxKakaoSDKAuth import KakaoSDKAuth … class AppDelegate: UIResponder, UIApplicationDelegate { … func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { if (AuthApi.isKakaoTalkLoginUrl(url)) { return AuthController.rx.handleOpenUrl(url: url) } return false } … }

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

SwiftUI App Life Cycle 사용 시에는 SDK 초기화와 마찬가지로 ${PROJECT_NAME}App 클래스 내부에 onOpenURL() 을 사용하여 handleOpenUrl() 을 추가합니다.

아래 예제를 참고합니다.

Swift RxSwift SwiftUI App import KakaoSDKAuth … class SceneDelegate: UIResponder, UIWindowSceneDelegate { … func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { if let url = URLContexts.first?.url { if (AuthApi.isKakaoTalkLoginUrl(url)) { _ = AuthController.handleOpenUrl(url: url) } } } … } import RxKakaoSDKAuth import KakaoSDKAuth … class SceneDelegate: UIResponder, UIWindowSceneDelegate { … func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { if let url = URLContexts.first?.url { if (AuthApi.isKakaoTalkLoginUrl(url)) { _ = AuthController.rx.handleOpenUrl(url: url) } } } … } import SwiftUI import KakaoSDKCommon import KakaoSDKAuth … @main struct SwiftUI_testApp: App { … init() { // Kakao SDK 초기화 KakaoSDK.initSDK(appKey: “NATIVE_APP_KEY”) } var body: some Scene { WindowGroup { // onOpenURL()을 사용해 커스텀 URL 스킴 처리 ContentView().onOpenURL(perform: { url in if (AuthApi.isKakaoTalkLoginUrl(url)) { AuthController.handleOpenUrl(url: url) } }) } } … }

카카오톡으로 로그인

기본 정보

사전 설정 후, UserApi 의 loginWithKakaoTalk() 를 호출합니다. 먼저 isKakaoTalkLoginAvailable() 로 카카오톡 설치 여부를 확인할 것을 권장합니다.

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

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

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

OpenID Connect를 사용하는 앱인 경우, ID 토큰을 함께 발급받습니다.

Swift RxSwift // 카카오톡 설치 여부 확인 if (UserApi.isKakaoTalkLoginAvailable()) { UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in if let error = error { print(error) } else { print(“loginWithKakaoTalk() success.”) //do something _ = oauthToken } } } // Class member property let disposeBag = DisposeBag() // 카카오톡 설치 여부 확인 if (UserApi.isKakaoTalkLoginAvailable()) { UserApi.shared.rx.loginWithKakaoTalk() .subscribe(onNext:{ (oauthToken) in print(“loginWithKakaoTalk() success.”) //do something _ = oauthToken }, onError: {error in print(error) }) .disposed(by: disposeBag) }

참고: 보안을 위한 파라미터

카카오 로그인은 OAuth 2.0 및 OpenID Connect 표준에 따라 보안을 위한 파라미터인 state , nonce 파라미터를 제공합니다. 사용자가 안전하게 카카오 로그인을 완료할 수 있도록 해당 파라미터 사용을 권장합니다.

state 는 Cross-Site Request Forgery(CSRF) 공격으로부터 카카오 로그인 요청을 보호하기 위해 사용합니다. state 는 카카오 로그인이 시작될 때부터 완료될 때까지 고유하고 동일한 값을 유지해야 합니다.

nonce 는 OpenID Connect 사용 시 지원되는 파라미터로, ID 토큰 재생 공격을 방지하기 위해 사용합니다. 카카오 로그인 요청 시 전달된 nonce 값이 ID 토큰에 포함되며, ID 토큰 유효성 검증을 통해 요청 시 전달된 값과 ID 토큰에 포함된 값이 일치하는지 검증해야 합니다.

카카오계정으로 로그인

기본 정보

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

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

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

OpenID Connect를 사용하는 앱인 경우, ID 토큰을 함께 발급받습니다.

Swift RxSwift UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in if let error = error { print(error) } else { print(“loginWithKakaoAccount() success.”) //do something _ = oauthToken } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.loginWithKakaoAccount() .subscribe(onNext:{ (oauthToken) in print(“loginWithKakaoAccount() success.”) //do something _ = oauthToken }, onError: {error in print(error) }) .disposed(by: disposeBag)

참고: 보안을 위한 파라미터

카카오 로그인은 OAuth 2.0 및 OpenID Connect 표준에 따라 보안을 위한 파라미터인 state , nonce 파라미터를 제공합니다. 사용자가 안전하게 카카오 로그인을 완료할 수 있도록 해당 파라미터 사용을 권장합니다.

state 는 Cross-Site Request Forgery(CSRF) 공격으로부터 카카오 로그인 요청을 보호하기 위해 사용합니다. state 는 카카오 로그인이 시작될 때부터 완료될 때까지 고유하고 동일한 값을 유지해야 합니다.

nonce 는 OpenID Connect 사용 시 지원되는 파라미터로, ID 토큰 재생 공격을 방지하기 위해 사용합니다. 카카오 로그인 요청 시 전달된 nonce 값이 ID 토큰에 포함되며, ID 토큰 유효성 검증을 통해 요청 시 전달된 값과 ID 토큰에 포함된 값이 일치하는지 검증해야 합니다.

참고: 기존 로그인 여부와 상관없이 로그인 요청

보안을 위해 기존의 로그인 여부와 상관없이 사용자에게 재인증을 요청하려면, prompts 를 .Login 으로 지정하여 전달합니다. 사용자가 해당 기기의 동일한 웹 브라우저에서 이미 카카오계정으로 로그인한 상태임에도 로그인 화면을 출력합니다.

Swift RxSwift UserApi.shared.loginWithKakaoAccount(prompts:[.Login]) {(oauthToken, error) in if let error = error { print(error) } else { print(“loginWithKakaoAccount() success.”) //do something _ = oauthToken } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.loginWithKakaoAccount(prompts: [.Login]) .subscribe(onNext:{ (oauthToken) in print(“loginWithKakaoAccount() success.”) //do something _ = oauthToken }, onError: {error in print(error) }) .disposed(by: disposeBag)

토큰 존재 여부 확인하기

기본 정보

앱 실행 시 사용자가 앞서 로그인을 통해 발급 받은 토큰이 있는지 확인하려면 AuthApi 의 hasToken() 을 호출합니다. 호출 결과는 기존에 발급 받은 액세스 토큰 또는 리프레시 토큰의 존재 여부를 Boolean 값으로 알려줍니다. 단, hasToken() 의 결과가 true 라도 현재 사용자가 로그인 상태임을 보장하지 않습니다.

Swift RxSwift if (AuthApi.hasToken()) { UserApi.shared.accessTokenInfo { (_, error) in if let error = error { if let sdkError = error as? SdkError, sdkError.isInvalidTokenError() == true { //로그인 필요 } else { //기타 에러 } } else { //토큰 유효성 체크 성공(필요 시 토큰 갱신됨) } } } else { //로그인 필요 } // Class member property let disposeBag = DisposeBag() if (AuthApi.hasToken()) { UserApi.shared.rx.accessTokenInfo() .subscribe(onSuccess:{ (_) in //토큰 유효성 체크 성공(필요 시 토큰 갱신됨) }, onFailure: {error in if let sdkError = error as? SdkError, sdkError.isInvalidTokenError() == true { //로그인 필요 } else { //기타 에러 } }) .disposed(by: disposeBag) } else { //로그인 필요 }

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

요청 성공, 액세스 토큰 정보 반환 액세스 토큰이 유효한 상태이므로 사용자 로그인 불필요 해당 액세스 토큰으로 카카오 API 호출 가능

에러 발생 액세스 토큰 및 리프레시 토큰이 유효하지 않아 사용자 로그인 필요 각 에러에 맞는 처리 필요, 레퍼런스 참고

토큰 정보 보기

기본 정보

UserApi 의 accessTokenInfo() API로 토큰 정보를 조회할 수 있습니다. 다음은 현재 캐시에 저장하여 사용 중인 사용자 액세스 토큰 정보를 출력하는 예제입니다.

Swift RxSwift // 사용자 액세스 토큰 정보 조회 UserApi.shared.accessTokenInfo {(accessTokenInfo, error) in if let error = error { print(error) } else { print(“accessTokenInfo() success.”) //do something _ = accessTokenInfo } } // Class member property let disposeBag = DisposeBag() // 사용자 액세스 토큰 정보 조회 UserApi.shared.rx.accessTokenInfo() .subscribe(onSuccess:{ (accessTokenInfo) in print(“accessTokenInfo() success.”) //do something _ = accessTokenInfo }, onFailure: {error in print(error) }) .disposed(by: disposeBag)

로그아웃

기본 정보

사용자 액세스 토큰과 리프레시 토큰을 모두 만료시켜, 더 이상 해당 사용자 정보로 카카오 API를 호출할 수 없도록 합니다. UserApi 의 logout() 을 호출합니다.

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

다음은 로그아웃 요청 예제입니다.

Swift RxSwift UserApi.shared.logout {(error) in if let error = error { print(error) } else { print(“logout() success.”) } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.logout() .subscribe(onCompleted:{ print(“logout() success.”) }, onError: {error in print(error) }) .disposed(by: disposeBag)

연결 끊기

기본 정보

카카오 플랫폼 안에서 앱과 사용자 카카오계정의 연결 상태를 해제합니다. UserApi 의 unlink() 를 호출합니다.

연결이 끊어지면 기존의 토큰은 더 이상 사용할 수 없으므로, 연결 끊기 요청 성공 시 로그아웃 처리가 함께 이뤄져 토큰이 삭제됩니다.

다음은 연결 끊기 요청 예제입니다.

Swift RxSwift UserApi.shared.unlink {(error) in if let error = error { print(error) } else { print(“unlink() success.”) } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.unlink() .subscribe(onCompleted:{ print(“unlink() success.”) }, onError: {error in print(error) }) .disposed(by: disposeBag)

연결 끊기를 직접 호출한 경우가 아닌, 사용자가 서비스와의 연결을 직접 끊었을 때 알림을 받으려면 연결 끊기 알림 받기 기능을 사용합니다. 자세한 구현 방법 및 콜백 요청 정보는 연결 끊기 알림을 참고합니다.

사용자 정보 가져오기

기본 정보

현재 로그인한 사용자의 정보를 불러옵니다. UserApi 의 me() 를 호출합니다.

다음은 사용자 정보 요청 예제입니다.

Swift RxSwift UserApi.shared.me() {(user, error) in if let error = error { print(error) } else { print(“me() success.”) //do something _ = user } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.me() .subscribe (onSuccess:{ user in print(“me() success.”) //do something _ = user }, onFailure: {error in print(error) }) .disposed(by: disposeBag)

사용자 정보 응답은 KakaoSDKUser 에 정의되어 있는 User 클래스 객체로 전달됩니다. 예를 들어 회원번호 값을 조회하려면 user.id , 카카오계정 프로필 정보들은 user.kakaoAccount.profile , 이메일은 user.kakaoAccount.email 과 같이 접근할 수 있습니다.

하지만 사용자 정보 중 동의 항목으로 설정되지 않았거나, 사용자가 정보 제공에 동의하지 않았거나, 사용자가 해당 정보를 카카오에 제공한 적 없는 경우에는 값이 존재하지 않을 수 있으므로 예외 처리에 유의해야 합니다.

사용자 정보 종류는 사용자 정보를, 각 항목의 자료형 등 상세 정보는 레퍼런스를 참고합니다.

사용자 정보 저장하기

기본 정보

사용자 정보 저장하기 기능은 사용자 프로퍼티인 properties 하위 정보의 값을 저장합니다. 키 값은 [내 애플리케이션] > [사용자 프로퍼티]에 정의한 값을 사용해야 합니다.

UserApi 의 updateProfile() 을 호출합니다. 업데이트할 사용자 프로퍼티의 키와 값 목록은 배열로 전달해야 합니다. 다음 예제와 같이 요청합니다.

Swift RxSwift UserApi.shared.updateProfile(properties: [“${CUSTOM_PROPERTY_KEY}”:”${CUSTOM_PROPERTY_VALUE}”]) {(error) in if let error = error { print(error) } else { print(“updateProfile() success.”) } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.updateProfile(properties:[“${CUSTOM_PROPERTY_KEY}”:”${CUSTOM_PROPERTY_VALUE}”]) .subscribe(onCompleted:{ print(“updateProfile() success.”) }, onError: {error in print(error) }) .disposed(by: disposeBag)

사용자 정보 저장 시 발생할 수 있는 에러와 원인에 대해서는 REST API 레퍼런스의 응답 코드를 참고합니다.

추가 항목 동의 받기

기본 정보

추가 항목 동의 받기는 사용자가 첫 카카오 로그인 시 동의 화면에서 동의하지 않았지만, 서비스 이용 중 추가로 동의해야 하는 항목을 동의 요청하는 기능입니다. 추가 항목 동의 받기의 상세 설명을 확인한 후 사용해야 합니다.

직접 사용자에게 추가 동의를 요청하려면 UserApi 의 loginWithKakaoTalk() 또는 loginWithKakaoAccount() 를 호출합니다. 요청 시 추가 동의받을 항목의 키를 scopes 파라미터에 문자열 배열로 전달해야 합니다.

주의: OpenID Connect OpenID Connect를 사용하는 앱의 경우, 추가 항목 동의 받기 요청 시 동의 항목 키를 전달하는 scope 파라미터 값에 openid를 반드시 포함해야 합니다. 해당 파라미터 값을 포함하지 않을 경우, ID 토큰이 재발급되지 않습니다. (참고: scope 파라미터)

요청 성공 시 iOS SDK는 사용자에게 추가 동의받을 항목의 동의를 요청하는 화면을 출력합니다. 사용자가 해당 항목에 동의하면 추가 동의가 성공 및 완료되고, 사용자가 취소하면 추가 동의 요청이 실패합니다. 이 기능은 카카오 로그인의 변형으로, 추가 동의 완료 시 토큰을 다시 발급받습니다.

다음은 me() API를 통해 추가 동의받을 항목을 확인한 후, 사용자에게 추가 동의를 요청하는 예제입니다. 예제에서는 모든 사용자 정보의 동의 여부를 확인하지만, 실제 구현 시에는 필요한 사용자 정보에 한해 구현해야 합니다.

Swift RxSwift UserApi.shared.me() { (user, error) in if let error = error { print(error) } else { if let user = user { var scopes = [String]() if (user.kakaoAccount?.profileNeedsAgreement == true) { scopes.append(“profile”) } if (user.kakaoAccount?.emailNeedsAgreement == true) { scopes.append(“account_email”) } if (user.kakaoAccount?.birthdayNeedsAgreement == true) { scopes.append(“birthday”) } if (user.kakaoAccount?.birthyearNeedsAgreement == true) { scopes.append(“birthyear”) } if (user.kakaoAccount?.genderNeedsAgreement == true) { scopes.append(“gender”) } if (user.kakaoAccount?.phoneNumberNeedsAgreement == true) { scopes.append(“phone_number”) } if (user.kakaoAccount?.ageRangeNeedsAgreement == true) { scopes.append(“age_range”) } if (user.kakaoAccount?.ciNeedsAgreement == true) { scopes.append(“account_ci”) } if scopes.count > 0 { print(“사용자에게 추가 동의를 받아야 합니다.”) // OpenID Connect 사용 시 // scope 목록에 “openid” 문자열을 추가하고 요청해야 함 // 해당 문자열을 포함하지 않은 경우, ID 토큰이 재발급되지 않음 // scopes.append(“openid”) //scope 목록을 전달하여 카카오 로그인 요청 UserApi.shared.loginWithKakaoAccount(scopes: scopes) { (_, error) in if let error = error { print(error) } else { UserApi.shared.me() { (user, error) in if let error = error { print(error) } else { print(“me() success.”) //do something _ = user } } } } } else { print(“사용자의 추가 동의가 필요하지 않습니다.”) } } } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.me() .map({ (user) -> User in //필요한 scope을 아래의 예제코드를 참고해서 추가한다. //아래 예제는 모든 스콥을 나열한것. var scopes = [String]() if (user.kakaoAccount?.profileNeedsAgreement == true) { scopes.append(“profile”) } if (user.kakaoAccount?.emailNeedsAgreement == true) { scopes.append(“account_email”) } if (user.kakaoAccount?.birthdayNeedsAgreement == true) { scopes.append(“birthday”) } if (user.kakaoAccount?.birthyearNeedsAgreement == true) { scopes.append(“birthyear”) } if (user.kakaoAccount?.genderNeedsAgreement == true) { scopes.append(“gender”) } if (user.kakaoAccount?.phoneNumberNeedsAgreement == true) { scopes.append(“phone_number”) } if (user.kakaoAccount?.ageRangeNeedsAgreement == true) { scopes.append(“age_range”) } if (user.kakaoAccount?.ciNeedsAgreement == true) { scopes.append(“account_ci”) } if (scopes.count > 0) { print(“사용자에게 추가 동의를 받아야 합니다.”) // OpenID Connect 사용 시 // scope 목록에 “openid” 문자열을 추가하고 요청해야 함 // 해당 문자열을 포함하지 않은 경우, ID 토큰이 재발급되지 않음 // scopes.append(“openid”) // scope 목록을 전달하여 SdkError 처리 throw SdkError(scopes:scopes) } else { print(“사용자의 추가 동의가 필요하지 않습니다.”) return user } }) .retry(when: Auth.shared.rx.incrementalAuthorizationRequired()) .subscribe(onSuccess:{ ( user ) in print(“me() success.”) //do something _ = user }, onFailure: {error in print(error) }) .disposed(by: disposeBag)

참고: ReactiveX iOS SDK의 추가 동의 요청

ReactiveX iOS SDK 사용 중 사용자의 추가 동의가 필요한 경우, 위 예제와 같이 SdkError 로 해당 동의 항목 정보를 전달합니다. 이후 retryWhen 오퍼레이터에 의해 incrementalAuthorizationRequired() 메서드가 호출되며, 전달된 동의 항목에 대해 사용자에게 추가 동의를 받을 수 있습니다.

동의 내역 확인하기

기본 정보

사용자가 동의한 동의 항목의 상세 정보 목록을 조회합니다. [내 애플리케이션] > [카카오 로그인] > [동의 항목]에 설정된 동의 항목의 목록과 사용자가 동의한 동의 항목의 상세 정보를 반환합니다. 사용자가 기존에 동의했던 동의 항목이라면 현재 앱에 사용하도록 설정돼 있지 않아도 응답에 포함됩니다.

UserApi 의 scopes() API를 호출합니다. 요청 성공 시 응답은 scopeInfo 객체로 각 동의 항목의 상세 정보와 사용자 동의 여부를 포함합니다. 응답 상세 정보는 REST API 가이드 및 레퍼런스를 참고합니다.

Swift RxSwift UserApi.shared.scopes() { (scopeInfo, error) in if let error = error { self?.errorHandler(error: error) } else { self?.success(scopeInfo) //do something _ = scopeInfo } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.scopes() .subscribe(onSuccess:{ (scopeInfo) in self.success(scopeInfo) //do something _ = scopeInfo }, onFailure: {error in self.errorHandler(error: error) }) .disposed(by: self.disposeBag)

특정 동의 항목의 동의 내역만 확인하려면 scopes 파라미터로 동의 항목의 ID를 지정하여 요청할 수 있으며, [내 애플리케이션] > [카카오 로그인] > [동의 항목]의 ID를 참고합니다. 동의 항목 ID를 지정한 경우, 성공 응답은 지정된 동의 항목의 정보만 포함합니다.

Swift RxSwift UserApi.shared.scopes(scopes: [“account_email”,”gender”]) { (scopeInfo, error) in if let error = error { self?.errorHandler(error: error) } else { self?.success(scopeInfo) //do something _ = scopeInfo } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.scopes(scopes: [“account_email”,”gender”]) .subscribe(onSuccess:{ (scopeInfo) in self.success(scopeInfo) //do something _ = scopeInfo }, onError: {error in self.errorHandler(error: error) }) .disposed(by: self.disposeBag)

동의 철회하기

기본 정보

사용자가 동의한 항목에 대해 동의를 철회합니다. 동의 내역 확인하기 API를 통해 조회한 동의 항목 정보 중 동의 철회 가능 여부( revocable ) 값이 true 인 동의 항목만 철회 가능합니다. 동의 철회가 불가능한 동의 항목을 대상으로 요청한 경우 에러 응답을 받습니다.

UserApi 의 revokeScopes() 를 호출합니다. 철회할 동의 항목의 ID는 scopes 값으로 지정하며, [내 애플리케이션] > [카카오 로그인] > [동의 항목]의 ID를 참고합니다.

요청 성공 시 응답은 scopeInfo 객체로, 동의 철회를 반영한 후의 각 동의 항목 상세 정보 및 사용자 동의 내역을 포함합니다. 응답 상세 정보는 REST API 가이드 및 레퍼런스를 참고합니다.

Swift RxSwift UserApi.shared.revokeScopes(scopes: [“account_email”,”gender”]) { (scopeInfo, error) in if let error = error { self?.errorHandler(error: error) } else { self?.success(scopeInfo) //do something _ = scopeInfo } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.revokeScopes(scopes: [“account_email”,”gender”]) .subscribe(onSuccess:{ (scopeInfo) in self.success(scopeInfo) //do something _ = scopeInfo }, onFailure: {error in self.errorHandler(error: error) }) .disposed(by: self.disposeBag)

고급: 연결하기

기본 정보

주의: 자동 연결 사용 여부 확인 연결하기는 자동 연결을 사용하지 않는 앱에서만 사용하는 API입니다. 사용 전 REST API 개발 가이드를 통해 사용 여부와 주의사항을 확인해야 합니다.

연결하기는 자동 연결을 [사용 안함]으로 설정한 앱에서 앱과 사용자를 수동으로 연결하는 기능입니다. 현재 로그인한 사용자가 연결하기를 통해 앱과 연결되어야 하는지 확인하려면 사용자 정보 가져오기 응답의 hasSignedUp 값을 확인하여 다음과 같이 처리합니다.

true : 이미 사용자와 앱이 연결되어 있으므로 다시 연결하기를 호출하지 않습니다.

: 이미 사용자와 앱이 연결되어 있으므로 다시 연결하기를 호출하지 않습니다. false : 사용자와 앱이 연결되지 않은 상태이므로 signup() 을 호출해 사용자와 앱을 연결해야 합니다.

: 사용자와 앱이 연결되지 않은 상태이므로 을 호출해 사용자와 앱을 연결해야 합니다. nil : 자동 연결을 사용 중인 앱이므로 연결하기가 불필요합니다.

사용자의 hasSignedUp 값이 false 이고, 서비스에서의 가입 준비가 끝나 앱과 연결하려면 signup() 을 호출합니다. properties 파라미터로 사용자 프로퍼티 저장을 함께 요청할 수 있습니다. properties 파라미터의 구성 방법은 사용자 정보 저장하기를 참고합니다.

Swift RxSwift UserApi.shared.signup { (userId, error) in if let error = error { print(error) } else { print(“signup() success.”) } } // Class member property let disposeBag = DisposeBag() UserApi.shared.rx.signup() .subscribe (onSuccess:{ (userId) in print(“signup() success.”) }, onFailure: {error in print(error) }) .disposed(by: disposeBag)

요청 성공 시 별도의 사용자 정보가 제공되지 않으므로, 사용자 정보 가져오기 요청을 통해 다시 한 번 hasSignedUp 값을 확인해야 합니다.

Legacy

카카오 로그인의 Legacy Kakao SDK for iOS(이하 Legacy iOS SDK) 개발 가이드는 아래 바로가기에서 확인할 수 있습니다. 추후 Legacy iOS SDK에 대한 지원이 중단될 수 있으므로, 가급적 빠른 시일 내에 최신 버전 iOS SDK로 변경할 것을 권장합니다.

Legacy iOS SDK 카카오 로그인 개발 가이드 Legacy iOS SDK 사용자 관리 개발 가이드

더보기

[iOS] 소셜 로그인을 구현해보자! 1탄 – 카카오톡 로그인

오늘은 최신 어플이라면, 빠지지 않고 가장 기본적으로 들어가는 기능

“소셜 로그인”에 대해 시리즈로 글을 다루어보려 한다.

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

사실 카카오톡 소셜 로그인 기능은 카카오 개발자 페이지에 정말 자세하게 잘 정리되어 있긴 하다. 참고하자.

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

카카오 소셜 로그인을 사용하려면, 카카오 개발자 웹사이트에 애플리케이션을 등록해줘야만 한다.

앱 아이콘, 앱 이름, 사업자명을 정확하게 작성하고 저장을 눌러 애플리케이션을 추가해주자.

이때 추가한 아이콘, 이름, 사업자명은

사용자에게 표출될 때 아래 오른쪽 사진과 같은 방식으로 사용된다.

애플리케이션을 등록하면,

아래와 같이 네이티브 앱 키, REST API 키, JavaScript 키, Admin 키가 발급된다.
[요약정보]에 있는 이 키들은 카카오 API를 활용할 때 전반적으로 사용되는 애들이다. 기억해두자.

우리는 카카오 로그인을 구현해줄 것이므로
[제품 설정] -> [카카오 로그인]으로 옮겨가 카카오 로그인의 활성화를 눌러준다.
[제품 설정] -> [동의항목]에는 원하는 개인 정보의 동의 항목을 설정할 수 있다.

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

카카오 API와 비즈니스 솔루션 등 카카오 플랫폼을 이용하려면,

카카오 플랫폼을 등록해줘야 한다.

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

iOS 플랫폼에는 번들 ID, 앱스토어 ID, 마켓 URL을 등록할 수 있는데

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

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

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

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

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

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

대신, 이때는 아래 카카오 개발자 공식문서에서 표기하고 있는 디자인 가이드를 준수해서 버튼을 만들어야 한다는 것 잊지 말자.

(대충 마구잡이로 어디서 카카오 모양만 따와, 노란 배경만 넣어주면 안 된다는 얘기)

💡 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) { 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) } }

추가로, 토큰 존재 확인, 로그아웃, 연결 끊기, 토큰 정보 보기, 사용자 정보 저장하기 같은 다른 코드들도

아래 카카오 개발자 공식문서에서 제공하고 있으니 필요하다면, 직접 들어가서 확인해보도록 하자!

오늘은 여기까지✌🏻

Reference

[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 파일을 직접 수정하여 적용할 수도 있습니다.

LSApplicationQueriesSchemes kakaokompassauth kakaolink

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}://oauth 카카오링크: kakao{NATIVE_APP_KEY}://kakaolink

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) { 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 호출 가능

에러 발생 액세스 토큰 및 리프레시 토큰이 유효하지 않아 사용자 로그인 필요 각 에러에 맞는 처리 필요, 레퍼런스 참고

로그아웃은 이후에 ..~

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

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

파일에 설정을 추가하여 커스텀 URL 스킴 정보를 등록합니다.

iOS 소셜 로그인 구현 – 카카오톡 로그인 연동

안녕하세요! 도안입니당.

요 며칠 소셜 로그인때문에 애먹었는데 기록해두지 않으면 또 헤맬 것 같아서 기록해둡니다!

사실 애먹은 이유는 bundle id, certeficates 쪽이긴 한데, 이것두 나중에 포스팅하겠습니다~~

더보기 카카오 문서에 나와있는 로그인 로직입니다!! 우리가 카카오 로그인 요청을 하면? 1. 카카오 계정 사용자의 자격정보로 인가 코드를 받아옴. 2. 이 인가코드로 액세스 토큰과 리프레시 토큰을 얻음. 간략하게 정리하면 이렇게 되겠네용.

일단 순서부터 간략하게 훑고가자면,

1. Kakao 개발자 사이트에 앱 등록하기!

1.1. 앱 추가

1.2. iOS 플랫폼 등록

1.3. 카카오 로그인 활성화

1.4. 동의 항목 설정

1.5 네이티브 앱 키 확인

2. SDK설치!

3. xcode 설정

3.1. info.plist 설정

3.2. URL Schemes 설정

4. AppDelegate, SceneDelegate 설정

4.1. kakaoSDK 초기화

4.2. handleOpenUrl()추가

5. 메소드 작성

5.1. 카카오톡 설치 돼 있나?

5.2. 앱으로/계정으로 로그인

5.3. 사용자 정보 가져오기

5.4. 로그아웃

자동목차 기능을 넣어야겠어요……

두근두근 카카오 로그인 연동 시작~

1. Kakao 개발자 사이트에 앱 등록하기!

여기서는 앱을 등록하고, 동의 항목을 설정하고,

카톡 로그인 후 앱으로 리다이렉트될 때 쓰이는 네이티브 앱 키를 받을 겁니다!!

카카오 디벨로퍼 바로가기

내 어플리케이션 > 어플리케이션 추가하기에서 앱을 등록해줍니당

앱 아이콘과 앱 이름, 사업자명은 나중에 이렇게 떠요!

물론 아이콘 이름 사업자명 모두 수정 가능하니까 부담없이 지어주시면 됩니다~~

앱이 등록이 됐다면! 좌측 메뉴 > 플랫폼 > iOS 플랫폼 등록을 해줍니다.

번들 아이디를 넣어줘요~~ 어디서 확인하시는지 아시져?

바로바로 여기!!! bundle Identifier 값을 넣어주면 됩니다.

주의 @ 고유한 값이어야해요!!!!! 주소같은 느낌인듯

앱스토어/마켓 정보는 있으면 넣어주시고 없다면 패스~

플랫폼 등록을 했으면

좌측 메뉴에서 제품설정 > 카카오 로그인 > 활성화 설정을 ON으로 바꿔주세요!

우리는 카카오 로그인 쓸거니까!! 당연함

다음은 동의항목 설정하러 가볼까요!

제품 설정 > 카카오 로그인 > 동의항목 에 가시면 필요한 정보들을 받아올 수 있습니다.

저는 닉네임이랑 이메일만 필요해서 설정해줬어요

동의 목적은 사용자가 볼 수 있는 화면에는 나타나지 않고 검수에 필요한 부분이라고 합니다!!

+) 이메일 필수 동의를 위해서는 비즈니스 앱으로 전환을 해야 합니다!

사업자 번호 없어도 간단하게 약관 동의만 하면 개인 개발자로 비즈 앱 전환 할 수 있으니까 곰방 하시면 돼요

그리고 앱설정 > 앱 키 에서 네이티브 앱 키를 확인해줍니다!!

나중에 네이티브 앱 키 넣을때 여기서 확인해주셔야 해요~~

2. SDK 설치

자 이제 로그인에 필요한 모듈을 추가해줄 거예요@.@

카카오 디벨로퍼 문서를 보면

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

친절하게 나와있는데용

당연히 다 설치 할 필요는 없고!!!! 저는 로그인만 할 거라서 이렇게▼ 설치했습니다.

pod ‘KakaoSDKAuth’ pod ‘KakaoSDKUser’ pod ‘KakaoSDKCommon’

그리고 pod install~~!

3. xcode 설정

3.1. info.plist에서 앱 실행 목록에 등록!

다른 어플리케이션을 실행시키려면 실행 허용목록을 설정해야 합니다.

Info > Custom iOS Target Properties > Array 타입으로 LSApplicatioonQueriesSchemes 를 추가,

키 내부의 Item 으로 kakaokompassauth , kakaolink 를 추가합니다. (URL 스킴에 사용됩니다!)

+) 코드로 추가하는 방법

info.plist 우클릭 > open as > source code 로 여신다음에
//… LSApplicationQueriesSchemes kakaokompassauth kakaolink // …
이렇게 추가하면 끝!

3.2. URL Schemes 설정

카카오 로그인을 하려면 우리 앱이 카카오 앱을 실행할 수 있어야 하고,

카카오 앱을 실행해서 로그인 한 뒤엔 다시 우리 앱으로 돌아올 수 있어야겠죠??

이를 위해서 아까 받았던(1.5) 네이티브 앱 키를 이용합니다.

Targets > Info 맨 아래보면 URL Type!

여기 URL Schemes 에 kakao + 네이티브앱 키를 적어줍니다

네이티브앱 키가 abcd1234였다면 -> kakaoabcd1234 적어주시면 됨!

4. AppDelegate, SceneDelegate 설정

4.1 SDK 초기화

이제 우리의 iOS앱에서 SDK파일을 사용하려면 import를 해줘야겠죠?!

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

AppDelegate.swift 파일에 다음과 같이 kakaoSDK 초기화 코드를 추가합니다.

import KakaoSDKCommon func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { … KakaoSDK.initSDK(appKey: “${NATIVE_APP_KEY}”) … }

네이티브 앱 키에는 각자 아까 받았던 네이티브 앱 키를 문자열 형태로 입력해주시면 됩니다!!!

4.2 handleOpenURL()

카카오톡에서 앱으로 돌아왔을때 나머지 로그인 처리를 정상적으로 처리하기 위한 코드를 추가 할 건데요,

1) iOS 13 이상으로 생성된 프로젝트

iOS 13 이상에서는 SceneDelegate를 기본으로 사용하므로, SceneDelegate 파일에 다음과 같은 코드를 추가합니다.

import KakaoSDKAuth … class SceneDelegate: UIResponder, UIWindowSceneDelegate { … func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { if let url = URLContexts.first?.url { if (AuthApi.isKakaoTalkLoginUrl(url)) { _ = AuthController.handleOpenUrl(url: url) } } } … }

2) iOS 13이하

iOS13 이하 프로젝트라면 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 } … }

와! 이제 카카오 로그인을 위한 “준비” 가 끝났습니다 >< 5. 메소드 작성 자 이제 드디어!! 로그인 메소드를 작성할 수 있습니다~~~~🎉🎉 로그인 기능을 할 뷰컨트롤러에 코드를 작성하면 됩니다. 카카오에서 제공하는 메소드들은 음청 다양하게 있는데요, 저는 거기서 ① 카카오톡이 설치 되어 있는지 확인하는 메소드 ② 카카오톡 앱으로 로그인 하는 메소드 & 카카오 계정 입력해서 로그인 하는 메소드 ③ 현재 로그인 한 사용자 정보 가져오는 메소드 ④ 로그아웃 메소드 이렇게 사용했습니다 ^_^ 더 다양한 메소드들은 (다들 아시겠지만) UserApi 따블 클릭 > Jump to definition 으로 가셔서 코드 뜯어보시면 편해요~!

// isKakaoTalkLoginAvailable() : 카톡 설치 되어있으면 true if (UserApi.isKakaoTalkLoginAvailable()) { //카톡 설치되어있으면 -> 카톡으로 로그인 UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in if let error = error { print(error) } else { print(“카카오 톡으로 로그인 성공”) _ = oauthToken /// 로그인 관련 메소드 추가 } } } else { // 카톡 없으면 -> 계정으로 로그인 UserApi.shared.loginWithKakaoAccount { (oauthToken, error) in if let error = error { print(error) } else { print(“카카오 계정으로 로그인 성공”) _ = oauthToken // 관련 메소드 추가 } } }

간단~~

저는 여기서 사용자 정보를 불러와서 토큰, 이메일, 닉네임을 서버에 보내주는 작업을 추가했습니다 :3

UserApi.shared.me 라는 메소드를 사용하면 불러올 수 있습니다 !

//사용자 정보 불러옴 UserApi.shared.me { [self] user, error in if let error = error { print(error) } else { guard let token = oauthToken?.accessToken, let email = user?.kakaoAccount?.email, let name = user?.kakaoAccount?.profile?.nickname else{ print(“token/email/name is nil”) return } self.email = email self.accessToken = token self.name = name //서버에 이메일/토큰/이름 보내주기 } }

그리고 로그아웃까지!

로그아웃 메소드를 호출하면, 사용자의 액세스 토큰과 리프레시 토큰을 모두 만료시킵니다.

UserApi.shared.logout {(error) in if let error = error { print(error) } else { print(“logout() success.”) } }

하면 끝~!

더 자세하고 친절한 설명은 카카오 디벨로퍼에 잘 나와있답니다…..한 번 스스로 정리해 본 것에 의의를 둠 :),….

읽어주셔서 감사합니다!

다음 포스팅은 구글/애플 소셜로그인으로 돌아오겠습니다~!

구글 로그인 ▼

iOS) Kakao Login 구현

이전 게시글에서 Apple 소셜 로그인을 구현해 보았다.

iOS) Apple Login 구현

앱에서 소셜 로그인을 구현할 때 애플만 할 수 없으니 카카오 로그인도 구현해보기로 하자.

디자인 가이드

애플 로그인과 동일하게 카카오도 역시 디자인 가이드가 있다. 여기서 PNG 파일을 다운로드 할 수 있다.

Kakao Developers design-guide

그러면 본격적으로 시작하기전에 설정단계를 알아보자. 아래의 내용들은 카카오 개발자문서를 요약 + 실습이다.

👷‍♀️ 설정단계

1️⃣ 애플리케이션 등록

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

앱 만들기

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

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

카카오계정 로그인

키 값 확인

앱을 생성하면 플랫폼별 앱 키(App Key)가 발급됩니다.

Kakao SDK for JavaScript(이하 JavaScript SDK)에는 JavaScript 키, iOS와 Android에는 네이티브 앱 키, HTTP 요청이나 서버 기능 구현에는 REST API 키를 각각 사용합니다.

앱 키와 함께 어드민 키(Admin Key)도 함께 발급됩니다. 어드민 키는 사용자 목록 가져오기와 같은 관리 기능을 구현할 때 사용합니다.

플랫폼 등록

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

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

번들 ID(Bundle ID): iOS 앱의 고유 값입니다. Xcode의 프로젝트 정보에 설정된 Bundle Identifier 값과 동일한 값을 입력합니다.

앱스토어 ID(Appstore ID): 애플 앱스토어 등록 시 발급받은 앱 ID입니다.

마켓 URL(Market URL): 사용자의 기기에서 앱을 실행시킬 때, 사용자의 기기에 해당 앱이 설치되어 있지 않을 경우 이동할 앱스토어 주소입니다. 예를 들어, 사용자가 카카오링크 API나 카카오톡 메시지 API를 통해 전송된 메시지에서 앱을 실행시키는 링크를 눌렀을 때, 앱 실행을 요청한 사용자의 기기에 해당 앱이 설치되어 있지 않으면 지정한 마켓 URL 주소로 이동하여 해당 앱을 다운로드 받을 수 있습니다. 앱스토어 ID를 입력하면 마켓 URL이 자동으로 생성됩니다.

출처 :

Kakao Developers getting-started/app

2️⃣ CocoaPods 통해 모듈 설치

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

이뿐만 아니라 RxSwift 도 지원한다.

로그인을 활용하기 위해서 정확히 어떠한 모듈이 필요한지 헷갈려서 pod ‘KakaoSDKUser’ 만 적어주었더니 이것 외에도 자동으로 필요한 모듈이 install 되었다. 나와 같은 고민으로 걱정하지 않아도 될 것 같다.

3️⃣ Info.plist 설정

앱 실행 허용 목록 등록하기

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

(앱에서 카카오톡앱을 실행시켜 로그인 하는 것과 웹을 통해 카카오 계정으로 로그인 하는 것 둘다 해볼 것이다.)
[Info] > [Custom iOS Target Properties]에 Array 타입 키(Key)인 LSApplicationQueriesSchemes 를 추가하고, 해당 키의 ‘Item’으로 커스텀 스킴에 사용할 값인 ‘kakaokompassauth’, ‘kakaolink’를 추가합니다.

위 설정은 Info.plist 를 직접 수정해서 적용할 수 있다.

LSApplicationQueriesSchemes kakaokompassauth kakaolink

URL Schemes 설정하기

카카오계정을 통한 인증과 카카오톡 메시지를 통한 앱 실행을 위해 URL Schemes 설정을 합니다.
[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao{NATIVE_APP_KEY} 형식으로 등록합니다.

(앱 등록할 때 발급받았던 네이티브 앱 키를 넣으면 된다.)

4️⃣ 초기화

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”) … }

출처 :

Kakao Developers getting-started/sdk-ios

👷‍♀️ 시작하기 전에

두가지 방법으로 로그인을 한다고 예고했는데 자세히 알아보자.

카카오톡으로 로그인

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

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

기본 웹 브라우저를 통해 카카오계정 정보를 입력하고 로그인할 경우, 사용자가 카카오계정 정보를 직접 입력하는 단계를 거칩니다. 이 방법은 사용자가 여러 개의 카카오계정을 사용하는 서비스나 카카오톡을 지원하지 않는 디바이스에서 사용하는 것이 좋습니다.

각 인증 방법의 특징과 서비스의 사용자 로그인 동선을 고려하여 어느 인증 방법이 적합한지 판단합니다. 두 가지 인증 방법을 함께 사용할 수도 있습니다. 인증 방법에 따라 필요한 설정이나 예외 처리에 차이가 있습니다.

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

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

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

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

import KakaoSDKAuth … class SceneDelegate: UIResponder, UIWindowSceneDelegate { … func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { if let url = URLContexts.first?.url { if (AuthApi.isKakaoTalkLoginUrl(url)) { _ = AuthController.handleOpenUrl(url: url) } } } … }

👷‍♀️ 시작하기

Main.storyboard

다음과 같은 스토리보드에서 실습할 것이다.

📌 카카오톡으로 로그인

1️⃣ 기능구현

// ✅ 모듈 추가 import KakaoSDKUser // … // ✅ 카카오로그인 이미지에 UITapGestureRecognizer 를 등록할 때 사용할 @objc 메서드. // ✅ 카카오톡으로 로그인 @objc func loginKakao() { print(“loginKakao() called.”) // ✅ 카카오톡 설치 여부 확인 if (UserApi.isKakaoTalkLoginAvailable()) { UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in if let error = error { print(error) } else { print(“loginWithKakaoTalk() success.”) // ✅ 회원가입 성공 시 oauthToken 저장가능하다 // _ = oauthToken // ✅ 사용자정보를 성공적으로 가져오면 화면전환 한다. self.getUserInfo() } } } // ✅ 카카오톡 미설치 else { print(“카카오톡 미설치”) } }

카카오톡이 설치되있지 않으면 다음과 같은 오류를 보여준다. 핸드폰에 연결해서 실습해야한다.

2️⃣ 핸드폰에서 빌드

처음에 시도하면 이런 화면이 나올텐데 Kakao developers 의 [내 어플리케이션] > [제품설정] > [카카오 로그인] 에서 카카오 로그인을 활성화를 해주어야만 실제 서비스에서 사용할 수 있다.

이와 같이 활성화를 해주면 다음과 같이 로그인 화면이 보여진다.

📌 카카오계정으로 로그인

1️⃣ 기능구현

// ✅ 모듈 추가 import KakaoSDKUser // … // ✅ 카카오로그인 이미지에 UITapGestureRecognizer 를 등록할 때 사용할 @objc 메서드. // ✅ 카카오계정으로 로그인 @objc func loginKakaoAccount() { print(“loginKakaoAccount() called.”) // ✅ 기본 웹 브라우저를 사용하여 로그인 진행. UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in if let error = error { print(error) } else { print(“loginWithKakaoAccount() success.”) // ✅ 회원가입 성공 시 oauthToken 저장 // _ = oauthToken // ✅ 사용자정보를 성공적으로 가져오면 화면전환 한다. self.getUserInfo() } } }

카카오계정으로 로그인도 잘되는지 확인해보겠다.

📌 동의 항목 설정

처음에는 동의항목이 하나도 설정되어 있지 않은 것을 확인할 수 있다. 이것은 Kakao Developer 에서 설정가능하다.

이메일 경우는 필수동의를 받기위해서는 검수를 필요했다. 그래서 닉네임은 필수동의, 이메일은 선택동의로 동의를 받아보겠다.

📌 로그아웃 & 연결 끊기

로그아웃 : 로그아웃 API는 토큰을 삭제하여, 더 이상 해당 사용자 정보로 카카오 API를 호출할 수 없도록 합니다.

연결끊기 : 연결 끊기 API는 카카오 플랫폼 안에서 앱과 사용자 카카오계정의 연결 상태를 해제합니다.

LogoutViewController.swift

import UIKit import KakaoSDKUser class LogoutViewController: UIViewController { // … override func viewDidLoad() { super.viewDidLoad() // … } @IBAction func logoutClicked(_ sender: Any) { // ✅ 로그아웃 : 로그아웃은 API 요청의 성공 여부와 관계없이 토큰을 삭제 처리한다는 점에 유의합니다. UserApi.shared.logout {(error) in if let error = error { print(error) } else { print(“logout() success.”) // ✅ 로그아웃 시 메인으로 보냄 self.navigationController?.popViewController(animated: true) } } } @IBAction func unlinkClicked(_ sender: Any) { // ✅ 연결 끊기 : 연결이 끊어지면 기존의 토큰은 더 이상 사용할 수 없으므로, 연결 끊기 API 요청 성공 시 로그아웃 처리가 함께 이뤄져 토큰이 삭제됩니다. UserApi.shared.unlink {(error) in if let error = error { print(error) } else { print(“unlink() success.”) // ✅ 연결끊기 시 메인으로 보냄 self.navigationController?.popViewController(animated: true) } } } } extension LogoutViewController { // … }

📌 사용자 정보 가져오기

닉네임( user.kakaoAccount.profile.nickname )과 이메일( user.kakaoAccount.email )을 가져와 보도록 하겠다.

extension LoginViewController { // ✅ 사용자 정보를 성공적으로 가져오면 화면전환 한다. private func getUserInfo() { // ✅ 사용자 정보 가져오기 UserApi.shared.me() {(user, error) in if let error = error { print(error) } else { print(“me() success.”) // ✅ 닉네임, 이메일 정보 let nickname = user?.kakaoAccount?.profile?.nickname let email = user?.kakaoAccount?.email guard let nextVC = self.storyboard?.instantiateViewController(withIdentifier: “LogoutViewController”) as? LogoutViewController else { return } // ✅ 사용자 정보 넘기기 nextVC.nickname = nickname nextVC.email = email // ✅ 화면전환 self.navigationController?.pushViewController(nextVC, animated: true) } } } }

각 항목의 자료형 등은 아래를 참고해서 가져올 수 있다.

Kakao Developers

📌 토큰 존재 여부 확인하기

토큰의 존재 여부를 확인해서 앱 실행 시 회원가입을 시킬지 메인화면으로 보낼지 분기처리할 수 있다.

뷰가 다 보여진 후 토큰을 검사해서 유효성이 확인되면 로그인된 화면으로 전환해주었다. (AppDelegate.swift 에서 앱 실행 시 첫 화면의 분기처리를 위해서 사용해주어도 된다.)

import UIKit // ✅ 모듈 추가 import KakaoSDKUser import KakaoSDKAuth import KakaoSDKCommon class LoginViewController: UIViewController { // … override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) // ✅ 유효한 토큰 검사 if (AuthApi.hasToken()) { UserApi.shared.accessTokenInfo { (_, error) in if let error = error { if let sdkError = error as? SdkError, sdkError.isInvalidTokenError() == true { //로그인 필요 } else { //기타 에러 } } else { //토큰 유효성 체크 성공(필요 시 토큰 갱신됨) // ✅ 사용자 정보를 가져오고 화면전환을 하는 커스텀 메서드 self.getUserInfo() } } } else { //로그인 필요 } } }

출처 :

전체 코드 :