1탄의 개념을 활용해서 카카오 로그인을 만들어보려고 한다!
먼저 카카오 로그인을 하기 위해서는 kakao Developer 사이트에 가야한다
그 다음 내 애플리케이션을 누른 후 애플리케이션을 추가해야한다.
앱 아이콘과, 앱이름, 사업자명을 적어야한다.
만약 개인 프로젝트라면 간단하게 적어주어도 무방할 것 같다!
이렇게 적으면 앱이 생성되는 것을 볼 수 있다.
우리는 iOS 개발자이므로, 플랫폼 설정하기에 들어가서 iOS 플랫폼 등록을 누르면 된다.
그러면 아래와 같이 번들 ID, iPhone 앱, 아이패드 앱 등에 대해 입력하는 것이 있다.
현재 앱이 없으면 번들 ID만 필수로 입력하면 된다.
다음으로는 카카오 로그인 클릭 후 그림에서처럼 활성화 설정을 ON으로 해서 활성화를 하면 됩니다!
그리고 이제 동의 항목에 가야합니다.
동의 항목은 카카오로 소셜로그인을 하려고 할 때 어떤 부분을 동의받을지에 대한 View가 뜰 것이다!
이제 앱 주인이 어떤 것을 받을지에 대한 설정을 해주어야 한다.
요런식으로 하나씩 설정해줄 수 있고, 닉네임과 프로필 사진은 필수 동의로 할 수 있다.
그외에는 선택 동의로 할 수 있다
설정 페이지에서 아래와 같이 적을 수 있으며 동의 목적을 사용 용도에 맞게 쓸 수 있다
이제 원하는 것을 설정했다면 위에 동의화면 미리보기를 통해 원하는 것이 나오는지 확인할 수 있다.
이렇게 여러개 설정하면 여러개가 나오니 확인해보며 제대로 설정을 했는지 볼 수 있다.
선택사항으로 Redirect URL를 설정해줄 수도 있다.
카카오 로그인 - Redirect URL 에 가서 등록을 해줄 수 있는데 꼭 필요사항이 아니므로 REST API 같이 사용할 예정자만 적어주면 된다!
기존에는 cocoapods로 설치하는 것들을 많이 볼 수 있다.
하지만 지금은 애플에서 SPM으로 설치할 수 있는 것을 제공하고 있으므로 이를 활용해서 필수 모듈을 추가하려고 한다.
SPM에 https://github.com/kakao/kakao-ios-sdk 를 입력해서 package를 추가하면 된다!
추가하는 방법은 File - Add Packages - URL 입력
이렇게 하면 추가할 수 있다.
이제 어떤 것을 설치할 지 물어볼 것이다.
모듈 중에 필요한 것만 설치할 수도 있고 전체를 설치할 수도 있다.
'KakaoSDK' // 전체 설치
'KakaoSDKCommon' // 필수 요소를 담은 공통 모듈
'KakaoSDKAuth' // 카카오 로그인
'KakaoSDKUser' // 사용자 관리
'KakaoSDKTalk' // 친구, 메시지(카카오톡)
'KakaoSDKStory' // 카카오스토리
'KakaoSDKLink' // 메시지(카카오링크)
'KakaoSDKTemplate' // 메시지 템플릿
'KakaoSDKNavi' // 카카오내비이렇게 설치한 후, 이제 초기 설정을 해주어야한다.
info.plist에서 앱 실행 허용을 등록해주어야 한다.
여러 블로그에서 자동완성처럼 작성이 되는줄 알았는데, 알고보니 손수 입력해야한다!
그래서 LSApplicationQueriesSchemes 입력한 후 Array로 타입을 선택해준다.
그다음 + 버튼으로 하위폴더를 만드는 것처럼 추가해서
2개의 Item를 넣어준다.
kakaokompassauth, kakaolink 를 각각 적어주면된다!
이제 다음으로는
프로젝트 파일에 간다!
그곳에서 URL Type에 + 버튼으로 추가해서
URL Schemes에 아까 카카오 개발자 사이트에서의 네이티브앱 키를 넣어주면 된다!
네이티브앱은 아까 만든 개발자 사이트에 앱에서 요약정보로 가게되면 확인할 수 있다
이제 AppDelegate에서 이를 초기화해주어야한다.
import를 하고 init해주는 코드를 작성해야한다!
import KakaoSDKCommon
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
KakaoSDK.initSDK(appKey: "본인 네티이브앱 키")
return true
}다음으로는 SceneDelegate에서 url에 맞는지 확인 후에 로그인하는 URL로 연결되는 로직이 필요하다.
import KakaoSDKAuth
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
if let url = URLContexts.first?.url {
if (AuthApi.isKakaoTalkLoginUrl(url)) {
_ = AuthController.handleOpenUrl(url: url)
}
}
}이제 준비는 완료!!
ViewController에서 로직을 통해 카카오 로그인이 가능하도록 구현하면된다!
먼저 보통 소셜로그인할 때 나오는 카카오 버튼을 알 수 있을 것이다.
이는 카카오에서 제공해주고 있다!
이곳에서 원하는 사이즈, 언어, 너비 등을 정해서 다운받을 수 있다.
이를 활용하면 된다.
저는 이곳에서 2가지 스타일 모두 가져올 것이다.
하나는 카카오톡 로그인, 하나는 카카오 계정 로그인으로 활용할 에정이다.
Button를 ViewController에 연결해서 내부를 구현하면된다.
import KakaoSDKAuth
import KakaoSDKUser두개를 import하고 이제 카카오톡 로그인 로직을 구현하면 된다.
@IBAction func kakoLoginButtonTapped(_ sender: UIButton) {
if UserApi.isKakaoTalkLoginAvailable() {
UserApi.shared.loginWithKakaoTalk { oauthToken, error in
if let error = error {
print(error)
}
else {
print("loginWithKakaoTalk() success")
_ = oauthToken
}
}
}
}카카오톡 로그인이 가능하다면 로그인을 해서 oauthToken, error 2개를 내보내고 있는데 이를 확인하도록 할 수 있다.
현재는 error외에 oauthToken를 활용하지 않고 있으므로 어떤 로직도 없지만 이는 추후에 다른곳에서 활용할 수도있다!
그리고 카카오 게정으로 로그인은 아래와 같이 구현할 수 있다.
@IBAction func kakaoLoginAccountButtonTapped(_ sender: UIButton) {
UserApi.shared.loginWithKakaoAccount { (oauthToken, Error) in
if let Error = Error {
print("Error")
}
else {
print("loginwithkakaoaccount success")
}
}
}카카오 계정 로그인이 된다면 그 내부 로직은 위와 동일하다!
마지막으로, 로그인을 했다면 로그아웃도 하고싶을 것이다.
그래서 로그아웃에 대한 로직은 아래와같다.
@IBAction func kakoAccountLogoutButtonTapped(_ sender: UIButton) {
UserApi.shared.logout { (error) in
if let error = error {
print(error)
} else {
print("kakao logout success")
}
}
}
코드에서도 어떤 의미인지 파악할 수 있다!
이제 이를 각각 버튼으로 만들어서 동작 시키면, 카카오톡과 카카오 계정 권한 요청을 하며 카카오톡 로그인이 가능하도록 한다.
마지막으로,
이제 가져온 자신의 nickname과 email를 화면에서 보여주는 것을 구현하려고 한다.
첫번째 뷰에서 로그인을 하게되고 로그인에 성공하면 다음 화면에서 내 닉네임과 이메일이 보여주도록 하는 것이다.
그림처럼 버튼을 누르면 다음 화면에 2개의 라벨(닉네임, 이메일)이 나오도록 한다!
이제 2번째 View에 대한 로직을 SecondViewController를 만들어서 구현해줄 수 있다.
import KakaoSDKAuth
import KakaoSDKUser
import KakaoSDKCommon3가지를 import해준 다음
2개의 라벨에대해 IBOutlet를 만들어준다.
그다음에는 이를 활용해서 실제 카카오에서 가져온 정보를 대입시키도록 한다.
func setUserInfo() {
UserApi.shared.me { (user, error) in
if let error = error {
print(error)
} else {
self.nicknameLabel.text = user?.kakaoAccount?.profile?.nickname
self.emailLabel.text = user?.kakaoAccount?.email
}
}
}위에서처럼 카카오에서 가져온 것을 라벨에 넣으면 성공시 자신의 닉네임과 이메일이 들어가는 것을 확인할 수 있을 것이다!
현재는 프론트단에서만 개발이 되었지만, 1탄에서 보았던 것처럼 실제 동작을 위해서는 서버에 토큰을 저장하고 해야할 것이다!
이에 대한 방식은 추후 가능하다면 깊게 다루어볼 예정이다!!
참고사이트
https://developers.kakao.com/docs/latest/ko/kakaologin/common
