1. 개요
국내 앱은 대부분 소셜로그인 플랫폼으로 카카오톡 로그인 서비스를 제공한다.
카카오톡과 연결된 서비스를 제공하기 위해서는 앱에 카카오톡 API를 사용해야한다. 이번 글에서는 내가 구현했던 카카오톡 로그인 서비스를 Firebase Authentication으로 연동하는 방법을 소개하고자 한다.
먼저, Firebase Authentication은 다음과 같은 소셜 로그인 서비스와 연동할 수 있다.
카카오톡 서비스는 추가 제공업체에 등록되어있지 않으므로 Firebase Authentication와 연동하기 위해서는 기본 제공업체인 이메일 / 비밀번호 방법으로 로그인을 해야한다.
카카오톡으로 Firebase Authentication으로 로그인 하는 과정은 다음과 같다.
카카오톡 로그인 -> Firebase Authentication 이메일 / 비밀번호 방법으로 카카오 이메일 계정 등록 -> Firebase Authentication에 카카오 이메일 계정으로 로그인
앱에 이메일 / 비밀번호로 로그인하는 과정은 이전 게시글에 포스팅한 적이 있고, 해당 프로젝트 기반으로 카카오톡 로그인 서비스를 추가하여 연동할 계획이다.
2. Kakao Developers 앱 등록
카카오와 관련된 API를 사용하기 위해서는 https://developers.kakao.com 에 본인 앱을 등록해야한다.
여기에 등록하면 로그인 기능뿐만 아니라 다양한 서비스(카카오톡 채널, Daum API, 오픈 채팅 등)를 이용할 수 있다.
카카오 계정으로 로그인을 하고 상단 메뉴의 내 애플리케이션으로 이동한다.
메인 화면에서 내 애플리케이션 추가하기를 누르고
애플리케이션 추가하기에 위와 같은 정보를 입력한다.
사실 앱 아이콘은 추가해도 되고 안해도 된다. 앱 이름과 사업자명은 필수인데, 사실 사업을 위한 앱이 아니라 연습용 앱이기 때문에 내 이름을 입력했다.
이후 저장을 누르면 이제 메인 목록에 다음과 같이 나의 앱 플랫폼이 생성된 것을 알 수 있다.
이제 플랫폼 목록에서 나의 앱을 누르면 다음과 같은 정보를 확인할 수 있다.
이제 하단에 있는 플랫폼을 설정으로 들어가 내 Xcode 프로젝트와 연동하는 작업을 해야한다.
Kakao Developer의 플랫폼 설정으로 들어가면 Android, iOS, 웹 플랫폼 목록이 나온다. 우리는 SwiftUI 프로젝트와 연동할 것이므로 iOS 플랫폼 등록에 들어간다.
해당 앱이 사업자 혹은 앱스토어에 출시할 어플이라면 iPhone 혹은 iPad에 앱스토어 ID, 마켓 URL을 등록하고 개인 프로젝트나 연습용이라면 앱의 번들 ID만 입력해줘도 된다.
프로젝트에서 번들 ID를 확인하는 방법은 위와 같은 방법(프로젝트 파일 - TARGET - Signing & Capabilities)으로 확인할 수 있다.
다시한번 말하지만, 내가 사용하는 프로젝트는 이전 포스팅한 FirebaseAuthentication EmailAuthProject를 기반으로 한 프로젝트이다.
필요한 정보를 모두 입력하고 저장을 누르면 다음과 같이 성공적으로 프로젝트가 등록된 것을 볼 수 있다.
3. 카카오 제품설정 - 로그인
이제 플랫폼에 프로젝트와 연동까지 마쳤으면 다음은 카카오의 여러 제품 서비스 중 로그인 설정을 진행해야 한다.
좌측 메뉴 하단에서 제품 설정 - 카카오 로그인을 클릭하여 카카오 로그인 활성화 상태를 ON으로 변경해주고 이어서 나타난 OpenID Connect도 활성화해준다.
OpenID Connect는 로그인할 때 인증정보가 담긴 ID 토큰을 발급받고 토큰 유효 시간동안은 추가 로그인을 하지 않아도 로그인이 가능하고 보안 성능도 높다고 한다.
그리고 바로 아래 메뉴에 있는 동의 항목 메뉴으로 이동해준다.
그러면 위와 같은 설정 화면을 볼 수 있다.
카카오 로그인을 할 때, 카카오 계정에서 다양한 항목의 사용자 개인정보를 앱에서 활용할 수 있다. 물론, 이를 하기 위해서는 개인정보 보호법에 따라 사용자의 동의가 필수이다.
개인정보 항목을 설정하기 위해서 각 항목별 맨 끝에 '설정'을 누르면 위와 같은 창이 뜬다.
해당 개인 정보 항목이 앱을 사용할 때 필수적이라면 '필수 동의'를 클릭하고, 꼭 필요하지 않거나 필요할 때에만 동의를 받으려고 할 경우에는 '선택 동의'와 '이용 중 동의'를 선택하면 되겠다.
우리는 Firebase Authentication 방법 중 기본 제공업체인 이메일 / 비밀번호 방법에 카카오 이메일 계정과 비밀번호를 전달함으로써 로그인을 할 것이다. 따라서 카카오 이메일 계정 항목이 필수여야한다.
하지만 카카오 이메일 계정 동의항목 설정을 들어가보면 다음과 같이 필수 동의를 선택할 수 없다.
동의 항목에 대해 검수가 필요한 사항을 해결하기 위해서 동의항목 리스트 메인 화면에 있는 '비즈니스 설정 바로가기'를 통해 비즈니스 설정을 완료해야한다.
비즈니스 설정을 한다는 것은 해당 앱을 비즈앱으로 등록한다는 뜻이다.
나의 애플리케이션을 등록할 때 앱 아이콘 등록이 필수는 아니었지만 비즈 앱등록을 위해서는 필수이다.
사업자 앱이라면 사업 서비스 메인 아이콘이 있을 것이고, 나는 연습용 프로젝트이기 때문에 애플에서 개발자를 위한 심볼 라이브러리인
'SF Symbols' 이미지를 사용했다.
앱 아이콘을 등록하고 좌측 메뉴에서 비즈니스 매뉴로 이동하면 개인 개발자 비즈 앱 전환을 선택할 수 있다.
물론 사업용 어플리케이션은 사업자 정보 등록을 진행하면 되겠다.
비즈 앱 전환 목적이 우리는 이메일 필수 동의이므로 이메일 필수 동의를 선택해주고 추가적으로 개인정보를 사용하고 싶다면 직접 입력으로 사유를 작성하면 되겠다.
사유를 선택하고 전환을 선택하면 위 사진처럼 성공적으로 개인 개발자 비즈 앱으로 전환된 것을 확인할 수 있다.
이제 다음과 같이 개인정보 동의항목의 이메일 항목을 '필수 동의'로 설정할 수 있다.
기타 다른 개인정보 동의항목 설정과 관련해서는 다음을 참고하면 되겠다.
- 프로필 정보(닉네임/프로필 사진): 앱 만들기 후, 카카오 로그인 활성화 설정하면 승인/제약 없이 필수 동의 사용 가능
- 카카오 계정(이메일): 비즈 앱 전환 시, 필수 동의 사용 가능
- 카카오톡 채널 추가 상태 및 내역 / 카카오 계정(전화번호): 비즈 앱 전환하여 카카오톡 비즈 채널 연결하면 필수 / 선택 동의 사용 가능
- 이름 / 성별 / 연령대 / 생일 / 출생 연도 / 배송지 정보(수령인명, 배송지 주소, 전화번호) / CI: 카카오 싱크 신청으로 '개인정보 항목 신청' 승인되면 필수 동의 사용 가능
나는 닉네임과 이메일을 필수 동의로 선택했다.
만약 카카오 계정으로 로그인할 때 개인정보 동의 항목이 표시되는 화면은 다음과 같다.
4. 패키지 설치하기
이제 프로젝트에 Kakao SDK(모듈)을 설치해보자.
자세한 방법은 Kakao Developers - iOS https://developers.kakao.com/docs/latest/ko/kakaologin/ios 에 나와있다.
Kakao 로그인 버튼 디자인도 다운받을 수 있으니 참고하자.
SPM으로 Kakao SDK 설치하기
Kakao SDK 레포지토리 URL: https://github.com/kakao/kakao-ios-sdk
Add Package를 클릭하면 다음과 같은 모듈을 다운로드할 수 있다.
우리는 로그인에 필요한 모듈만 설치하면 되기 때문에 KakaoSDKCommon, KakaoSDKAuth, Kakao SDKUser 모듈만 선택해서 추가하겠다.
5. 프로젝트 설정
Kakao iOS SDK를 모두 설치했으면 이제 프로젝트 설정을 해야한다.
프로젝트 설정은 Firebase Authentication을 연동하기 위해 했던 과정과 비슷하다.
위 사진에서 확인할 것은 총 두가지이다.
1. 앱 실행 허용 목록을 설정해야한다.
이 설정은 사용자 정보 보호를 위한 애플의 정책에 따라 필요한 과정이다.
Info -> Custom iOS Target Properties에 Queried URL Schemes를 추가하고, '+'를 눌러 하위 계층인 'Item 0', 'Item 1'을 추가하고 해당 키의 값으로 'kakaokompassauth', 'kakaolink'를 입력한다.
2. URL Types 추가해야한다.
URL Types에 '+' 버튼을 누르고 URL Schemes 항목에 네이티브앱 키를 입력해야한다.
네이티브앱 키는 Kakao Developers의 내 애플리케이션에서 확인할 수 있다.
네이티브 앱 키가 'eifkdjfeieski1231342931kdi' 라면, URL Schemes에는 'kakaoeifkdjfeieski1231342931kdi'라고 입력해야한다.
이제 프로젝트에 초기화 코드를 작성해야한다.
SwiftUI는 '프로젝트명app.swift' 파일에 가서 다음 코드를 작성한다. 'Navite_APP_Key'에는 Kakao Developers에 있는 내 애플리케이션의 네이티브 앱 키 값을 String 형식으로 넣어준다.
또한, ContentView()에 .onOpenURL {...}을 추가해준다.
.onOpenURL은 Window와 관련된 URL을 받았을 때 현재 View(ContentView) 위에 URL에 해당하는 View를 띄워주기 위한 Handler를 등록하는 함수이다.
여기서는 카카오 로그인을 위한 View를 띄우기 위해 URL 값이 활용된다고 보면 되겠다.
로그인 View와 관련된 코드는 KakaoSDKAuth에 있는 AuthController에 이미 있고, AuthController에 URL만 전달해주면 현재 View(ContentView)에 AuthController가 호출되어 새로운 View가 나타난다. 그리고 해당 View를 닫으면(AuthController를 메모리 해제하면) 다시 원래 View(ContentView)를 볼 수 있는 것이다.
import SwiftUI
import KakaoSDKCommon
import KakaoSDKAuth
...
@main
struct SwiftUI_testApp: App {
...
init() {
// Kakao SDK 초기화
KakaoSDK.initSDK(appKey: "NATIVE_APP_KEY")
}
...
ContentView()
.onOpenURL { url in // 뷰가 속한 Window에 대한 URL을 받았을 때 호출할 Handler를 등록하는 함수
if AuthApi.isKakaoTalkLoginUrl(url) {
_ = AuthController.handleOpenUrl(url: url)
}
}
}
나는 기존 EmailAuthProject 파일에 추가한 것이고, 여기에는 Firebase SDK 초기화 코드도 있기에 다음과 같은 코드가 된다.
import SwiftUI
import FirebaseCore
import KakaoSDKCommon
import KakaoSDKAuth
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
FirebaseApp.configure()
return true
}
}
@main
struct YourApp: App {
// register app delegate for Firebase setup
@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
@StateObject var viewModel: ViewModel = ViewModel()
init() {
// Kakao SDK 초기화
KakaoSDK.initSDK(appKey: "dbda14fda1caa1d14c8a1b963fca0def")
}
var body: some Scene {
WindowGroup {
NavigationView {
ContentView()
.environmentObject(viewModel)
.onOpenURL { url in // 뷰가 속한 Window에 대한 URL을 받았을 때 호출할 Handler를 등록하는 함수
// 카카오 로그인을 위해 웹 혹은 카카오톡 앱으로 이동 후 다시 앱으로 돌아오는 과정을 거쳐야하므로, Handler를 추가로 등록해줌
if AuthApi.isKakaoTalkLoginUrl(url) {
_ = AuthController.handleOpenUrl(url: url)
}
}
}
}
}
}
6. 카카오톡 로그인 - Firebase Authentication 연동
앞서 게시글 맨 처음에 카카오 로그인과 Firebase Authentication 연동을 위해서 다음과 같은 절차가 진행된다고 했다.
카카오톡 로그인 -> Firebase Authentication 이메일 / 비밀번호 방법으로 카카오 이메일 계정 등록 -> Firebase Authentication에 카카오 이메일 계정으로 로그인
따라서 기존 FirebaseAuthentication의 방법 중 이메일 / 비밀번호 방법으로 로그인하는 함수 emailAuthSignUp를 수정해줄 필요가 있다.
func emailAuthSignUp(email: String, userName: String, password: String, completion: (() -> Void)?) {
Auth.auth().createUser(withEmail: email, password: password) { result, error in
if let error = error {
print("error: \(error.localizedDescription)")
}
if result != nil {
let changeRequest = Auth.auth().currentUser?.createProfileChangeRequest()
changeRequest?.displayName = userName
print("사용자 이메일: \(String(describing: result?.user.email))")
}
completion?()
}
}지난 게시글에 있던 emailAuthSignUp 함수에 파라미터로 completion: (() -> Void)? 을 추가했다.
emailAuthSignUp 함수 호출부에서 completion으로 emailAuthSignIn 함수를 전달할 것이다.
self.emailAuthSignUp(email: email, userName: userName, password: "\(password)") {
self.emailAuthSignIn(email: email, password: "\(password)")
}이런식으로 말이다.
카카오톡으로 로그인할 때 매번 Firebase Authentication에 카카오 계정을 등록하려는 시도를 하고자 한다.
최초 로그인이라면 정상적으로 Auth.auth().createUser 함수가 실행되어 Firebase Authentication에 계정 등록이 되고 바로 completion의 emailAuthSignIn 함수가 실행될 것이다.
최초 로그인이 아니라면 Auth.auth().createUser 함수에서 error가 반환 될테지만 상관없다. 그대로 조건문을 지나 completion의 emailAuthSignIn 함수를 실행될테니 말이다.
굳이 이렇게 변경한 이유는 카카오톡으로 로그인하는 것 말고, 이전 포스팅에서 구현한 로그인 방법 - 직접 앱에서 회원가입하여 생성한 계정으로 로그인하는 방법을 살려두기 위함이다.
혹시나 Auth.auth().createUser에 대한 정교한 에러 핸들링을 시도한다면, 에러코드를 분석하여 completion 코드를 error 블록 내에 선언할 수 있다.
예를 들어 에러 중 에러 코드가 '이미 존재하는 계정입니다.'와 같은 의미인 경우 조건문을 설정하여 안에 completion 코드를 작성하면 된다. Firebase Authentication에 관한 에러 코드는 다음 사이트를 참고하여 코드를 직접 수정하면 되겠다.
https://firebase.google.com/docs/auth/admin/errors?hl=ko
ViewModel에 Kakao 로그인 관련된 코드는 다음과 같다.
// MARK: - KakaoAuth SignIn Function
func kakaoAuthSignIn() {
if AuthApi.hasToken() { // 발급된 토큰이 있는지
UserApi.shared.accessTokenInfo { _, error in // 해당 토큰이 유효한지
if let error = error { // 에러가 발생했으면 토큰이 유효하지 않다.
self.openKakaoService()
} else { // 유효한 토큰
self.loadingInfoDidKakaoAuth()
}
}
} else { // 만료된 토큰
self.openKakaoService()
}
}
func openKakaoService() {
if UserApi.isKakaoTalkLoginAvailable() { // 카카오톡 앱 이용 가능한지
UserApi.shared.loginWithKakaoTalk { oauthToken, error in // 카카오톡 앱으로 로그인
if let error = error { // 로그인 실패 -> 종료
print("Kakao Sign In Error: ", error.localizedDescription)
return
}
_ = oauthToken // 로그인 성공
self.loadingInfoDidKakaoAuth() // 사용자 정보 불러와서 Firebase Auth 로그인하기
}
} else { // 카카오톡 앱 이용 불가능한 사람
UserApi.shared.loginWithKakaoAccount { oauthToken, error in // 카카오 웹으로 로그인
if let error = error { // 로그인 실패 -> 종료
print("Kakao Sign In Error: ", error.localizedDescription)
return
}
_ = oauthToken // 로그인 성공
self.loadingInfoDidKakaoAuth() // 사용자 정보 불러와서 Firebase Auth 로그인하기
}
}
}
func loadingInfoDidKakaoAuth() { // 사용자 정보 불러오기
UserApi.shared.me { kakaoUser, error in
if let error = error {
print("카카오톡 사용자 정보 불러오는데 실패했습니다.")
return
}
guard let email = kakaoUser?.kakaoAccount?.email else { return }
guard let password = kakaoUser?.id else { return }
guard let userName = kakaoUser?.kakaoAccount?.profile?.nickname else { return }
self.emailAuthSignUp(email: email, userName: userName, password: "\(password)") {
self.emailAuthSignIn(email: email, password: "\(password)")
}
}
}
Kakao API를 그대로 사용하다보니, 함수에 계층구조가 복잡하여 이해하는데 어려울 수 있어 블록마다 주석을 달았다.
이해를 위해 함수별로 기능을 설명하겠다.
1) kakaoAuthSignIn
func kakaoAuthSignIn() {
if AuthApi.hasToken() { // 발급된 토큰이 있는지
UserApi.shared.accessTokenInfo { _, error in // 해당 토큰이 유효한지
if let error = error { // 에러가 발생했으면 토큰이 유효하지 않다.
self.openKakaoService()
} else { // 유효한 토큰
self.loadingInfoDidKakaoAuth()
}
}
} else { // 만료된 토큰
self.openKakaoService()
}
}카카오톡 로그인을 실행하는 함수이다.
먼저 사용자가 이전에 로그인할 때 발급받은 토큰이 있는지 확인한다. 기존에 발급 받은 액세스 토큰 또는 리프레시 토큰의 존재 여부를 Bool 타입으로 알려주는데, 이때 값이 true여도 현재 사용자가 로그인 상태인지 보장해주지 않는다.
false인 경우 토큰이 없으므로 로그인을 통해 토큰을 발급받는 과정을 거쳐야한다.
발급된 토큰이 있더라도 해당 토큰이 유효한지, 사용가능한지 확인하는 과정이 추가로 필요하다.
따라서 UserApi.shared.accessTokenInfo 함수를 통해 토큰의 유효성을 검사한다.
유효하지 않은 경우 - error가 반환된 경우에는 로그인을 통해 토큰을 새로 발급받는 과정을 진행한다. 유효한 경우에는 그대로 카카오 사용자의 정보를 불러오는 함수를 실행한다.
정리하면, kakaoAuthSignIn 함수는 토큰이 있는지 없는지 검사 후 있으면 해당 토큰이 유효하기도 한지 한번 더 검사하는 함수가 되겠다.
2) openKakaoService
func openKakaoService() {
if UserApi.isKakaoTalkLoginAvailable() { // 카카오톡 앱 이용 가능한지
UserApi.shared.loginWithKakaoTalk { oauthToken, error in // 카카오톡 앱으로 로그인
if let error = error { // 로그인 실패 -> 종료
print("Kakao Sign In Error: ", error.localizedDescription)
return
}
_ = oauthToken // 로그인 성공
self.loadingInfoDidKakaoAuth() // 사용자 정보 불러와서 Firebase Auth 로그인하기
}
} else { // 카카오톡 앱 이용 불가능한 사람
UserApi.shared.loginWithKakaoAccount { oauthToken, error in // 카카오 웹으로 로그인
if let error = error { // 로그인 실패 -> 종료
print("Kakao Sign In Error: ", error.localizedDescription)
return
}
_ = oauthToken // 로그인 성공
self.loadingInfoDidKakaoAuth() // 사용자 정보 불러와서 Firebase Auth 로그인하기
}
}
}카카오 서버에 로그인하는 함수이다.
카카오 서버에 로그인을 하여 새로운 토큰을 발급받는데, 이 때 사용자가 카카오톡 어플로 간편로그인 할 수 있는 지에 따라서 분기가 나뉜다.
UserApi.isKakaoTalkLoginAvailable을 통해 카카오톡 간편로그인 가능 여부를 체크한다. 가능하다면 true 블록에서 UserApi.shared.loginWithKakaoTalk 함수로 카카오톡 어플로 간편 로그인을 진행한다.
간편로그인이 불가능하다면 UserApi.shared.loginWithKakaoAccount 함수로 웹 페이지에서 카카오 계정으로 로그인한다.
UserApi.shared.loginWithKakaoTalk, UserApi.shared.loginWithKakaoAccount 두 함수 모두 로그인 성공하면 카카오 계정의 사용자 정보를 불러오는 함수를 실행한다.
3) loadingInfoDidKakaoAuth
로그인이 되면, 카카오 계정으로부터 사용자의 정보를 가져오는 함수를 실행한다.
func loadingInfoDidKakaoAuth() { // 사용자 정보 불러오기
UserApi.shared.me { kakaoUser, error in
if let error = error {
print("카카오톡 사용자 정보 불러오는데 실패했습니다.")
return
}
guard let email = kakaoUser?.kakaoAccount?.email else { return }
guard let password = kakaoUser?.id else { return }
guard let userName = kakaoUser?.kakaoAccount?.profile?.nickname else { return }
self.emailAuthSignUp(email: email, userName: userName, password: "\(password)") {
self.emailAuthSignIn(email: email, password: "\(password)")
}
}
}UserApi.shared.me 함수를 통해 로그인된 카카오 계정의 사용자 정보를 불러온다.
여기서 password는 Firebase Authentication 계정에 사용될 비밀번호이다. 근데 이 변수에 kakaoUser?.id 값을 할당한 이유는, 보안상 카카오 계정의 본래 비밀번호는 절대 가져올 수 없기 때문이다.
따라서 비밀번호로 대체할만한 값이 필요한데, 카카오 로그인을 할 때는 이메일과 비밀번호를 입력하여 일단 로그인을 하고 이 계정을 Firebase Authentication으로 로그인할 때에는 해당 카카오 계정의 고유 uid 값을 Firebase Authentication의 비밀번호로 대체하여 계정 등록 혹은 로그인을 진행한다.
다만, 이렇게 할 경우 Firebase Authentication 콘솔 관리에서 해당 계정의 비밀번호를 변경하게 된다면 절대 로그인을 할 수 없으니 카카오 계정으로 로그인한 경우 다른 로그인 제공업체와 마찬가지로 계정 비밀번호 등은 앱 관리자가 조작하면 안된다.
다른 제공업체(구글, 애플 등)는 Firebase Authentication 콘솔 관리창에서 애초에 비밀번호 관련된 정보에 접근도 안되어 관리할 수 없지만 카카오톡 로그인은 기본 제공업체인 이메일 / 비밀번호 방법으로 로그인하기 때문에 접근이 가능하다.
하지만 접근하여 변경할 경우 로그인이 불가능하니 주의해야한다.
7. 카카오톡 로그인하기
이제 카카오톡으로 로그인하기 위해서 View 파일을 수정해보자.
먼저, emailAuthSignUp 함수를 수정했기 때문에 SignUpView.swift 파일에서 회원가입 버튼 코드를 수정해야한다.
// (1)
Button {
isShowingProgressView = true // ProgressView 보이기
if passwordText.count < 6 {
isPasswordCountError = true
}
if passwordConfirmText != passwordText {
isPasswordUnCorrectError = true
}
if passwordText.count >= 6 && passwordConfirmText == passwordText {
viewModel.emailAuthSignUp(email: emailText, userName: nameText, password: passwordText, completion: nil)
isShowingAlert = true
}
} label: {
Text("회원 가입")
.frame(width: 100, height: 50)
.background(!checkSignUpCondition() ? .gray : .blue)
.foregroundColor(.white)
.cornerRadius(10)
.alert("회원가입", isPresented: $isShowingAlert) {
Button {
dismiss()
} label: {
Text("OK")
}
} message: {
Text("회원가입이 완료되었습니다.")
}
.padding()
}
.disabled(!checkSignUpCondition() ? true : false)emailAuthSignUp에 completion 매개변수가 추가됐으나, SignUpView.swift 파일은 이메일, 비밀번호로 Firebase Authentication에 계정을 등록하는 View이므로, completion에 nil 값을 할당한다.
SignInView.swift 파일에서 카카오톡 로그인 버튼을 추가한다.
//(1)
VStack {
Button {
signInProcessing = true
viewModel.emailAuthSignIn(email: emailText, password: passwordText)
} label: {
Text("이메일 로그인")
.frame(width: 150)
.frame(height: 15)
.padding()
.foregroundColor(.white)
.background(emailText.isEmpty || passwordText.isEmpty == true ? .gray : .red)
.cornerRadius(10)
}
.disabled(emailText.isEmpty || passwordText.isEmpty ? true : false)
Button {
signInProcessing = true
viewModel.kakaoAuthSignIn()
} label: {
Image("kakao_login_medium_narrow")
.renderingMode(.original)
}
}
.padding(.bottom, 40)카카오톡 로그인 이미지 파일(리소스 파일)은 https://developers.kakao.com/tool/resource/login 을 통해 다운받을 수 있다.
이미지를 다운받아서 프로젝트 Assets 에 추가하여 사용하면 된다.
8. 결과
카카오톡 계정으로 최초 로그인할 때에는 모달뷰가 올라와 카카오톡 로그인을 하고 Firebase Authentication 로그인을 진행한다.
두 번째 로그인할 때에는 카카오톡 로그인 토큰이 유효하여 바로 Firebase Authentication 로그인만 진행한다.
Firebase Authentication Console 창에서도 보면 Users 목록에 카카오톡 계정이 잘 등록된 것을 확인할 수 있다.
주의사항은 카카오톡 로그인은 Firebase Authentication의 이메일 / 비밀번호 기본 제공업체를 통해 로그인하는 방식이다.
따라서 예제 프로젝트처럼 앱에서 이메일 / 비밀번호를 생성하여 회원가입 후 로그인하는 방법과 카카오톡을 통해 로그인하는 방식 두가지가 모두 존재할 경우, 카카오톡 이메일과 앱에서 회원가입한 이메일이 중복되면 둘 중 하나는 생성이 안된다.
나는 카카오톡 계정이 elisha0103@naver.com인데, 만약 SignUpView.swift 에서 elisha0103@naver.com 이메일을 회원가입한 경우 카카오톡 계정은 로그인이 불가능하다.
혹은 카카오톡 계정을 먼저 로그인한 후 SignUpView.swift 에서 elisha0103@naver.com 이메일을 생성하려고 하면 생성이 안된다.
이를 방지하기 위해서 예전에 만든 앱에서는 카카오톡으로 로그인할 때, 카카오 사용자의 정보(사용자의 이메일 주소)를 가져와서 'kakao_카카오계정 이메일' 로 이메일 값을 재가공해서 Firebase Authentication 계정 등록, 로그인을 진행했다.
이 방법이 너무 원시적이라고 생각이 되면 아래처럼 아예 앱에서 회원가입하는 것을 없애고 소셜 계정으로만 로그인하도록 구성해도 된다.
이렇게 카카오톡 API를 프로젝트에 연동하고 Firebase Authentication에 로그인하는 것까지 확인해봤다.
Firebase에 추가 제공업체로 카카오톡이 없기 때문에 기본 제공업체를 거쳐가야하는 번거로움이 있지만, 통상 회원가입을 진행하고 회원에 대한 정보는 별도의 Cloud 데이터베이스에 저장하기 때문에 '사용자 인증'만 한다는 개념에 가깝다.
카카오톡 API를 UIKit 프로젝트에 연동하는 게시글은 많지만, SwiftUI에 적용하는 글 중에 내가 프로젝트에 도입하면서 이해가 안되거나 어려웠던 경험들을 떠올리며 더 상세히 적었다. 그러나 나중에 읽었을 때에도 이해가 안되거나 어려운 부분들은 계속 수정해나갈 예정이다.
'SwiftUI' 카테고리의 다른 글
| SwiftUI Firebase Email Auth Login 구현하기 (0) | 2022.12.23 |
|---|---|
| SwiftUI Firebase Auth - Google Account 연동하기 (0) | 2022.12.23 |
| SwiftUI Firebase Realtime Database CRUD 제대로 사용하기 (12) | 2022.12.08 |
| ATS Policy에 의한 HTTP 통신 제약 (0) | 2022.11.28 |
| SwiftUI 문서 구조화 해보기 - 초급 (0) | 2022.11.07 |