[SwiftUI] 카카오 로그인

Why ?

---

• 요즘은 어디서나 사용하는 소셜로그인 기능
• SwiftUI로는 소셜로그인을 해본적이 없어서 사용하기전에 미리 공부를 해보려고 한다.

How ?

---

카카오 애플리케이션 등록

https://developers.kakao.com/docs/latest/ko/getting-started/app

Kakao Developers

info.plist 설정

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

URL Schemes 설정

URLSchemes 에 kakao{NATIVE_APP_KEY}를 넣어준다.

ex) 네이티브 앱 키가 123456789이면 kakao123456789

SPM 설정

SPM으로 Kakao SDK 추가

로그인 기능을 사용하기 위해서는 Common, Auth, User가 필요하다.

초기화

import SwiftUI
import KakaoSDKCommon
import KakaoSDKAuth

@main
struct SignatureApp: App {
    
    init() {
        // Kakao SDK 초기화
        KakaoSDK.initSDK(appKey: "e0cd2dbef7ee2f12417559b16359d7c7")
    }
    
    var body: some Scene {
        WindowGroup {
            // onOpenURL()을 사용해 커스텀 URL 스킴 처리
            ContentView().onOpenURL(perform: { url in
                if (AuthApi.isKakaoTalkLoginUrl(url)) {
                    AuthController.handleOpenUrl(url: url)
                }
            })
        }
    }
}

SwiftUI에서는 AppDelegate가 없어서 앱 실행 시 실행되는 {ProjectName}App 에서 초기화

로그인

// ViewModel

// 카카오톡으로 로그인이 가능한지 체크
func checkKakaoTalkLoginAvailable() {
    if (UserApi.isKakaoTalkLoginAvailable()) {
        loginWithKakaoTalk()
    } else {
        loginWithKakaoAccount()
    }
}

// 카카오톡 로그인
func loginWithKakaoTalk() {
    UserApi.shared.loginWithKakaoTalk {(oauthToken, error) in
        if let error = error {
            print(error)
        } else {
            print("loginWithKakaoTalk() success.")
            print("oauthToken = \\(oauthToken?.accessToken)")
            self.isKakaoTalkLoginAvailable = true
        }
    }
}

// 카카오 로그인
func loginWithKakaoAccount() {
    UserApi.shared.loginWithKakaoAccount {(oauthToken, error) in
        if let error = error {
            print(error)
        }
        else {
            print("loginWithKakaoAccount() success.")
            print("oauthToken = \\(oauthToken?.accessToken)")
            self.isKakaoTalkLoginAvailable = true
        }
    }
}

로그인 요청하는 함수는 ViewModel에 따로 분리해서 작성

// View

Button {
    viewModel.checkKakaoTalkLoginAvailable()
} label: {
    Text("카카오톡으로 로그인")
        .foregroundColor(.black)
        .frame(height: 50)
        .frame(minWidth: .zero, maxWidth: .infinity)
        .background(Color.yellow)
        .cornerRadius(8)
        .padding(.leading, 16)
        .padding(.trailing, 16)
}
.padding(.bottom, 9)

View에 버튼 생성

결과

🤔

---

AppDelegate가 없어서 초기화 하는데 뭐지.. 싶었다.

AppDelegate를 만들어서 사용하는 방법이 있고, 글에 나온 방법이 있는데 파일을 새로 만드는 것보다는 위에서 사용한 방법이 더 깔끔해보여서 저렇게 했다.

프로젝트를 진행하다보면 달라질수도 있겠지만 지금은 사용법에 대해 알고 넘어가는 수준이니 이정도로 만족한다.

Reference

Kakao Developers

 

Kakao Developers