[SWIFT] 로그인 모듈 구성 [1/3] -카카오 로그인

SWIFT 로 로그인 모듈 부분을 만들며 주의할 점을 공유하려고 합니다.

로그인에서 사용하는 SDK는 자세한 것은 공유하는 레퍼런스 사이트를 참고해주세요.

카카오 계정으로 로그인 하기

현재 카카오 API는 Object-C로 구성되어 있습니다.  제가 공유드릴 내용은 Swift3로 구성하여 작성하는 법을 공유드리겠습니다.

1. 카카오 개발 APP 등록

카카오 로그인을 구현 시 앱 등록과 사용자 관리를 사용 하겠다는 것을 표시해야합니다.

자세한 설정 방법은 카카오 API 을 참고해주세요.  

2. 카카오 SDK 설치

1) 카카오 SDK 다운 받습니다.

2) 압축 푼 파일에서 KakaoOepnSDK.framework 을 로그인 구현할 xcode project의 Framewroks로 옮깁니다.

3) App Root 파일명 > info > Custom ios Traget Properties > KAKAO_APP_KEY 에 1번에서 생성한 카카오 앱 키를 입력합니다.

   KAKAO_APP_KEY는 직접 생성해줘야하며 아래 하단의 그림에서 Key 부분에 마우스 오버레이 하면 '+' 기호가 나올 것입니다. '+' 상태에서 클릭 후 생성 하시면 됩니다.

4) URL Types 을 추가합니다. 

    URL Schemes : KAKAO_APP_KEY 값 앞에 kakao 붙여서 표시. (ex) kakao08f9787....e715d2c8351)

    

5) 브릿지 생성

  Swift로 넘어면서 Obect-C 파일을 호출 시 브릿지를 이용하여야합니다. 

  Briging-Header.h 파일을 생성하여, 다음과 같이 작성합니다.

#ifndef Briging_Header_h
#define Briging_Header_h
 
#import <KakaoOpenSDK/KakaoOpenSDK.h>
 
#endif 

6) Build Settings의 Bridging 연결

   AppName(Root) > Build Setting > 검색창에 'swift compiler - general' 검색 > 생성한 Bridging 경로 입력. 

  

  생성한 Bridging 경로는 다음과 같이 넣어주시면 됩니다.

./[App Name Model] / Bridging Name 

(ex) ./LoginModel/Briging-Header.h)

7) Info.plist 정보 업데이트

  그림과 같이 Info.plist에서 Source Code을 클릭합니다.

다음과 같이 정보를 입력합니다. 모자이크 된 부분은 3번에서 넣어준 앱키 입니다.

<string>/*app key*/</string>
 
<key>LSApplicationQueriesSchemes</key>
 
<array>
 
    <string>kakao/*app key*/</string>

    <string>kakaokompassauth</string>
 
    <string>storykompassauth</string>
 
    <string>kakaolink</string>
 
    <string>kakaotalk-4.5.0</string>
 
    <string>kakaostory-2.9.0</string>
 
</array>

6번까지 하셨으면 카카오 SDK 연결이 끝났습니다. 그 다음은 소스쪽에서 적용하는 방법입니다.

3. KAKAO API 사용

1) AppDelegate.swift 파일에서 다음과 같은 delegate 값을 변경합니다.

// MARK: Google Login, Kakao Login
// GIDSignIn 인스턴스의 handleURL 메소드를 호출하며 이 메소드는 애플리케이션이 인증 절차가 끝나고 받는 URL를 적절히 처리합니다.
 
@available(iOS 9.0, *)
 
func application(_ application: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
 
        if KOSession.isKakaoAccountLoginCallback(url) {
            return KOSession.handleOpen(url)
        }
        
        return true
}

// ios 이상에서 앱 실행 시 해당 메소드를 구현해야 합니다.
 
func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
 
    if KOSession.isKakaoAccountLoginCallback(url) {
        return KOSession.handleOpen(url)
     }  

    return true
}

위 두 함수는 카카오 계정 로그인 팝업 호출 후 리스너(클로저)를 연결 시 사용됩니다. 

만약 두 개중 한개라도 안하게 된다면, 카카오 계정 로그인 후 아무런 동작을 안하게 됩니다.

2) 카카오 로그인 버튼(KKakaoLoginButton) 클릭에 대한 Callback 설정

@IBAction func kakaoAction(_ sender: Any) {   
    btnKakao.actionSigninButton(view: self) { 
        (profile, error) in
        guard profile != nil else{
            return
        }
​
     DispatchQueue.main.async(execute: { () -> Void in
        print("SUCCESS GET PROFILE!!\n")
        guard (self.getAppDelegate()) != nil else{
            return
        }
​
        //Google DB Update
       var info = UserInfo()
       info.joinAddress = "kakao"
​
       if let nickName = profile!.property(forKey: KOUserNicknamePropertyKey) as? String{
          info.name = "\(nickName)"
       }
​
       if let value = profile!.email{
           print("kakao email : \(value)\r\n")
           info.email =  "\(value)"
       }
                                        
       if let value = profile!.id{
           print("kakao email : \(value)\r\n")
           info.id =  "\(value)"
       }
​
       print("READY FOR KAKAO PROFILE!!\n")
       let appDelegate = self.getAppDelegate()
                                                                             
       appDelegate?.addUserProfile(uid: appDelegate?.getDatabaseRef().childByAutoId().key, userInfo: info)
                                                                               
       self.gotoMainViewController(user: info)
       print("SAVE FOR KAKAO PROFILE!!\n")
       })
    }
}

KKakaoLoginButton 의 actionSigninButton 을 통하여 카카오 로그인 후 정보를 가져옵니다. 

위와 같은 방식으로 적용  후 실행하면 카카오 로그인을 실행 할 수 있습니다.

(참고. 위 소스의 btnKakao는 UIView의 KKakaoLoginButton 클래스 선언한 View 입니다.)

KAKAO LOGIN 버튼 보이기

1) StoryBoard -> Add View 

2) 추가한 View Class 명을 "KKakaoLoginButton"로 설정합니다.

3) View을 kakaoAction함수(카카오 로그인 시 동작할 함수)에 연결합니다. (Action 연결 형태를 "Touch Up inside" 로 설정 합니다.)

로그인 모듈 전체 소스는 여기 에서 확인 가능합니다.

카카오 로그인을 간단히 할 수 있는 방법은 여기 에서 확인 가능합니다.

링크를 통해 버튼 한개만 갖고 간단히 카카오 로그인 구성 할 수 있을 것으로 기대 합니다.

[SWIFT3] 로그인 모듈 구성 [2/3] - 구글 로그인

[SWIFT3] 로그인 모듈 구성 [3/3] - 페이스북 로그인

참고

https://developers.kakao.com/docs/ios#사용자-관리

http://blog.naver.com/PostView.nhn?blogId=ntkor&logNo=220781960501